127 Components
Split Flap Text
TextMechanical departure-board split-flap display that cycles character tiles with staggered 3D rotateX spring hinges.
KINETIC
Click board to cycle mechanical split-flap
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/split-flap-text.json"
Props
TypeScript props supported by <SplitFlapText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["KINETIC", "PHYSICS", "SPRINGS", "MINIMAL"] | Array of words cycled on each split-flap board trigger. |
| stiffness | number | 380 | Hooke's Law spring stiffness for 3D tile hinge rotation. |
| damping | number | 24 | Spring damping coefficient controlling tile settle bounce. |
Key Features
- Individual character housing cells with a center mechanical split seam and 3D rotateX perspective flips.
- Staggered per-tile wave delay creating an authentic Solari departure board cascade.
- Click or press Enter/Space to cycle through an array of preset words.
Keyboard & Accessibility
- Announces the active word via an sr-only role='status' live region while marking individual character cells aria-hidden='true'.
- Board wrapper is a semantic button operable via Enter and Space keys.
- Disables 3D rotateX flips when prefers-reduced-motion is active.