Text Reveal

Text 24

About

Reveals text word-by-word, character-by-character, or line-by-line with smooth staggered entrance animations.

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

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

export default function TextRevealCharScale() {
  return (
    <div className="flex min-h-50 items-center justify-center px-6">
      <TextReveal
        as="p"
        className="max-w-sm text-center font-semibold text-2xl text-foreground tracking-tight"
        delay={0.1}
        per="char"
        preset="scale"
        speedReveal={2}
        speedSegment={1.5}
      >
        Every pixel. Every frame. Crafted.
      </TextReveal>
    </div>
  );
}