## Split-Flap Display (S—005)

A mechanical departure-board display. Every character flips through the alphabet to its target.

- URL: https://sundaeui.dev/components/split-flap
- Category: Animations & interactions · Art direction: Brutalist
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/split-flap.json`
- Tags: retro, 3d, animated, text, react, split-flap

A faithful split-flap mechanism in CSS 3D. Each cell has four halves: the static top and bottom, plus a falling flap and a landing flap that animate around a hinge line. A cell steps through its character set one flip at a time until it reaches the target, as a real Solari board does.
Cells start with a small left-to-right delay, so changes roll across a row instead of happening all at once. Lighting changes as each flap turns, which gives the mechanism weight.
Use it for arrival boards, launch countdowns, status pages, scoreboards, or any number that deserves a little ceremony.

### Usage

```tsx
import { SplitFlap } from '@/components/sundae/split-flap'

<div style={{ fontSize: 40 }}>
  <SplitFlap value={status} length={9} />
</div>
```

### Props

- `value` (`string`, required): Text to show. It is uppercased, and characters outside the charset become spaces.
- `length` (`number`): Fixed number of cells, which keeps columns aligned. Defaults to the value length.
- `flipMs` (`number`, default `70`): Duration of a single flip.
- `stagger` (`number`, default `35`): Delay added per cell, left to right.
- `charset` (`string`, default `FLAP_CHARSET`): Ordered characters each cell cycles through.
- `aria-label` (`string`): Accessible text. Defaults to value.

### Accessibility

- Each display is role="img" with the full text as its label, so screen readers hear the final value instead of the intermediate letters.
- With prefers-reduced-motion, cells jump straight to the target with no flipping.
- If values update often, wrap the board in an aria-live="polite" region only when announcements are useful.