Play Studies

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.
Play Studies: twelve toys in four families, one cognitive skill eachTwelve 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: hold to grow a bloom you cannot rushPatience · 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: draw a line that loops back as soundMelody · 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: change a rule and the seeds respondTinker · 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.

Leave a Reply