Split Flap Display

A premium split-flap display component inspired by vintage airport departure boards and retro mechanical displays. Features realistic flip animations, staggered character reveals, and configurable indicator strips.

Installation

pnpm dlx shadcn@latest add @componentry/split-flap-display

Usage

import { SplitFlapDisplay } from "@/components/ui/split-flap-display"

<SplitFlapDisplay
  text="HELLO WORLD"
  columns={14}
  size="lg"
/>

API Reference

Prop	Type	Default
`text`	`string` Simple text to display in a single row.	—
`rows`	`SplitFlapRow[]` Array of { label, value } objects for a multi-row dashboard board.	—
`columns`	`number` Total number of character cells per row.	`14`
`size`	`"sm" \| "md" \| "lg"` Size variant for the cells.	`"md"`
`accentColor`	`string` Color of the side indicator strips.	`"#22c55e"`
`showIndicators`	`boolean` Whether to show the colored indicator strips on each row.	`true`
`staggerDelay`	`number` Delay in ms between each character starting its flip animation.	`30`
`flipSpeed`	`number` Speed in ms per character flip step.	`35`
`className`	`string` Additional CSS classes for the outer container.	—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X