Split-Flap

Every character flaps through the alphabet to its new value. For arrival boards, countdowns, live statuses, scoreboards and launch pages.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add split-flap

Example

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

<SplitFlap text="Boarding" length={10} />

Installs to components/galactrex/split-flap.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`text`	`string`	—	The text to show; shown in capitals.
`length`	`number`	—	Pad or cut to this many cells so the board keeps its width.
`charset`	`string`	—	The order the flaps run through.
`flapMs`	`number`	`70`	Ms per flap.
`className`	`string`	—	Extra classes for the outer element.

The final text is read once from a visually hidden copy; the flaps are aria-hidden.