Split Flap Text
NewPro
A departure-board line where every cell flips through the alphabet to reach its next letter.
Departures
Now boarding. Level 2 ready. Press startCustomize
40ms
80ms
#ffc24a
Installation
Split Flap Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy split-flap-text.tsx into components/ui and run npm install motion.
Usage
import { SplitFlapText } from "@/components/ui/split-flap-text";
<SplitFlapText
messages={["Now boarding", "Level 2 ready"]}
align="center"
className="font-mono text-4xl font-bold"
/>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| messages | string[] | — | Messages shown one after another. |
| interval | number | 5000 | Milliseconds each message stays, counted from when it starts flipping. |
| charset | string | " A–Z 0–9 :.-!?" | Characters each cell flips through, in order. Others are shown directly. |
| length | number | — | Number of cells. Defaults to the longest message. |
| align | "left" | "center" | "left" | Where shorter messages sit on the board. |
| flipDuration | number | 80 | Milliseconds for one flap to turn. |
| stagger | number | 40 | Milliseconds between one cell starting and the next. |
| cellColor | string | "#171412" | Background of each cell. |
| textColor | string | "#ffc24a" | Color of the characters. |
| className | string | — | Extra classes for the board, such as font and size. |
Dependencies: motion