The SplitFlap component turns text into a mechanical departure board, each column riffling through the alphabet until it reaches its letter, a beat behind the column to its left.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/split-flap.jsonEverything Split Flap accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | No default | The word or phrase to land on. Change it and it re-flaps |
| charset | string | " A–Z 0–9 .,:'!?-" | Characters the flaps cycle through, in order |
| interval | number | 55 | Milliseconds each flap is held before turning to the next character |
| stagger | number | 70 | Milliseconds each column waits behind the one to its left |
| className | string | '' | Additional CSS classes. Set the font size here; the flaps scale with it |
Every column flips until it finds its letter.