A premium split-flap display component inspired by vintage airport departure boards and retro mechanical displays. Features realistic flip animations, staggered character reveals, and configurable indicator strips.
| Prop | Type | Default |
|---|---|---|
textSimple text to display in a single row. | string | — |
rowsArray of { label, value } objects for a multi-row dashboard board. | SplitFlapRow[] | — |
columnsTotal number of character cells per row. | number | 14 |
sizeSize variant for the cells. | "sm" | "md" | "lg" | "md" |
accentColorColor of the side indicator strips. | string | "#22c55e" |
showIndicatorsWhether to show the colored indicator strips on each row. | boolean | true |
staggerDelayDelay in ms between each character starting its flip animation. | number | 30 |
flipSpeedSpeed in ms per character flip step. | number | 35 |
classNameAdditional CSS classes for the outer container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { SplitFlapDisplay } from "@/components/ui/split-flap-display"
<SplitFlapDisplay
text="HELLO WORLD"
columns={14}
size="lg"
/>