Building an Airport-Style Split-Flap Display With CSS 3D Transforms

Building an Airport-Style Split-Flap Display With CSS 3D Transforms

You've seen this board before, even if you don't know its name: the departures sign at an old train station or airport, where every letter sits on its own mechanical card and flips through the alphabet with a satisfying clack until it lands on the right character. It's called a split-flap display , or a Solari board after the company that made them famous. The Split Flap Display snippet recreates the whole thing — the two-beat flip, the mechanical seam down the middle of each letter, the left-to-right ripple as a message updates — using nothing but layered <div> s, CSS 3D transforms, and a JavaScript timing engine. No video, no sprite sheet, no canvas. Here's the effect live — type your own message, or just watch it cycle through presets: Grab the code, or open the full editor with live HTML/CSS/JS panels: Split Flap Display on FWD Tools . It's plain HTML, CSS, and JavaScript, but the same editor has one-click export buttons for React , Vue , Angular , and React + Ta…