Flip Text splits a string into characters and animates two stacked layers on hover: the top layer rolls up and out, while a duplicate flips in from below with a staggered delay per letter. The effect is pure CSS and Framer Motion, so it stays smooth at headline sizes. Built with React and Tailwind CSS. Use it on navigation labels, hoverable links, or hero headings where the roll-up reveals a translated or alternate phrase.
Installation
Usage
import { FlipText } from "@/components/ui/flip-text";<FlipText href="#" text="Twitter" className="text-6xl font-black uppercase" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | String whose characters flip on hover. |
duration | number | 0.25 | Per-character animation duration, seconds. |
stagger | number | 0.025 | Delay between each character, seconds. |
className | string? | — | Classes on the wrapper (sizing, font, case). |
overlayClassName | string? | — | Classes on the duplicate hover layer. |
href | string? | — | Render an anchor instead of a span. |
transition | Transition? | { ease: "easeInOut" } | Extra transition merged into each character animation. |