Split flap
ProA departure-board display: when the text changes each character flips through the reel to its new letter, left to right.
pnpm dlx shadcn@latest add @caliper/split-flapLIS → AMS · TP 664 · GATE B12
When to use #
Use it for
- Status boards seen from across a room.
- A single headline status, like a build or a gate.
Skip it when
- Body text or values people read closely.
Installation #
pnpm dlx shadcn@latest add @caliper/split-flap
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { SplitFlap } from "@/components/ui/split-flap"
The worked example comes with Pro
The 18-line example behind the preview opens here with a Pro or Team licence.
API reference #
SplitFlap
component
Accessibility #
It exposes img semantics, with aria-label and aria-hidden kept in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion #
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.