Reveal Text

Component 6

About

A React component that animates a heading or block of text into view by splitting it into characters, words, or lines and staggering them in with GSAP on mount.

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

Code

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

Usage.tsx

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

export default function RevealTextDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background px-6">
      <RevealText
        type="chars"
        className="max-w-2xl text-center text-4xl font-bold tracking-tight text-foreground sm:text-6xl"
      >
        Design and build faster with smooth text reveals.
      </RevealText>
    </div>
  );
}