Blur text
Words rise out of a soft blur one after another as the line scrolls into view, then settle sharp.
Text, in view, once, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/blur-text.tsx https://motion-brew.com/r/blur-text.tsxOne self contained file for React and Tailwind CSS: blur-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { BlurText } from "@/components/blur-text";
export default function Page() {
return (
<BlurText as="h1" text="Every word drifts out of the blur and settles into sharp focus" className="text-5xl font-semibold tracking-tight" />
);
}Props
| Prop | Type | Default | Description | ||||
|---|---|---|---|---|---|---|---|
| text | string | "Every word drifts out of the blur and settles into sharp focus" | The text to reveal | ||||
| as | "h1" \ | "h2" \ | "h3" \ | "p" \ | "span" | "p" | Element to render |
| by | "word" \ | "letter" | "word" | Animate each word or each letter | |||
| stagger | number | 0.08 | Seconds between pieces | ||||
| duration | number | 0.7 | Seconds each piece takes | ||||
| blur | number | 12 | Starting blur, px | ||||
| direction | "up" \ | "down" | "up" | Pieces rise or drop into place | |||
| delay | number | 0 | Seconds to wait before starting | ||||
| trigger | "inView" \ | "mount" | "inView" | Start in view or right away | |||
| className | string | Font, size and color |
More text
- 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.
- 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.