Split-flap Pro

A departures board. Each cell steps forward through its drum one flap at a time. The old top half falls toward you, the new bottom half lands, and the last flap slaps down and settles. Screen readers get the value as plain text.

Pro previewPro previewPro preview

Installation

Terminalbash

npx @neelshha/ui@latest login
npx @neelshha/ui@latest add split-flap

Usage

page.tsxtsx

import { SplitFlap } from "@/components/ui/split-flap";

<SplitFlap value="BOARDING" length={10} />

Change the value

Every cell flips to its new character. Cells start a beat apart, so the board ripples from the left.

Pro preview

Message

page.tsxtsx

const [text, setText] = useState("HELLO");

<SplitFlap value={text} length={10} />

Sizes

The board is sized in em. Set font-size and the cells, the hinge, and the axle pins follow.

Pro previewPro previewPro preview

page.tsxtsx

<SplitFlap value="GATE" style={{ fontSize: "1rem" }} />
<SplitFlap value="GATE" style={{ fontSize: "1.5rem" }} />
<SplitFlap value="GATE" style={{ fontSize: "2.25rem" }} />

Source

API

Other props go to the outer span. With reduced motion, the board shows a new value at once.

Prop	Type	Default	Description
`value`	`string`		What the board spells. Lowercase flips to capitals when the drum has none.
`length`	`number`		Cells on the board. The value pads with blanks or is cut to fit. Defaults to the value's length.
`align`	`"start" \| "end"`	`"start"`	Which side a short value hugs.
`flaps`	`string`	`FLAPS`	The drum: a blank, A–Z, 0–9, and punctuation. A character missing from it flips straight in.
`speed`	`number`	`60`	Milliseconds per flap. The last one slaps down on the bounce spring.
`stagger`	`number`	`24`	Milliseconds between neighbouring cells starting, so the board ripples.