Split-flap panel
Recreating the mechanical departure boards from train stations and airports, because I kept staring at the one at a Starbucks in Manhattan.
Where this came from
The Starbucks Reserve in Manhattan has a Solari-style split-flap board behind the bar that flips to show what's brewing. I sat there one afternoon and spent most of it watching the slats flip through coffee names instead of reading the book I'd brought.
Most digital versions of these boards feel flat. The real fun of a Solari board is the sound and the physical fold of a slat tipping forward, not the letters themselves. I wanted to get that feel inside a browser without using canvas or video, just regular DOM elements and CSS 3D transforms.
A brief history
Solari di Udine, an Italian clockmaker, shipped the first electromechanical split-flap boards in the 1950s. They ended up in train stations across Europe, airports like JFK and Frankfurt, baseball scoreboards, and currency-exchange kiosks in hotel lobbies.
Most got replaced by LCD screens in the 2000s. A few originals are still running: Milano Centrale, the lobby at Wynn Las Vegas, and yes, that Starbucks Reserve.
How it works
Each letter is its own slat. A slat has a static back half and two animated halves that fold down and up in sequence. About 110ms per flip, split into a 50ms fold and a 60ms unfold, with a small delay between them so the seam reads as two separate motions.
Going from A to R, the slat doesn't snap. It walks forward through the alphabet one letter at a time, so you see the letters in between fly past. That's how the real thing works too, since each flap is physically attached to the next one on a chain. The alphabet is forward-only and wraps around: Z, then 0, then space, then back to A.
The same component scales from compact inline use (28 by 42 px per slat) up to hero displays over 180 px tall. All four variants share the same 3D transforms, keyframe timings, and alphabet traversal. Only the dimensions and type size change.
Try it
Type anything. Letters, numbers, periods, spaces. The panel flips to match.
Use it yourself
Three files, MIT licensed, copy-paste friendly. Install with shadcn, or grab the source from the repo.