The FlipWords component cycles one slot in a sentence through a list of words, blurring each out as the next rises into its place and animating the width difference so the rest of the line never jumps.
Built for designers
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/flip-words.jsonEverything Flip Words accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| words (required) | string[] | No default | The words to cycle through, in order |
| interval | number | 2 | Seconds each word is held before the next one arrives |
| duration | number | 0.5 | Seconds the swap itself takes |
| className | string | '' | Additional CSS classes applied to the rotating slot |
Required.