An English vocabulary app for Korean learners built on a rhythm-game core loop. The learning unit comes from 말해보카; the open question is what a rhythm layer adds without eating the attention the learning needs. Every iteration is kept — the value is in opening two of them side by side.
Each file below is self-contained: no build step, no dependencies, no
external requests. Open one and play — on a phone browser if you can, since that is the target.
The two v5* files are the exception: they play a real recording, so
python3 prototypes/build.py has to inline it into prototypes/dist/
first. Opened from here they load and play, but silently — clone the repo to hear them.
The newest line, and the only one where the answer is a spelling rather than a choice. Piano Tiles' four lanes carry the letters; Brilliant's white paper and rounded slabs carry everything else; the sound lab's five tracks carry the timing.
Current. The help setting ran Show word · First letter · Nothing,
which is a scale of help read backwards, and its leftmost stop was also the default — so the
round opened as a transcription exercise with the answer already on screen. It ramps the
other way now and starts at nothing. And the Start button is position:sticky:
home is seven settings and a track picker, so the one control you were certainly going to
use sat below the fold from the moment the page opened.
On a phone the page scrolled behind the app — the frame was
100dvh and the body min-height:100vh, which differ by the height
of the URL bar, so reaching the top or the bottom took two gestures. One unit for both, and
the document does not scroll at all. The interface now speaks Korean, and does so by
default: the toggle sits above everything else, because a language switch you have to read
the other language to find is not one. And two dials that were set wrong — decoys cut from
0.59 per letter to 0.34, and the dead stretch between two words from 13.1 beats to 7.7,
which is the floor set by how early a tile has to appear.
No decoy may read the same as an answer that shares the screen with it — in v9's hardest mode 85% of them could, which makes a distractor a coin toss with a penalty on it. Landing a unit now puts it at the top of the board, big, in its place in the spelling, and a word finished clean takes a bow: the reward for spelling a word is the word, not a number going up. And the track picker is collapsed again, which it had only ever appeared to be.
The chart's slots are the onsets of the song's own hook, and each letter carries the motif note that owns its slot — so spelling a word performs the hook rather than an invented rhythm with the right notes in it. And the band stops playing its melody for the round, so the track has a hole in it shaped like you. Your notes get a stem nothing gates, because a combo system that can silence the player is backwards.
Three modes, and the column count comes from the mode — a
whole word gets two double-width lanes and two levers. A letter's decoy shares its beat
because that is a choice; a syllable or a word is answered by waiting, so its decoys
arrive on their own beats and are let past. Word lists split into Starter, Core and Hard,
because everything before this was reluctant-sized.
A letter carries at most one wrong tile, and the two sit a column apart — tiles that touch have no lane line between them wide enough to read as two things. Once every pair must be a column apart, four lanes admit only {0,2} {0,3} {1,3}, so two is the geometric maximum rather than a preference.
ac.outputLatency measured 192ms on the machine
this was built on — 0.41 of a beat. The track's beat is heard that much after it is
scheduled, so a player tapping in time with what they hear was judged 0.41 beats late, and
under the earlier window a perfectly timed tap was a miss. Three complaints that
sounded unrelated, one clock. nowBeat() now means the beat you are hearing.
The hit window was set to fit a band between a tile and the
foot of the board and never revisited — 178ms each side, drawn shorter than the tile
crossing it. Half again as wide now, and the band is taller than a tile. And the tap has a
transient: a snap that fires at currentTime and is never scheduled, so the gap
between finger and ear is the audio hardware's and nothing else's.
A correct tap sounds the next note of the song's own motif, on the song's own lead voice — land a word and you have played the hook once through; drop letters and it comes out full of holes. An early hit inside 75ms snaps to the grid, so accurate playing is audibly locked to the drums. The hit line doubles as the metronome, swelling on every beat and harder on the downbeat.
Square full-lane tiles with the lane dividers drawn over them, so a lane goes solid instead of holding a tile. The timing bar and the tap target become two objects: a band across the lanes is the window, with a lime line at the beat, and four levers under the board are what you press — a press lights its lane from the foot up. No two letters can share a stretch of lane, because the chart derives its minimum spacing from the tile height and the scroll rate.
Where the chart stopped being pixels and became beats — a letter is a note, and its tile is wherever that beat is relative to the playhead. Your combo drives the arrangement through four band tiers and every tap plays a note on the chord under the playhead. The foot of the board was still one object doing three jobs.
The mechanic without the music. Tiles fell at a pixel rate and a tap counted any time before the tile left the board, which made the track decoration — you could answer a whole word between two beats and nothing about the music would know. Kept because it is the version that shows what a rhythm game looks like with no rhythm in it.
Text stands still and only the timing signal moves. Everything after
v4b is a refinement of one idea: a row's brightness is its hit window.
Current. 5–7s to the first word instead of 17–24. Stem gains become four discrete tiers driven by the combo, so the band is audible rather than a fader wobble. Interface and studied language split apart; so do tempo and vocabulary difficulty.
The pad stops being a switch and becomes an instrument — every tap speaks, right or wrong, and your playing thins or thickens the arrangement. Adds a Listen screen and a two-bar audition of each track.
A phone-width frame, four difficulty levels turning three separate dials, and a Korean version that swaps interface, word bank and voice — not chrome-deep.
One pad instead of four targets. Words fill with colour on staggered beats; a single tap claims whichever completion it landed nearest.
A whole CC0 arrangement start to finish, with the round laid over its structure.
A real recording as two eight-bar loops. Sounded better, built worse — the reason the line went back to synthesis.
A chorus every four words, leeway on the echo, and music that builds by stacking stems.
The dead fourth bar becomes an echo: you tap the word back syllable by syllable, stress on a strong beat.
An unambiguous count-in — no bar on screen means no tapping — and syllables as the same mechanic with more than one tap.
The grid was over-built: one cell per row and column is just an ordering. Four rows and a falling bar replace it.
A 4×4 step sequencer. Rows are words, columns are beats.
The look from references/kinetic-typography/ taken off the page
and put on the game. Neither version changes the mechanic. Kept as the standing alternative to
the Brilliant language this page and the falling-letters prototype now use — they do not mix,
and having both built is the only way to choose between them.
Current. v8 re-skinned in greyscale plus one muted accent. Same type, layout and motion; the colour turned down until it stopped competing with the words.
v7 re-skinned, and too loud — full-bleed violet, neon lime slabs, a lime screen wipe. Kept because it is the version that shows what "too much" looks like.
Five synthesised arrangements to audition with no game on top — intro, build, drop, breakdown, second drop — with live stem muting and jump-to-section. Built to choose from, not to play.
Superseded, and worth playing anyway: this is where the conclusion came from that text must stand still and only the timing signal should move.
Syllable lanes and stress tap, a stem-building mix, and Korean cue highlighting.
Candidates arrive on consecutive beats, so the answer chooses the beat. Beat-relative hit windows and the first syllable mode.
Converging rings, falling lanes, horizontal scroll, scan line, typing — all candidates arriving on the same beat, which is what made the rhythm decorative.
The design argument, the ladder, known gaps, and the two things worth measuring next.
What each version changed and why the one before it was wrong.
The design system — palette, type, shape, components, the board's own rules, and where the design meets what the prototypes learned. Start here to build a screen.
Where the system came from: Brilliant measured pixel by pixel, with the scripts that re-derive every number — and the three things we did not take.
The falling-lane form: what it actually is, and the four things that had to change once the tiles carried letters.
The other design language — type, three colours, no pictures — and the stills it was read off.
Working agreements, and the nine audio rules — each learned by breaking it.
What the prototypes taught, kept separate from what they are.
The original concept and the questions it opened with.
Provenance and licence for the CC0 cuts, every measurement taken from them, and the commands to reproduce each one.