Split Flap

Text Animations

A Solari-board split-flap text display: mono ink cells riffle through a character set with a 3D half-flap (CSS perspective + rotateX) and settle left-to-right, animating whenever the text prop changes. Under prefers-reduced-motion it renders the final text instantly with no flips.

Inspired by Componentry — Split Flap Display (and Solari boards) — independently built, not affiliated. Attribution policy

PARABLE

DEPARTURES

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/split-flap.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/split-flap.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div style={{ display: "flex", flexDirection: "column", gap: "1.1rem", alignItems: "center", justifyContent: "center", padding: "2rem 1.5rem", background: "#0b0b0d", borderRadius: "1rem", width: "100%" }}>
    <SplitFlap text="PARABLE" style={{ fontSize: "2.4rem" }} />
    <SplitFlap text="DEPARTURES" loop={2600} textColor="#f5a623" style={{ fontSize: "1.15rem" }} />
  </div>

Props

SplitFlapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
text*	string	—	The string to display. On change, the board animates to the new value.
charSet	string	DEFAULT_CHARSET	Ordered character set the flaps cycle through. Order defines the flip path. Defaults to space + A–Z + 0–9 + basic punctuation.
speed	number	55	Milliseconds per single flap (one character advance).
loop	false \| number	false	`false` to run once; a number = ms to pause after settling, then re-run.
stagger	number	70	Extra ms of start delay between adjacent cells (left-to-right settle).
cellClassName	string	—	Class applied to each flap cell.
cellColor	string	"#0f0f10"	Cell (flap) background. Defaults to Parable ink `--pb-ink`.
textColor	string	"#f5f5f4"	Glyph colour. Defaults to a warm near-white.