Blur Reveal Text
A progressive word, character, or line-by-line blur reveal animation with customizable motion vectors and viewport triggers.
4.3 KB
•Updated on September 14, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-blur-reveal-textUsage
Code
import { BlurRevealText } from '@/components/spaceui/blur-reveal-text'
export default function HeroStatement() {
return (
<BlurRevealText
text="Great design is not just what looks good. It is how every detail feels alive."
splitBy="words"
stagger={0.05}
blurAmount="12px"
direction="up"
className="text-3xl font-semibold tracking-tight"
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | The sentence or paragraph to animate. |
splitBy | words|characters|lines | words | Splitting strategy for the animation tokens. |
stagger | number | 0.05 | Delay in seconds between consecutive tokens. |
delay | number | 0.1 | Initial delay in seconds before animation begins. |
blurAmount | string | 12px | Starting CSS blur radius for obscured tokens. |
duration | number | 0.35 | Duration of the transition for each individual token. |
direction | up|down|none | up | Direction along the vertical axis from which tokens slide. |
yOffset | number | 8 | Travel distance in pixels for the slide transition. |
inView | boolean | true | When true, animation triggers only once the element scrolls into view. |
once | boolean | true | Whether viewport triggering fires only on first view. |
replayKey | string|number | - | Change this value to programmatically re-trigger the animation. |
renderSegment | (segment: string) => ReactNode | - | Overrides how each segment renders — e.g. through Textmoji so emoji stay styled. |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
Related Components
Flip TextTypography
Per-character 3D dual-face flip animation with a sine-eased stagger wave across the text.
ViewGooey Text RevealTypography
Line-by-line blur reveal with a gooey SVG edge filter, driven by GSAP SplitText — plays immediately, on scroll, or scrubbed to scroll position.
ViewMorphing TextTypography
Dynamic character-level FLIP morphing animation between words or phrases with accessible screen-reader support.
ViewOn This Page
Powered by