webdevpuneet.com

Related Snippets

175 in Animations category
1–6 of 60

Matter.js Ball Pit Hero Section

Matter.js Rope Bridge You Can Cut

Matter.js Soft-Body Jelly Blobs

Matter.js Drag-and-Throw Physics Playground

Matter.js Newton's Cradle (Drag to Swing)

Rough.js Sketchy Annotation Highlight

Split Flap Display HTML CSS JS — Solari Board

Split Flap Display · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsKeyboard Navigation3D Effects

Copy & paste

Source Code

<div class="app">
  <div class="board-frame">
    <div class="board" id="board"></div>
  </div>
  <div class="controls">
    <input type="text" id="msgInput" maxlength="8" placeholder="Type message..." spellcheck="false">
    <button id="setBtn">Set</button>
  </div>
  <div class="presets" id="presets"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS 3D transforms: perspective plus rotateX hinges recreate physical flap rotation
Dual transform-origin: top flap hinges at bottom center, bottom flap at top center for two-beat flips
backface-visibility hidden: keeps the reverse of each rotating leaf from showing through
Step-through cycling: cells flap one character at a time through CHARSET toward the target
Double requestAnimationFrame: reliably triggers CSS transitions from JavaScript
Staggered timing: per-column setTimeout offsets create a left-to-right ripple
Character clipping: overflow hidden and translateY split one glyph across the seam
Auto-cycling presets: setInterval rolls through messages like a departures board
Custom input: type any eight-character message and commit with Set or Enter
Pure DOM and CSS: no images, sprites, canvas or external libraries

About this UI Snippet

How to Build a Split-Flap Display with CSS 3D Transforms and JavaScript

Screenshot of the Split Flap Display snippet rendered live

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.

Step by step

How to Use

  1. 1
    Watch it cycleOn load the board auto-cycles through preset messages, flapping each cell through the alphabet to its target.
  2. 2
    Click a presetPick one of the preset buttons to flip the board to that message instantly.
  3. 3
    Type custom textEnter up to eight characters in the input field — letters, numbers or spaces.
  4. 4
    Set the messagePress the Set button or hit Enter to animate the board toward your custom text.
  5. 5
    Observe the rippleNotice how columns start their flip staggered left to right for a mechanical board feel.
  6. 6
    Adapt the charsetEdit the CHARSET constant in the JS to add symbols or change the available glyphs.

Real-world uses

Common Use Cases

🚉
Retro hero headers
Animate a headline or tagline on a landing page with mechanical character cells that flap through letters until they land on the target.
📋
Live status boards
Show departures, scores or queue numbers in a Solari style, with cells stepping through a CHARSET one character at a time.
⏳
Countdown and launch reveals
Build anticipation for a launch or reveal, with staggered timing so the board settles from one side to the other.
🏷️
Brand microsite signatures
Add a memorable board to a microsite, then compare with text particles for a looser, scattered take on kinetic type.
🎓
CSS 3D transform reference
Study how perspective, rotateX and dual transform origins create realistic hinged flaps, with backface-visibility hiding each leaf's reverse.

Got questions?

Frequently Asked Questions

It mimics a real split-flap board, which can only step one leaf forward at a time. The code advances the current index by one per animation and repeats until it reaches the target, so it visibly rolls through intermediate characters.

To trigger a CSS transition you must apply the start state, let the browser commit it, then apply the end state. Two nested rAF calls guarantee the start transform is painted before the transition begins, otherwise the browser batches both writes and skips the animation.

Both halves use overflow hidden. The top aligns the glyph to its bottom edge and the bottom shifts its glyph up with translateY(-50%), so together they show the upper and lower portions of the same full-height character across the seam.

Yes. Add the characters to the CHARSET constant. The cycling logic uses CHARSET.indexOf and modular arithmetic, so it automatically handles any length, though longer sets mean more flips to reach distant characters.

The static top and bottom halves display the resting character. The animated flaps are only shown during a flip to perform the rotation, then hidden again so the cell renders crisply without extra layered elements.

Yes. Click JSX for a React component, Vue for a Vue 3 SFC, Angular for a standalone component, or Tailwind for a utility-class version. In React, drive each character cell from props and trigger the flip animation in useEffect when the target text changes.