Welcome to the Stim Webtoys Library, hosted at no.toil.fyi. This is a collection of interactive web-based toys designed to provide some fun sensory stimulation. They’re built with Three.js, WebGL, and live audio interaction for anyone who enjoys engaging, responsive visuals. These are great for casual play, or as a form of sensory exploration, especially for neurodiverse folks.
- Clone the repo and
cdinto it. - Use Node.js 22: run
nvm useif you have nvm installed. - Install dependencies with
npm install. - Start the dev server with
npm run devand openhttp://localhost:5173in your browser.
- A Modern Web Browser: Anything that supports WebGL should work (think Chrome, Firefox, Edge).
- Microphone Access: A lot of these toys respond to sound, so you’ll want to enable that.
- Touch Devices: Some toys are enhanced by touch, but that’s optional.
Head to no.toil.fyi and jump right in. The toys respond to sound, touch, and other inputs to create a chill or stimulating experience. If you’d rather play locally, follow the steps in Local Setup to run the dev server and open the toys at http://localhost:5173.
| Toy | Description |
|---|---|
| 3D Toy | Dive into a twisting 3D tunnel that responds to sound. |
| Star Guitar Visualizer | A visual journey inspired by an iconic music video, synced to your music. |
| Defrag Visualizer | A nostalgic, sound-reactive visualizer evoking old defragmentation screens. |
| Evolutionary Weirdcore | Watch surreal landscapes evolve with fractals and glitches that react to music. |
| Multi-Capability Visualizer | Shapes and lights move with both sound and device motion. |
| Trippy Synesthetic Visualizer | Blend audio and visuals in a rich synesthetic experience. |
| Pattern Recognition Visualizer | See patterns form dynamically in response to sound. |
| SVG + Three.js Visualizer | A hybrid visualizer blending 2D and 3D elements, reacting in real time. |
| Dreamy Spectrograph | A relaxing spectrograph that moves gently with your audio. |
| Interactive Word Cloud | Speak and watch the word cloud react and shift with your voice. |
| Cube Wave | A grid of cubes that rise and fall with your audio. |
| Particle Orbit | Thousands of particles swirling faster as the music intensifies. |
| Spiral Burst | Colorful spirals rotate and expand with every beat. |
| Bouncy Spheres | Lines of spheres bounce and change color with audio. |
| Rainbow Tunnel | Fly through colorful rings that spin to your music. |
| Star Field | A field of shimmering stars reacts to the beat. |
- Issue: Some users with older or unsupported browsers/devices might run into issues.
- Fix: Add fallback options or messages for users without WebGL support.
- Issue: Some toys are heavy on resources and might lag on lower-end devices.
- Fix: Add settings to adjust visual quality (e.g., reduce particle count or resolution).
- Issue: Not much feedback when audio permissions are denied or unavailable.
- Fix: Add error messages or alternative audio input options when microphone access isn’t granted.
- Issue: Some toys are touch-sensitive, but they don’t always work well on mobile.
- Fix: Improve multi-touch support and make the toys more mobile-friendly.
To play with the toys locally you’ll need to run them from a local web server. Opening the HTML files directly won’t work because the TypeScript modules and JSON fetches can’t load over file://. Here’s the quick setup:
-
Clone the repository:
git clone https://github.com/zz-plant/stims.git cd stims -
Use Node.js 22 (see
.nvmrc). If you have nvm installed, runnvm use. -
Install dependencies:
npm install
-
Start the development server:
npm run dev
Open http://localhost:5173 in your browser.
To serve a static build instead of the dev server, run:
npm run build
python3 -m http.server distThen open http://localhost:8000.
All JavaScript dependencies are installed via npm and bundled locally with Vite, so everything works offline without hitting a CDN.
This project uses Jest for its test suite. To install dependencies and run the tests:
-
Install dependencies:
npm install
-
Run the tests:
npm test
Before committing, run npm run lint to check code style and npm run format to automatically format your files. This keeps the project consistent.
This project is released under the Unlicense, so you’re free to copy, modify, sell, and distribute it however you like. Do whatever you want with it—there are no restrictions.
Feel free to add more toys, tweak the visuals, or contribute in any way.