Split-Flap Board
Mechanical departure board: only the changed characters flip. Free, MIT · Animated components › Stickers, tickets and boards
A mechanical split-flap board: when the value changes, only the cells whose character changed flip, the top half folding down over the next character, one cell after another. A value that arrives mid-flip takes over at once, so fast updates end on the latest value without a queue. Assistive technology reads the whole value as one string; the halves are decorative.
Installation
npx valyro-cli@latest add split-flap-boardnpx shadcn@latest add https://valyro.xyz/r/split-flap-board.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { SplitFlapBoard } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
value * | string | The text to show. The app computes it (a countdown, a status); the board only displays it. | |
columns | number | Fixed number of cells per row, for a stable width. Default: as many as the value has characters. | |
align | 'start' | 'center' | 'end' | 'start' | Position of the value inside the fixed grid. Default start. |
overflow | 'wrap' | 'truncate' | 'wrap' | With columns: longer text wraps by words onto more rows (wrap, default) or is cut (truncate). |
duration | number | 320 | Tempo of one flip, ms: the fall takes about 40% of it, the landing settles in the rest. Default 320. |
stagger | number | 30 | Delay between consecutive changed cells, ms. Default 30. |
announce | 'off' | 'polite' | 'off' | polite reads every new value aloud; off (default) leaves it to be read on demand. |
label | string | Name of the reading, shown above the board, such as "Doors open in". | |
variant | 'dense' | 'sign' | 'minimal' | 'dense' | Look: dense (default) dark tiles, sign large tiles of a station sign, minimal flat tiles without frames. |
onSettled | (value: string) => void | Called once the latest value is fully on the board (after its flips, or at once without motion). | |
labels | Partial<SplitFlapBoardLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Peel Sticker — A sticker you peel back by its corner to reveal what is under it
- Scratch Reveal — Scratch off a cover to reveal text or a picture
- Tear-off Ticket — A ticket whose stub tears off along the perforation
- Swipe Action Card — Swipe a card sideways to reveal its actions
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
Previous: Tear-off Ticket · Next: Swipe Action Card · All Animated components