Flip Words
Automatically cycles through a set of words, with the container width adapting to the text.
Automatically cycles through a set of words: characters fade in with a blur, the outgoing word drifts up as a whole, and the container width adapts smoothly to the current word. Commonly used to emphasize a swappable keyword inside a heading.
Loading preview…
npx shadcn@latest add https://webberui.com/r/flip-words.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
2600
0.5
0.045
<FlipWords />
Installation
npx shadcn@latest add https://webberui.com/r/flip-words.jsonOr, once registries are configured in components.json, install it as @webberui/flip-words.
Usage
import { FlipWords } from "@/components/ui/flip-words";
<h1 className="text-4xl font-semibold">
Build
<FlipWords words={["fast", "animated", "beautiful"]} />
web interfaces
</h1>Props
| Prop | Type | Default | Description |
|---|---|---|---|
words | string[] | — | The list of words to cycle through |
interval | number | 2600 | How long each word stays (milliseconds) |
duration | number | 0.5 | Base duration of the whole switch animation (seconds) |
stagger | number | 0.045 | Interval between characters entering (seconds) |
className | string | — | forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the first word is rendered as static text and no timer starts
- The current word is announced in full through an
sr-onlycopy, and the split graphemes are hidden from assistive technology (aria-hidden)