Container Text Flip
A container that flips through words, animating the width.
Installation
Run the following command
npx shadcn@latest add @aceternity/container-text-flipExamples
Standard
Hero section with animation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
words | string[] | ["better", "modern", "beautiful", "awesome"] | Array of words to cycle through in the animation |
interval | number | 3000 | Time in milliseconds between word transitions |
className | string | - | Additional CSS classes to apply to the container |
textClassName | string | - | Additional CSS classes to apply to the text |
animationDuration | number | 700 | Duration of the transition animation in milliseconds |
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
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
