Text
Split flap
An airport departures board: each cell flips through its drum letter by letter until it lands on the new text. Great for headlines, prices, scores and status.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { SplitFlap } from '@vizzele/react';
<SplitFlap value={status} length={12} style={{ fontSize: 40 }} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Text to land on. |
length | number | — | Pad or cut to this many cells (keeps the board steady). |
speed | number | 55 | Milliseconds per flip. |
stagger | number | 40 | Delay between cells (ms). |
chars | string | — | The drum each cell flips through, in order. |
uppercase | boolean | true | Boards shout. |
Accessibility
- Screen readers get the final text once; the flapping cells are aria-hidden.
- With reduced motion each cell shows its letter straight away.