A clattering departures board: every flap falls on a hinge, in perspective.
Each module is a drum of printed flaps: the top half of a character is on the front of the upright flap and the bottom half on the back of the one that last fell. To move on, the drum releases the next flap, which tips forward under gravity (angular acceleration proportional to the sine of its angle), slaps onto the stop and bounces before it settles, and several can be in the air at once. Flaps are drawn in perspective strips (the free edge widens as it swings toward you), shaded by their angle to the light, smeared along their sweep for motion blur, and they shadow the half beneath them. Modules only turn forward, so every change cascades through the drum (blank, digits, then letters), and the remarks column uses colour-printed word flaps the way real boards did. The board cycles through departures, quotations and the time.
Try it. Type a message and it flips onto the board as you type; Enter centres it, Escape returns to the timetable. Click or drag across modules to turn them by hand. Click once for the mechanical clatter (click the sound note to mute it).
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a split-flap departures board, the kind found in old railway stations, with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a grid of character modules (about 20 columns and 6 rows) on a dark board, sized to fit the window and sharp on high-DPI screens.
- Each module has an ordered list of flaps: a space, A to Z, 0 to 9 and a little punctuation. It shows its current character split horizontally into a top half and a bottom half with a thin dark gap between them.
- To change character, a module can only move forward through its list, one flap at a time, about 15 flaps per second, so reaching a letter means cascading through all the letters before it.
- Animate each flip: the top half of the old character folds down around the middle hinge. Fake the 3D rotation by scaling the half vertically by the cosine of its angle; past 90 degrees, show the bottom half of the new character instead.
- Fill the board with a short timetable (time, destination, platform) and let me type my own message onto it.
Once that works, make it beautiful:
- Give the flaps a little physics: accelerate them under gravity as they fall and let them bounce on the stop.
- Shade each falling flap by its angle, darken the half underneath it while it passes, and add a header with column captions and a warm station light.
- After the first click, play a short synthesized click (filtered noise with a fast decay) each time a flap lands.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as true perspective when drawing the falling flap, colour-printed word flaps for the remarks column, or a clock mode.
