Split-Flap Display Board for React (Vestaboard Style)

Vestaboard-style mechanical split-flap character switching, flipping cell by cell into place, with rotation across multiple messages.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/split-flap-board.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Board texttext

Flip card height (px)size

Single flip duration (ms)flipDuration

Flip delay per column (ms)stagger

Flip card backgroundbackground

Character colorcolor

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<SplitFlapBoard/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/split-flap-board.en.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 an aria-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

Split Flap Board