An airport board: each cell flips through the alphabet until it lands.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/split-flap-textPlayground
Split Flap Textnow boarding
Now boarding
Split Flap Textnow boarding
Gate 12
Split Flap Textgate 12
On time
Split Flap Texton time
Last call
Split Flap Textlast call
Style
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/split-flap-text
Accessibility
- Read as one image labelled with the text.
Motion
- Each cell flips every 70 ms, staggered left to right.
- With reduced motion, the word appears.
Responsive behavior
- Cells shrink to fit a phone.
Performance
- One interval flips the cells every 70 ms, then stops when every cell lands.
- When motion is off, the text is set at once.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import SplitFlapText. Props: text, cells, styleKind, animated.
- Use uppercase letters, digits and spaces. text is cut or padded to cells, 12 by default.
- The demo cycles words with its own interval. Change text to flip the board.
Related
Type WriterComponentTypes words like a person: typos, a selection and a blinking caret.Glitch TextComponentRed and cyan slices tear a word on hover, or when a status changes.Marker TextComponentMarks drawn by hand over copy: highlight, underline, circle, box and strike.Boarding PassComponentA flight pass as an inset card over a stub. The Badge stamps a new status and the field that changed sits in a chip.