Blur Reveal Text
A free blur reveal text animation built on GSAP SplitText.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Blur Reveal Text is a free text effect component for Next.js and React that splits a headline into words with GSAP SplitText, then sharpens each word from a soft blur into crisp, fully opaque type in a smooth stagger. It is styled with Tailwind and plays once when the wrapper scrolls into view.
The reveal animates filter and opacity only, so layout never shifts, and SplitText's automatic aria handling keeps the headline as one coherent string for screen readers. With prefers-reduced-motion enabled, or with JavaScript unavailable, the text renders sharp and fully visible immediately with no splitting and no blur.
Template Empire
Words that sharpen into perfect focus
Each word resolves from a soft blur into crisp type in a quick cascade. Replay it, or enable reduced motion and the sharp headline is simply here.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-blur-revealUsage
import { TextBlurReveal } from "@/components/text-blur-reveal";
export function Example() {
return (
<TextBlurReveal as="h1" stagger={0.05} className="text-5xl font-semibold">
Ship landing pages that feel designed
</TextBlurReveal>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | The text to reveal. |
| as | ElementType | "h2" | Wrapper element, e.g. "h2", "p". |
| stagger | number | 0.05 | Seconds between word starts. |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Blur Reveal Text deliberately ships without component-level CSS variables. Its duration and ease follow the library-wide motion tokens (--dur-3 and --ease-out-expo, applied through the shared GSAP defaults in lib/gsap.ts), so it always matches the rest of your motion system. Pace the cascade with the stagger prop:
<TextBlurReveal stagger={0.1}>
A slower, more deliberate focus pull
</TextBlurReveal>Frequently asked questions
- Is Blur Reveal Text free for commercial use?
- Yes. Blur Reveal Text is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Blur Reveal Text accessible and reduced motion safe?
- Yes. SplitText 3.13 applies aria automatically: the wrapper carries a label with the full text and the split word elements are hidden from assistive technology, so screen readers announce one coherent string. When reduced motion is enabled the text is never split or blurred at all and renders immediately in its final, crisp state. The animation touches filter and opacity only, so it never shifts layout.
- How do I change the speed of the reveal?
- Use the stagger prop to set the delay between word starts in seconds; the default is 0.05. The duration and easing of each word come from the shared motion tokens, so they stay consistent with every other component in the library.