Split Flap
A split-flap departure board — each character is a mechanical flap module that clatters forward through the alphabet until it lands on its target.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/split-flap.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/split-flap.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text to display — flips character by character like a departure board. |
| length | number | — | Fixed cell count; text is padded/truncated so the board never resizes. |
| charset | string | " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-'&" | Characters each cell cycles through, in order. |
| stepMs | number | 48 | Duration of one flap in ms. |
| size | number | 44 | Cell height in px. |
| trigger | "scroll" | "mount" | "scroll" | Start when scrolled into view, or immediately on mount. |
| className | string | — | Additional CSS classes. |