Playable demo
Drum Teacher
An interactive tutor that takes you from zero to your first real drum beats — seven nearly wordless lessons on a step grid, every sound synthesized live in the browser.
Scale Drum teaches melody; this one teaches rhythm. It’s a drum kit on a step grid that walks you from your very first tap to building grooves of your own: the kick and snare as the train of the beat, hi-hats filling the gaps up top, the crash turning the page of a phrase, tom fills tumbling down the kit to close one, and a detour into 3/4 to learn what a time signature even is — the waltz.
The lessons are nearly wordless on purpose. Each one is a single sentence plus an animated pattern strip — the goal beat, pulsing as tiny colored dots — and ghost cells that breathe on the grid where your drums belong. You learn by filling in the lights, and the moment your pattern matches, the kit starts playing it back to you.
Like its sibling, every sound is synthesized from scratch in Web Audio — the kick is a pitch-dropping sine with a felt-beater tap, the snare three drum-head modes over wire noise, the cymbals inharmonic partials wrapped in air. No samples anywhere. The free-play room at the end adds two studio effects with illustrated controls: a reverb whose one-point-perspective room literally deepens as you raise the amount, and a compression painting where a distant tree sharpens and walks toward you — because that’s what compression does to quiet details.
The whole thing ships as one self-contained HTML file in a seaside palette, which is why you can play it right here on this page.
Want someone who builds like this?
I'm open to opportunities. Tell me what you're building — I answer every email.