Browse components
Blur Text
Words or letters drift in from above or below, sharpening out of a heavy blur as they scroll into view.
Installation
npx shadcn@latest add @glint-ui/blur-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/blur-text.json
Usage
import { BlurText } from "@/components/ui/blur-text";
<BlurText text="Isn't this so cool?!" animateBy="words" direction="top" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Isn't this so cool?!" | Text to animate. |
| animateBy | "words" | "letters" | "words" | Animate each word or each letter. |
| direction | "top" | "bottom" | "top" | Where pieces come from. |
| delay | number | 90 | Delay between pieces, in ms. |
| duration | number | 900 | Duration of each piece, in ms. |
| once | boolean | true | Animate only the first time; off replays on every re-entry. |
| as | "p" | "h1" | "h2" | "h3" | "span" | "div" | "p" | Element to render. |
| className | string | — | Extra classes for the root element. |