ComponentsNumbers
Split-flap board
An airport board that flips to the next word.
Installation
$ npx shadcn@latest add @textlab/split-flapNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { SplitFlap } from "@/components/textlab/split-flap/split-flap";
<SplitFlap text={destination} length={10} />Variants
darklightminiProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "dark" | "light" | "mini" | "dark" | Classic black board, cream tiles, or compact tiles that take the text color. |
| length | number | – | Pad or trim to this many tiles. Keep it fixed when the text changes. |
| charset | string | " A–Z 0–9 :.-/" | Characters each tile cycles through. Others jump straight in. |
| speed | number | 50 | Milliseconds per half flip. |
| stagger | number | 35 | Milliseconds between neighbouring tiles starting. |
| live | boolean | false | Announce changes politely to screen readers. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Status boards, departures, scoreboards and countdown labels.
- Short uppercase words and codes.
Skip it
- Lowercase prose; the default charset is uppercase.
- Long sentences; each tile flips through the alphabet.
Accessibility and motion
Accessibility
- Screen readers read the text once, not the flipping letters.
- Tiles have a fixed width, so the line never shifts.
Motion
- Each flip is two halves: the top leaf falls with ease-in, the bottom leaf lands with ease-out.
- Tiles start 35 ms apart from left to right.
Reduced motion. Tiles show the final letters at once.
Performance
- CSS keyframes only; no JavaScript animation loop.
- A tile does work only while it is flipping.