FX · Text

BlurReveal

Text that fades in from a soft blur, word by word or letter by letter. Screen readers get the whole sentence once; reduced motion shows it instantly.

Ship interfaces people remember

bash
npx shadcn@latest add https://www.rad-ui.com/r/blur-reveal.json

React
import BlurReveal from "@/components/fx/blur-reveal"

<BlurReveal as="h1" text="Ship interfaces people remember" />

Motion, minus the vertigo.

React
<BlurReveal by="letter" stagger={30} text="Motion, minus the vertigo." />

The full text is rendered once in a visually hidden span; the animated pieces are aria-hidden. Do not remove either.
prefers-reduced-motion: reduce shows the text immediately, with no blur, movement or stagger.
Use the `as` prop to keep the correct heading level instead of wrapping in another heading.

Prop	Type	Default	Description
text	string	—	Text to reveal. Read once, whole, by screen readers.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'blockquote'	'p'	Element to render, so headings keep their level.
by	'word' \| 'letter'	'word'	Animate per word or per letter. Letters never break across lines.
trigger	'inView' \| 'mount'	'inView'	Start when scrolled into view, or immediately.
stagger	number	60	Delay between pieces, in ms.
duration	number	700	Duration of each piece, in ms.
delay	number	0	Delay before the first piece, in ms.