Flip words
One word in a sentence flips to the next on a loop, letter by letter in 3D, while the sentence reflows smoothly around it.
Text, timeline, looping, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/flip-words.tsx https://motion-brew.com/r/flip-words.tsxOne self contained file for React and Tailwind CSS: flip-words.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { FlipWords } from "@/components/flip-words";
export default function Page() {
return (
<FlipWords before="Build" words={["playful", "precise", "fearless"]} after="interfaces" className="text-4xl font-semibold" />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| before | string | "Build" | Text before the changing word |
| words | string[] | ["playful", "precise", "fearless"] | Words to cycle through |
| after | string | "interfaces" | Text after the changing word |
| interval | number | 2400 | Milliseconds each word stays |
| wordClassName | string | violet | Classes for the changing word |
| className | string | Font, size and color |
More text
- Gradient text: A slow gradient flows through the letters on a seamless loop, clipped to real, selectable text.
- Highlight text: A marker sweeps behind key phrases one after another as the paragraph scrolls into view.
- Rotating text: Text set on a circle spins around an arrow badge.
- Shimmer text: The thinking sheen: a bright band sweeps across muted text on a loop, for AI and loading states.