Text Flipping Board
A split-flap display component that animates characters with flip transitions, inspired by Vestaboard.
Installation
Run the following command
npx shadcn@latest add @aceternity/text-flipping-boardProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Text to display on the board. Supports \n for explicit line breaks. Auto-wraps words to fit. |
| rows | string[] | - | Array of raw row strings for manual control. Supports color codes like {O} for orange tiles. |
| duration | number | ~1.2 | Total animation duration in seconds. All internal timings scale proportionally. |
| sound | boolean | false | Enable a synthesized mechanical flap sound on each character flip. |
| className | string | - | Additional CSS classes for the outer board container. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
