Split Flap Display HTML CSS JS — Solari Board

A split-flap display — also called a Solari board — is the mechanical-looking sign you see in old train stations and airports, where each character cell physically flips through letters until it lands on the target. This recreation uses CSS 3D transforms, the perspective and rotateX properties, and a JavaScript animation engine that cycles each cell through the character set one flap at a time. No images, sprites or libraries are involved — just the DOM and CSS.

The anatomy of one flap cell

Each character is a .flap-cell with fixed dimensions and, crucially, a CSS perspective value that creates the 3D viewing frustum so rotations look like they recede into the screen. Inside the cell are five layered elements: a static .top half showing the upper portion of the current character, a static .bot half showing the lower portion, a thin .divider line across the middle to mimic the seam of a physical flap, and two animated flaps — .flap-top-anim and .flap-bot-anim — that perform the actual flip and are hidden when idle.

Both halves clip their character. The top half uses overflow: hidden with the glyph aligned to the bottom, and the bottom half aligns the glyph to the top using transform: translateY(-50%) on its inner <span>. The result is that a single full-height character appears split exactly across the horizontal seam — the top half shows the upper part, the bottom half shows the lower part, exactly like a real flap.

How the flip animation works

A physical split-flap works in two beats: the top leaf bearing the old character rotates downward and out of view, then the bottom leaf bearing the new character rotates up into place. The code reproduces this precisely with rotateX and two transform-origin settings.

The top animated flap has transform-origin: bottom center, so it hinges along the seam. It starts at rotateX(0deg) showing the previous character, then transitions to rotateX(90deg), folding away from the viewer until it is edge-on and invisible. backface-visibility: hidden keeps its reverse side from showing. The bottom animated flap has transform-origin: top center and starts folded at rotateX(-90deg) showing the next character edge-on, then transitions to rotateX(0deg) to snap flat into the final position. Sequencing the two with short setTimeout delays (about 55ms each) produces the convincing click-down motion.

A subtle but essential trick: before animating, the code sets transition: none, applies the start transform, and then in a double requestAnimationFrame re-enables the transition and applies the end transform. The double rAF guarantees the browser has committed the start state to the layout before the transition begins, otherwise the browser would collapse both writes into one and no animation would play. This is the standard pattern for triggering CSS transitions from JavaScript reliably.

The character set and cycling logic

A constant CHARSET string defines the available glyphs in order: a leading space, then A–Z, then 0–9. Each cell stores a current index and a target index into this string. The animation does not jump straight to the target — like a real board, it steps one character forward at a time. animateStep advances current by one using modular arithmetic (current + 1) % CHARSET.length, performs one flip animation, and when finished schedules itself again with a short delay. It stops only when current === target. So changing a cell from A to G visibly flaps through B, C, D, E, F, G — the signature behavior of these boards.

Staggering columns and message handling

displayMessage pads or trims the input to exactly eight characters with padEnd and slice, then for each cell looks up the target character's index in CHARSET (falling back to space for unknown characters). To avoid a flat, simultaneous flip, each cell's animation start is delayed by i * 40 milliseconds via setTimeout, so the columns ripple from left to right — exactly how mechanical boards updated row by row. A per-cell animating flag prevents overlapping animation chains if a new message arrives mid-flip.

Building cells and wiring the UI

On load, the script creates eight cells with createElement, injects the inner markup with innerHTML, and stores each cell's state object in a cells array. Preset buttons are generated from a PRESETS array, each calling displayMessage on click. A text input lets users type custom messages (uppercased via CSS text-transform and JS), committing on the Set button or Enter key. Finally a setInterval auto-cycles through the presets every few seconds so the board is always alive, mirroring a departures board rolling through its schedule.

The whole effect — flipping leaves, the mechanical seam, the left-to-right ripple, the step-through-the-alphabet motion — comes entirely from layered absolutely-positioned divs, two rotateX hinges with opposite transform-origin, and a small recursive timing engine. It is a compact masterclass in CSS 3D and JavaScript-driven transitions.