Blur Text
Free
Words that sharpen out of a blur, one after another, when the text scrolls into view.
Every frame earns its place
Customize
0.08s
Direction
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/blur-text.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/blur-text.tsx.
Usage
import { BlurText } from "@/components/ui/blur-text";
<h1 className="text-6xl font-black">
<BlurText text="Every frame earns its place" stagger={0.08} />
</h1>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to reveal, split into words. |
| delay | number | 0 | Seconds before the first word starts. |
| stagger | number | 0.08 | Seconds between one word and the next. |
| direction | "up" | "down" | "up" | Whether words rise into place or drop in. |
| once | boolean | true | Play only the first time the text enters the viewport. |
| className | string | — | Extra classes for the text. |
Dependencies: motion