Split-Flap Display

An authentic, physics-driven Split-Flap Display component (Solari board) simulating retro-mechanical flap cards, 3D perspective flips (rotateX), horizontal split creases, mechanical hinge notches, and realistic synthesized click sounds.

Ships with 2 distinct handcrafted variants: vintage ivory electro-mechanical casing (matching retro Solari displays) and minimalist architectural frosted glass.

Variants

Split-Flap — Ivory (Classic Mechanical)

The iconic embossed cream electro-mechanical display with rust-coral slab-serif typography and tactile 3D perspective flap folds.

Setvariant"ivory": renders an embossed molded bezel casing with warm off-white flap cards and rust-orange typography.
soundtrue | false: synthesizes realistic physical plastic flap clicks via Web Audio API without needing external audio files.

Active Color

Split-Flap — Minimalist Architectural

Ultra-clean frosted glass chassis with backdrop blur and slate-stone monospace typography that blends with light or dark mode.

Setvariant"minimalist": creates an architectural frosted glass frame with clean backdrop blur.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Split-Flap Display

npx shadcn@latest add @algorize-ui/split-flap

components/custom/split-flap.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Split-Flap Display to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Props Reference

SplitFlap

Prop	Type	Default	Description
`variant`	`"ivory" \| "minimalist"`	`"ivory"`	Selects between 2 handcrafted visual themes: retro ivory (default) or minimalist architectural frosted glass.
`messages`	`string[]`	`[]`	Array of text strings to cycle through with cascading flip transitions.
`text`	`string`	`undefined`	Direct string to display. Can also contain pipe-separated strings (e.g. `"HELLO \| WORLD"`) to cycle through automatically.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Dimension preset for the flap cards.
`columns`	`number`	`auto`	Total flap character slots. If omitted, automatically fits the longest message.
`autoPlay`	`boolean`	`true`	Whether to automatically cycle through messages at the specified interval.
`interval`	`number`	`3000`	Duration in milliseconds the message stays fully visible and stationary before flipping to the next message.
`sound`	`boolean`	`false`	Whether to play realistic mechanical split-flap click sounds via Web Audio API. Can also be toggled interactively in the toolbar.
`color`	`string`	`theme default`	Text accent color applied to characters and numbers. Supports preset theme names (`"lavender"`, `"indigo"`, `"rose"`, `"emerald"`), custom hex codes, or `"default"` to reset to variant default.
`speed`	`number`	`1`	Speed multiplier for the flip cascade animation (1 = normal, 1.5 = fast).