Blur Reveal Text
A whole passage comes into focus line by line from a heavy blur on entering the viewport — made for narrative paragraphs.
On entering the viewport, a whole passage pulls into focus from a heavy blur, at a granularity of either lines or words, fading in one after another for the narrative rhythm of a lens racking focus — well suited to brand stories, About pages, and body copy.
Loading preview…
npx shadcn@latest add https://webberui.com/r/blur-reveal-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
0.9
0.16
12
0
<BlurRevealText />
Installation
npx shadcn@latest add https://webberui.com/r/blur-reveal-text.jsonOr, once registries are configured in components.json, install it as @webberui/blur-reveal-text.
Usage
import { BlurRevealText } from "@/components/ui/blur-reveal-text";
<BlurRevealText
text={"Five in the morning on the mountain trail, the mist has not yet lifted.\nOnly when the light breaks over the ridge\ndoes the world, line by line, become clear again."}
granularity="line"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The whole passage to display; with granularity set to "line", it is split on the newline character \n |
granularity | "line" | "word" | "line" | Split granularity: focus by line or by word (word mode uses Intl.Segmenter, so Chinese is segmented correctly too) |
duration | number | 0.9 | How long a single fragment takes to go from blurred to sharp (seconds) |
stagger | number | 0.16 | Delay between adjacent fragments (seconds) |
blur | number | 12 | Initial blur strength (px) |
delay | number | 0 | Overall delay after entering the viewport before the animation starts (seconds) |
once | boolean | true | Whether it plays only once; with false, leaving the viewport re-blurs it and re-entering replays it |
amount | number | 0.3 | Fraction of the element that must be visible to trigger the animation (0–1) |
className | string | — | forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the blur animation is skipped and the complete static text is rendered
- The complete text is exposed
sr-onlyso the screen reader announces it once, and the split animation fragments are hidden from assistive technology (aria-hidden) oncedefaults totrueso repeated replays while scrolling do not become a distraction