Usage
import { BlurReveal } from "@/registry/components/blur-reveal/blur-reveal";
<BlurReveal>Label</BlurReveal>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | ||
className? | string | ||
delay? | number | 0 | Seconds before the first segment starts. |
speedReveal? | number | 1.5 | Higher is a faster cascade across the text. |
speedSegment? | number | 0.5 | Higher is a faster fade for each segment. |
trigger? | boolean | true | Show the text. Set to false to play the exit. |
by? | "char" | "word" | "char" | Reveal letter by letter or word by word. |
onAnimationComplete? | () => void | ||
onAnimationStart? | () => void | ||
as? | keyof JSX.IntrinsicElements | "p" | |
style? | CSSProperties | ||
inView? | boolean | false | Wait until the text scrolls into view. |
once? | boolean | true | With inView, only play the first time. |
letterSpacing? | string | number |
When to use
Headlines that sharpen into place on load.
When not to use
Body text or repeated UI labels.