Blur Reveal Text: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add blur-reveal-text.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Split granularitygranularity

Focus duration (s)duration

0.9

Segment interval (s)stagger

0.16

Start blur (px)blur

Start delay (s)delay

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<BlurRevealText/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/blur-reveal-text.en.json

Or, 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-only so the screen reader announces it once, and the split animation fragments are hidden from assistive technology (aria-hidden)
once defaults to true so repeated replays while scrolling do not become a distraction

Blur Reveal Text