Text Blur Reveal

Text 36

About

A headline text component that blurs and fades in word by word or letter by letter as it scrolls into view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Blur Reveal to your project and fits it to your theme.

Code

How Text Blur Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TextBlurReveal } from "@/components/ui/text-blur-reveal";

export default function TextBlurRevealDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background px-6">
      <TextBlurReveal
        text="Blur-in stagger by word on scroll, built for headlines that need presence."
        className="max-w-2xl text-center text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
        animateBy="words"
        startOnView={false}
      />
    </div>
  );
}