Airport departure board: every character flips through a set of glyphs until it lands on the target. Changing the text re-runs it.
npx shadcn@latest add https://hyperblur.dev/r/split-flap-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/split-flap-text.tsx.
import { SplitFlapText } from "@/components/hyperblur/split-flap-text"
<SplitFlapText text="GATE B12" padTo={10} className="text-5xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to display. Changing it flips each tile to the new character. |
| chars | string | " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" | Characters each tile cycles through, in order. Characters outside the set land after a short run of flips. |
| speed | number | 60 | Milliseconds per flip. |
| stagger | number | 40 | Milliseconds of delay added per column. |
| padTo | number | 0 | Pad with spaces to this many tiles. 0 means no padding. |