Case study · Interactive sound toy
clack
Ten satisfying materials to pop, squish and crunch with nothing but a cursor. A small web toy for the moments when your hands want something to do.
01 — Why
Hands want something to do
We pop bubble wrap, squeeze slime and watch soap get shaved into cubes, not to finish anything but because the small, repeatable feeling settles us. ASMR videos turned these textures into a genre, and on Roblox, ASMR tower obbies such as 왁뿌볼 타워 and Keyboard ASMR Towers have players climb from one satisfying material to the next.
On a screen, though, we mostly watch. The textures are right there, but our hands never get to touch them.
What if the cursor were the fingertip?
02 — The idea
Every step is a press
The screen is laid out as a grid of invisible keys. Each cell the cursor crosses is pressed once: it plays a sound, and the picture under it reacts. Slow strokes tap, fast flicks sweep, and even an idle wiggle turns into a run of sound.
No clicks, no goals, no score to lose. A quiet count of your clacks is the only number on screen.
Each sound draws its own picture, and the picture answers where you touch it: bubbles flatten, snow takes a boot print, soap gives up a path down to the paper.
A quick stroke can fire twenty sounds a second, so anything with a hard edge (a ring, a ping, a thump) soon sounds like gunfire. The sounds are shaped from soft, filtered noise instead, so a stroke blends into one gentle wash.
03 — Materials
Ten materials, ten pictures
Each material starts from something people already find satisfying, and most pictures are drawn after a reference: a photo, a print or a texture. Pick one to play it.
04 — Process
It started as a keyboard
The first version was called 딸깍 (ddalkkak, the Korean word for a click): a full-screen keyboard that clicked under a passing cursor, with ten sound sets, from clicky switches to bubble wrap and marimba, and seven keycap themes. It took a lot of cutting to get from there to here.
- 1A keyboard that clicks
Ten sound sets on a 60% keyboard. The name clack comes from here.
- 2Drop the keys
Once the sounds turned into wax, slime and bubble wrap, a keycap was the wrong picture for them. Each sound got a picture of its own.
- 3Cut to two, rebuild to ten
Most ideas didn't survive being played. The lineup shrank to Bubble Wrap and Crunchy Slime, then grew back to ten.
- 4Draw from life, tune for calm
Pictures redrawn after photos and prints, and sounds softened until a fast stroke still feels calm.
Built, played and cut
- Pop It
- Squishy
- Mochi Squishy
- Wax Ball XL
- Kinetic Sand
- Typewriter
- Gaming Switches
- Voice
- Marimba
- Pearl
- Soft Brush
- Bubbles
- Rain on Glass
- Ink Mountains
- Cross Stitch
- Tanghulu
- Sugar Gummies
Seventeen materials were built, played and cut along the way.
Three iterations
Tanghulu → Sugar Gummies → Chewy Jellies
Rubbing the sugar off a gummy wasn't the feeling. Squeezing gummies together, feeling them stick and peeling them apart was. Later the fruit colors and sugar gave way to one flat pink under a fine grain, after a pink and white reference.
Ringing twinkle → bubble blips → soft blips → a breath of foam
Each try was softer, and each still sounded like shooting under a fast cursor. Filtered noise with slow attacks fixed it, and became the recipe for the calmer sounds that followed.
Cell foam → pebbles → line print → towers → halftone → lime on lavender
Wax Ball went through eight looks and was cut once along the way. It came back as a black and white halftone of squares that the cursor presses into diamonds, then took the lime, lavender and fine grain of a second reference.
05 — Details
The small stuff
The ring takes each picture's own color, so it reads as part of the material rather than laid over it.
Every sound is synthesized live with the Web Audio API, with a little randomness, so no two steps sound exactly alike.
Letters, digits, space and enter play the current material, and the arrow keys switch between materials.
On phones and tablets, drag a finger across the screen, and tap the arrows in the bottom corners to switch materials.
Cobalt, periwinkle, grey and warm paper, and ink. Eight materials borrow their colors from their own reference images instead.
The whole toy is a single HTML page: no build step, no install, nothing to load but fonts.
Now it's your turn
Turn the sound on and move.