# Blur Reveal Text — React Text Animation

> Words rise out of a blur one after another when the text scrolls into view.

- Category: [Text Effects](https://pixelpapa.com/components/text.md)
- Tags: text, reveal, blur, stagger, scroll
- Dependencies: motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/text/blur-reveal-text

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/blur-reveal-text.json"
```

The file is written to `components/pixelpapa/blur-reveal-text.tsx`. To install manually, run `npm install motion` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

type BlurRevealTextProps = {
  text: string;
  className?: string;
  /** Seconds between each word. */
  stagger?: number;
  /** Replay every time it enters the viewport. */
  repeat?: boolean;
};

export function BlurRevealText({ text, className, stagger = 0.06, repeat = false }: BlurRevealTextProps) {
  const reduce = useReducedMotion();
  const words = text.split(" ");

  return (
    <motion.p
      aria-label={text}
      initial="hidden"
      whileInView="shown"
      viewport={{ once: !repeat, amount: 0.6 }}
      transition={{ staggerChildren: reduce ? 0 : stagger }}
      className={cn("flex flex-wrap justify-center gap-x-[0.28em]", className)}
    >
      {words.map((word, i) => (
        <motion.span
          key={`${word}-${i}`}
          aria-hidden
          className="inline-block will-change-[filter,transform]"
          variants={{
            hidden: reduce ? { opacity: 0 } : { opacity: 0, y: "0.5em", filter: "blur(12px)" },
            shown: { opacity: 1, y: 0, filter: "blur(0px)" },
          }}
          transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
        >
          {word}
        </motion.span>
      ))}
    </motion.p>
  );
}

export default function BlurRevealTextDemo() {
  return (
    <div className="max-w-2xl px-6 text-center">
      <BlurRevealText
        text="Interfaces feel alive when every word arrives on purpose."
        className="text-4xl font-semibold tracking-tight text-balance text-foreground sm:text-5xl"
      />
      <BlurRevealText
        text="A staggered blur-in for headlines, driven by a single prop."
        stagger={0.03}
        className="mt-5 text-base text-muted-foreground"
      />
    </div>
  );
}
```

## AI prompt

```text
Add the "Blur Reveal Text" component from PixelPapa UI to this project.

What it is: Words rise out of a blur one after another when the text scrolls into view.
Category: Text Effects. Depends on: motion.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/blur-reveal-text.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/blur-reveal-text.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/blur-reveal-text" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More text effects

- [Text Circular Rotating](https://pixelpapa.com/components/text/text-circular-rotating.md) (Pro): Text set on a circle that spins continuously and eases down to a crawl on hover, with a slot in the middle for an icon or button.
- [Text Counting Number](https://pixelpapa.com/components/text/text-counting-number.md) (Pro): A spring-driven count-up with locale formatting, prefix, suffix and decimals; writes straight to the DOM so it never re-renders.
- [Text Glitch Slice](https://pixelpapa.com/components/text/text-glitch-slice.md) (Pro): The word is cut into horizontal strips that jolt sideways in short bursts, with two colour ghosts splitting off underneath.
- [Text Gradient Flow](https://pixelpapa.com/components/text/text-gradient-flow.md): A seamless multi-stop gradient that travels through the letters on a loop, with an optional blurred glow of the same gradient behind.
- [Text Highlight Marker](https://pixelpapa.com/components/text/text-highlight-marker.md) (Pro): Hand-drawn marker strokes (highlight, underline or circle) draw themselves behind words when they scroll into view.
- [Text Letters Pull Up](https://pixelpapa.com/components/text/text-letters-pull-up.md) (Pro): Each letter springs up from behind a mask with a slight tilt, staggered across the line when it enters the viewport.