Text Flipping Board

A split-flap display component that animates characters with flip transitions, inspired by Vestaboard.

Installation

npx shadcn@latest add @aceternity/text-flipping-board

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.

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