# Motion Text Split Flap

Departure board style flip display for flight or train status.

- id: `motion-text-split-flap`
- Page: https://agentic-ui-kit.com/components/motion-text-split-flap
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-split-flap?piece=motion-text-split-flap

## Install

```bash
agentic-ui add motion-text-split-flap
npx shadcn@4.17.0 add @agentic-ui/motion-text-split-flap
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** split-flap-board, departure-board-flip, per-character-cards, forward-through-charset, capped-flips, staggered-cells, value-change-reflip, replay-trigger, in-view-trigger, custom-charset, accessible-text-once, reduced-motion-fallback
- **Intents:** track-status, monitor-live
- **Suits domains:** aviation, logistics, marketing, saas, operations, travel
- **Interaction:** scroll-trigger
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** departure board style flip display for flight or train status, split flap text that flips through letters to show a new status, airport style flipping board for a countdown or live status line, retro flip clock style text counter on a landing page
- **Avoid when:** Numbers that change several times a second (use motion-counter-ticker or motion-number-morph), Long sentences, since every character is a card, Values the user must read the instant they change without any animation delay, Protected enterprise personalities, where the text group is not allowed
- **Preserve when adapting:** value-in-dom-once, aria-hidden-cells, board-size-locked, final-text-without-motion, flip-cap
- **Replace when adapting:** value, length, charset, flip-duration, stagger, trigger, size, cell-colours
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion