Blur Reveal Text
A free blur reveal text effect: words sharpen from a soft blur.
Marlowe Eyewear
Your prescription, cut in our own lab
Send us the prescription, pick a frame, and single-vision lenses ship in five working days. Varifocals take eight. If the fit is wrong, the re-cut is free.
Customise
Code
<TextBlurReveal>
Your prescription, cut in our own lab
</TextBlurReveal>Blur Reveal Text is a free text effect component for Next.js and React that splits a headline into words as it renders, then sharpens each word from a soft blur into crisp, fully opaque type in a smooth stagger. It is built with Motion, styled with Tailwind, and plays once when the wrapper scrolls into view.
The reveal animates filter and opacity only, so layout never shifts, and the text stays one coherent string for screen readers whatever element you render it as. Once each word is sharp, nothing is left on it: no filter at all, not a zero blur. With prefers-reduced-motion enabled, or with JavaScript unavailable, the text renders sharp and fully visible immediately with no splitting and no blur.
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, read from the wrapper when the reveal starts, and --ease-out-expo), so it always matches the rest of your motion system. Pace the cascade with the stagger prop; a new value applies from the next time the text enters:
<TextBlurReveal stagger={0.1}>
A slower, more deliberate focus pull
</TextBlurReveal>Frequently asked questions
- Does Blur Reveal Text work with right-to-left languages?
- Yes. The text takes the direction of the page or the element around it, exactly as plain text does, so for a Hebrew or Arabic title set dir="rtl" on the page or on an ancestor, with lang for the language itself (lang alone does not change the direction). Left-to-right text splits into words; text containing right-to-left characters, or placed in a right-to-left context, enters as one block, laid out by the browser's own bidirectional rules.
- 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. While the words are split, the wrapper also holds a visually hidden copy of the full text, which assistive technology reads once, and the blurring words are hidden from it, so screen readers announce one coherent string. Because the text is real content rather than a label, this is valid whatever element you render, a paragraph included, and copying the text gives it once. 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.