TextNew
Split Flap Text
Letters flip like an airport departure board: each tile spins to its letter and drops on a real hinge.
Customize
textColor
edgeColor
Based on Split Flap Text (MIT license) · Terms of use
More in Pro
View allProps
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | Show one text. If unset, the board cycles through words. |
| words | string[] | "[\"NOW BOARDING\", \"GATE 12\", \"ON TIME\", \"LAST CALL\"]" | Lines to cycle through. Letters A–Z, digits and : . - / & ! ? |
| interval | number | 3800 | How long one word stays, in milliseconds. |
| length | number | — | Number of tiles. Defaults to the longest word. |
| tileClassName | string | — | Classes for each tile, to recolor the board. |
| className | string | — | Classes for the wrapper. |
| textColor | string | "#fafafa" | Colour of the letters on the board. |
| edgeColor | string | "rgba(255,255,255,0.1)" | Colour of the thin edge round each tile. |
Dependencies
2 required packages
npm install clsx tailwind-merge