Split-Flap Display
A mechanical departure-board display. Every character flips through the alphabet to its target.
Overview
A faithful split-flap mechanism in CSS 3D. Each cell has four halves: the static top and bottom, plus a falling flap and a landing flap that animate around a hinge line. A cell steps through its character set one flip at a time until it reaches the target, as a real Solari board does.
Cells start with a small left-to-right delay, so changes roll across a row instead of happening all at once. Lighting changes as each flap turns, which gives the mechanism weight.
Use it for arrival boards, launch countdowns, status pages, scoreboards, or any number that deserves a little ceremony.
When to use
- Headlines, numbers and moments you want people to notice once.
When not to use
- Text that changes constantly or must be read at a glance.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/split-flap.jsonnpx shadcn@latest add https://sundaeui.dev/r/split-flap.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/split-flap.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/split-flap.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy split-flap.tsx and split-flap.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { SplitFlap } from '@/components/sundae/split-flap'
<div style={{ fontSize: 40 }}>
<SplitFlap value={status} length={9} />
</div>Props
| Prop | Type | Default |
|---|---|---|
value*Text to show. It is uppercased, and characters outside the charset become spaces. | string | — |
lengthFixed number of cells, which keeps columns aligned. Defaults to the value length. | number | — |
flipMsDuration of a single flip. | number | 70 |
staggerDelay added per cell, left to right. | number | 35 |
charsetOrdered characters each cell cycles through. | string | FLAP_CHARSET |
aria-labelAccessible text. Defaults to value. | string | — |
Accessibility
- Each display is role="img" with the full text as its label, so screen readers hear the final value instead of the intermediate letters.
- With prefers-reduced-motion, cells jump straight to the target with no flipping.
- If values update often, wrap the board in an aria-live="polite" region only when announcements are useful.
Customization
- Size scales with font-size. Each cell is in em units.
- Recolour with --flap-bg, --flap-bg-2 and --flap-fg. An amber --flap-fg gives the classic warning row.
- Pass charset="0123456789" for a fast numeric counter.
FAQ
- Is Split-Flap Display free?
- Split-Flap Display is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Split-Flap Display?
- Run npx shadcn@latest add https://sundaeui.dev/r/split-flap.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Split-Flap Display support keyboard and screen readers?
- Each display is role="img" with the full text as its label, so screen readers hear the final value instead of the intermediate letters. With prefers-reduced-motion, cells jump straight to the target with no flipping.
- Does Split-Flap Display respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All motion →Decode Text
Motion · Futuristic- Pro
Word Morph
Motion · Expressive - Pro
Magnetic Button
Motion · Playful - Pro
Thinking Shimmer
Motion · Understated - Pro
Billboard Hero
Sections · Brutalist Taffy Tabs
Navigation · Playful