Text Reveal

Component

About

Staggered text entrance that masks and slides each word, character or line into place on scroll. Respects reduced-motion.

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

Code

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

Usage.tsx

'use client';

import { TextReveal } from '@/components/ui/text-reveal';

export default function TextRevealDemo() {
  return (
    <div className="grid w-full max-w-xl gap-8">
      <div className="grid gap-2">
        <p className="text-xs text-muted-foreground uppercase">By word</p>
        <div className="text-2xl font-semibold tracking-tight text-foreground">
          <TextReveal as="h3">Words rise into place, one after another</TextReveal>
        </div>
      </div>

      <div className="grid gap-2">
        <p className="text-xs text-muted-foreground uppercase">By line</p>
        <div className="text-sm leading-relaxed text-muted-foreground">
          <TextReveal by="line" delay={100} stagger={120}>
            Designed for headlines and pull quotes. Each line is masked, then slides up. Respects reduced-motion
            preferences.
          </TextReveal>
        </div>
      </div>
    </div>
  );
}