Text Blur Reveal

A blur-in stagger by word or by letter, triggered the moment you scroll.

textblurrevealstaggerheadlineanimationscroll

Overview

Text Blur Reveal is a React and Tailwind CSS scroll reveal text animation that blurs a sentence into focus word by word or letter by letter, in Next.js or any React app, built on Framer Motion. Each piece drops in from above or rises from below in a two step settle, starting on scroll or on mount. Letter mode keeps words together so a wrap never splits one, screen readers get the whole sentence, and reduced motion shows it at once. It renders a p by default, and the as prop turns it into a real h1 or h2.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-blur-reveal

Usage

Import TextBlurReveal from @/components/wensity/text-blur-reveal and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextBlurReveal } from "@/components/wensity/text-blur-reveal";
 2
 3export default function Example() {
 4  return (
 5    <TextBlurReveal
 6      text="Blur reveals every word with intent."
 7      animateBy="words"
 8      direction="top"
 9      className="font-display text-4xl font-semibold"
10    />
11  );
12}

Props

Prop	Type	Default	Description
`text`	string	-	The string to reveal.
`animateBy`	"words" \| "letters"	"words"	How to split the string for staggering.
`direction`	"top" \| "bottom"	"top"	Enter direction for the blur travel.
`delay`	number	200	Stagger delay between segments, in milliseconds.
`stepDuration`	number	0.35	Duration of each keyframe step, in seconds.
`startOnView`	boolean	true	When true, wait for viewport entry. When false, play on mount.
`as`	"p" \| "span" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	"p"	Element to render. Pass "h1" or "h2" to make the reveal a real heading.

Featured in React hero section components.