Split-Flap Board
A mechanical departure board that flips through every character to reach the next word.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Each cell rotates through its character drum one card at a time, exactly like a Solari board: a top flap falls, a bottom flap lands, and the cells are staggered left to right.
Installation
$ npx shadcn@latest add https://guetix.com/r/split-flap.json
Uses the shadcn CLI. It creates components/guetix/split-flap.tsx and installs nothing else.
Usage
example.tsx
"use client";
import SplitFlap from "@/components/guetix/split-flap";
export default function SplitFlapDemo({ variant = "animated" }: { variant?: string }) {
return (
<div className="flex flex-col items-center gap-4">
<p className="font-mono text-[10px] uppercase tracking-[0.4em] text-amber-300/80">Departures · Gate 7</p>
<SplitFlap animated={variant !== "regular"} className="text-2xl sm:text-4xl" words={["SHIPPING", "DESIGNING", "DEBUGGING", "DEPLOYED!"]} interval={3600} />
</div>
);
}
Hero headline rotatorStatus / countdownEvent schedulesStats that change
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Four layers per cell (static top/bottom + falling/landing flaps); the halves are clipped with a 200%-tall inner box.
- 02Flaps re-mount per tick via `key`, so the CSS animation restarts without JavaScript animation code.
- 03Characters are walked in drum order, so getting from A to Z takes 25 flips.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["HELLO","WORLD"] | Words to cycle through. |
| value | string | — | Controlled text (disables cycling). |
| length | number | — | Cell count (default: longest word). |
| interval | number | 3200 | ms between words. |
| flipMs | number | 70 | ms per single flip. |
| charset | string | — | The drum's characters, in order. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- A polite live region announces each word; the cells are `aria-hidden`.
- Reduced motion: jumps straight to the word.