What is Split-flap display?

A split-flap display is an electromechanical sign where each character position holds a drum of printed flaps. Each flap carries the top half of one character on its front and the bottom half of the next on its back. When the drum turns, flaps fall one after another until the target character shows, with the familiar clatter of airport and train station departure boards, often called Solari boards after the Italian maker. On the web the effect is recreated with CSS 3D transforms for clocks, counters, launch countdowns and landing page headlines.

How it works in CSS

Each cell is split into a top half and a bottom half. To change a character, the top half of the current one falls forward around a horizontal hinge, then the bottom half of the next one swings down into place. perspective on the cell gives depth, transform-origin sets the hinge, and backface-visibility: hidden hides each flap once it turns past 90 degrees:

.cell { position: relative; perspective: 300px; }
.flap-top {
  transform-origin: bottom;
  backface-visibility: hidden;
  animation: fall 70ms ease-in forwards;
}
.flap-bottom {
  transform-origin: top;
  backface-visibility: hidden;
  animation: land 70ms ease-out 70ms both;
}
@keyframes fall { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes land { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

• Cycle through a fixed character set. A real drum only turns one way, so the cell steps forward through the set until it reaches the target. Order the set so common transitions, like digits on a clock, take one flip.
• Stagger the columns. Start each cell a few milliseconds after its neighbor to get the rippling cascade.
• Use a monospaced, tabular font so every cell has the same width and nothing shifts between characters.
• Animate only transforms. They run on the compositor and stay smooth with dozens of cells.

Accessibility

A split-flap board draws each character as several layered elements, and every intermediate character is noise to a screen reader. Mark the animated cells aria-hidden and expose the final value once, as visually hidden text or an aria-label on the container. If the value changes while the user is on the page, as in a live counter, announce only the settled value through a polite live region, never each flip. Under prefers-reduced-motion, skip the flaps and render the final characters directly.

Where it fits

Use it for a small amount of text that changes rarely and deserves attention: a launch countdown, a hero stat, a status board. Long paragraphs or rapidly changing data become unreadable. For a full walkthrough of MiniDev's SplitFlap component, including character cycling, the two-half flap layers, column stagger and screen reader handling, read the React split-flap display guide. Related animated number components, including the premium FlipStatBoard and the free NumberRoll, are in the animation category. Small, purposeful motion like this is a kind of micro-interaction.