ComponentsReveal
Blur reveal
Words sharpen into focus.
Installation
$ npx shadcn@latest add @textlab/blur-revealNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { BlurReveal } from "@/components/textlab/blur-reveal/blur-reveal";
<BlurReveal as="h2" text="Make every word count" />Variants
wordcharlineProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "word" | "char" | "line" | "word" | What sharpens on its own: each word, each letter or each measured line. |
| blur | number | 12 | Starting blur in px. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| stagger | number | 0.06 (word), 0.02 (char), 0.1 (line) | Seconds between parts. |
| duration | number | 0.8 | Seconds each part takes. |
| ease | EaseName | [number, number, number, number] | "enter" | Easing token or cubic bezier. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
| onComplete | () => void | – | Called when a one-shot animation finishes. |
When to use it
Reach for it
- Hero and section titles that should feel calm and deliberate.
- Short lines of copy, up to two sentences.
Skip it
- Body paragraphs. Use scroll-fill for long copy that follows the reader.
- Labels that change often. Use text-morph.
Accessibility and motion
Accessibility
- The full text is in a visually hidden span; the animated parts are aria-hidden.
- Keeps the heading tag you pass with as.
Motion
- Triggers when 45% of the element is visible.
- Opacity leads, blur clears next, the rise settles last.
Reduced motion. Shows the text immediately with no blur or movement.
Performance
- Animates opacity, filter and transform only.
- Blur is the costliest part; keep char variant under ~80 letters.