Twelve tiny browser toys, each turning one gesture into a small workout for a specific cognitive skill. Built to answer a question with my hands.
Twelve toys, four families, one cognitive skill each
Press, drag, or let go. Open the live prototype
Context
Personal project, 2026
Stack
Vanilla JavaScript, Canvas API, Web Audio API. One HTML file, no backend, no build step.
Shape
Twelve toys in four families: Hold, Draw, Let go, Look.
Building to think
I build to think. The fastest way for me to test whether “feel the skill” was real was to make the smallest thing that could prove or kill it, then hold it in my hand and ask if it landed.
The first version was three toys in an afternoon. Playing them told me more than a week of planning would have.
The system
One question was not enough to hold the idea, so I built a system. Four families, three toys each. Three families are ways of acting (hold, draw, let go) and one is a way of perceiving (look). Every family maps to three cognitive skills, so the same move trains three different things.
| Family | Skill 1 | Skill 2 | Skill 3 |
|---|---|---|---|
| Hold | Patience: impulse control | Steady: sustained attention | Count: time perception |
| Draw | Melody: cross-sensory mapping | Recall: working memory | Continue: pattern prediction |
| Let go | Constellations: systems thinking | Aim: mental simulation | Tinker: causal reasoning |
| Look | Follow: visual tracking | Fog: visual search | Turn: mental rotation |
Three toys up close
Patience (Hold, impulse control)
Press and hold and a flower grows petal by petal. Let go early and it wilts. The reward is withheld and then given all at once, so waiting itself becomes the mechanic. I made growth run on elapsed time, not frames, so it feels the same on any device and cannot be gamed by tapping.
Patience · impulse control
Melody (Draw, cross-sensory mapping)
Drag a line and it plays back as a loop, where height is pitch and width is time. Your doodle becomes a melody you can see and hear at once. This is the toy people replay first, because the surprise is instant.
Melody · cross-sensory mapping
Tinker (Let go, causal reasoning)
Nine seeds drift under a rule you control. The goal asks you to gather or scatter them, and you flip one rule at a time (attract or repel, gentle or strong) until they obey. It rewards forming a hypothesis, testing it, and reading the result.
Tinker · causal reasoning
Improving it around the user
Building to think got me twelve working toys, but it left one thing untested: whether a first-time visitor knows what to do. These are gesture toys, and a gesture with no visible cue is easy to miss. Someone could open Patience and never think to press and hold, and if those first seconds are confusing, people leave before the payoff arrives.
So I designed for that moment. The first time you open a toy, a small prompt shows the exact gesture in that family’s colour, then fades the instant you act. It never blocks the interaction and it shows only once. I also added a light sense of progress, so the twelve read as a set worth finishing rather than twelve separate things.
This is where I would stop guessing and start watching. I would sit with five people, hand them the page cold, and ask them to think aloud. I want to see which toys they try without a prompt, whether the cue helps or gets ignored, and where they hesitate. Those answers, not my assumptions, would decide what to change next: which toys to deepen, which to simplify, and whether the skill labels earn their place.
Play the twelve
Play the twelve, read the code, or head back to the rest of the work.
