Flip Words
Text component that cycles through a list of words with a flip animation.
Preview
Flip Words
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Headlines with rotating value propositions.
Why this component matters
Communicates multiple value props in the space of one line, keeping the layout clean while expanding the message.
Usage guidance
Use with 3-5 words that share similar character count for smooth transitions. Rotate every 3-4 seconds. Place the flipping word in a grammatically flexible position.
Installation
bash
npx shadcn@latest add @aceternity/flip-wordsUsage
example.tsxtsx
import { FlipWords } from "@/components/ui/flip-words";
export default function Example() {
return (
<FlipWords>
{/* Your content here */}
</FlipWords>
);
}Source
flip-words.tsx
components/ui/flip-words.tsx