Split Flap Board
Vestaboard-style mechanical split-flap character switching, flipping cell by cell into place, with rotation across multiple messages.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
The mechanical split-flap effect of an airport or railway station board. Each cell flips forward one step at a time along the character set from its current glyph, and the differing flip counts make the cells settle at staggered moments, producing the classic mechanical reveal ripple.
npx shadcn@latest add "https://webberui.com/r/split-flap-board.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<SplitFlapBoard />
Installation
npx shadcn@latest add "https://webberui.com/r/split-flap-board.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/split-flap-board.
Usage
import { SplitFlapBoard } from "@/components/ui/split-flap-board";
<SplitFlapBoard text="ON TIME" />Multiple messages rotate automatically according to interval:
<SplitFlapBoard
messages={["DEPARTURES", "NOW BOARDING", "GATE A12"]}
interval={2600}
cols={12}
/>Use \n to break lines and lay out a multi-row board, and background and color to change the palette.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "" | The text to display, with \n supported for line breaks; ignored when messages is provided |
messages | string[] | — | Multiple messages rotated through in order |
interval | number | 2800 | Rotation interval (milliseconds); only takes effect when messages has more than one entry |
cols | number | longest line | Fixed column count; when omitted, the longest line across all messages is used |
align | "left" | "center" | "center" | How each line is aligned within the columns |
flipDuration | number | 70 | Duration of a single flip (milliseconds); smaller flips faster |
stagger | number | 45 | Additional start delay per column to the right (milliseconds) |
size | number | 46 | Height of a single cell (pixels); width and font size are derived from it |
charset | string | letters, digits, symbols | The character set that can be flipped to; the first cell must be a space |
background | string | "#161616" | Flap background color |
color | string | "#f5f5f4" | Character color |
Accessibility
- When the user has "reduce motion" enabled at the system level, the flip animation is turned off and the final characters are shown directly
- The board carries
role="img"and anaria-label(the complete message text), and individual flap cells are hidden from assistive technology (aria-hidden) - The ripple is driven by pseudo-random start delays derived from the cell coordinates, avoiding SSR and client hydration mismatches