Split flapPro

Solari board flips for status words and changing stats. Only the characters that change flip.

Markdown

On this page

ProA job board where only changed characters flip.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/split-flap

Usage

tsx

import { SplitFlap } from "@/components/ui/chatcn/pro/split-flap"

<SplitFlap value={job.status} length={8} />

Give a fixed length to a value that changes, so the board keeps its width. A change flips straight to the new character: it marks a state change and never counts up through the alphabet.

Examples

States

ProA large stat, sizes, a card surface, instant swaps, cut values and empty.

Props

Prop	Type	Notes
`value`	`string \| number`	Only characters that differ from the last value flip
`length`	`number`	Number of cards. Pads with blank cards or cuts
`align`	`"start" \| "end"`	Default `start`, `end` for numbers
`size`	`"sm" \| "md" \| "lg" \| "xl"`	Cards scale with the font size
`stagger`	`number`	Delay between changing cards. Default 30 ms, spread capped at 120 ms
`animate`	`boolean`	Turn the flip off
`live`	`boolean`	Announce each new value politely

Keyboard

Not interactive.

Accessibility

The value is real text in a visually hidden span; the cards are aria-hidden. With live, screen readers hear the new value once the board changes.
The board always reads left to right, like a real one, also inside right to left pages.
Status words carry the meaning; color on a card (red for FAILED) is only a second cue.

Motion

Each flip is two halves: the old top falls to edge on in 120 ms, then the new bottom lands in 160 ms with the kit's ease out. Each half darkens as it turns, which reads as a hinge without a shadow.
Changing cards flip left to right 30 ms apart; however many change, the spread stays within 120 ms.
The hinge is a real gap, so the surface behind shows through on any background.
Under reduced motion characters swap instantly.