Flip Board Text React component
A split-flap departure board: each cell clatters through the alphabet to its letter, one after another, whenever the message changes.
About the Flip Board Text component
Flip Board Text brings back the station departure board. Each cell clatters through the alphabet until it lands on its letter, and the delay across the row sends every new message through in a wave.
Cells take their colour from the surrounding text, and the width is set by the longest message, so the board never changes size.
When to use it
Use it for arrivals and countdowns, event schedules and status lines, or any short message that benefits from a little ceremony.
Keep messages short and in capitals. Each cell has to travel through the alphabet.
Installation
Add the Flip Board Text component to your project with the shadcn CLI. It lands in components/flip-board-text.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/flip-board-textProps
<FlipBoardText /> accepts 3 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| messages Messages shown in turn. Use capitals, digits and : - . | string[] | MESSAGES |
| interval Milliseconds between messages. | number | 3000 |
| step Milliseconds per flap. | number | 34 |
- messages
Messages shown in turn. Use capitals, digits and : - .
string[]Default: MESSAGES - interval
Milliseconds between messages.
numberDefault: 3000 - step
Milliseconds per flap.
numberDefault: 34
Flip Board Text FAQ
- Which characters work?
- Capitals, digits and the marks : - . Lowercase is converted, and anything else shows as a blank cell.
- How fast does it flip?
- step sets the milliseconds per flap. interval sets the time between messages.
- Does the board change size?
- No. It is as wide as the longest message, and shorter ones are centred.
- What about reduced motion?
- Cells change straight to their letter, and the message stays on the first one.
