Text Reveal

Heroes

About

A text animation that fades and un-blurs each word in sequence on page load, useful for hero headlines and intro copy.

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 TextRevealDemo() {
  return (
    <div className="flex w-full h-screen items-center justify-center bg-background px-8">
      <TextReveal
        className="max-w-2xl text-center text-2xl font-medium text-foreground sm:text-3xl"
        text="ForgeUI is a beautifully designed component library built with Tailwind CSS and Motion. It helps developers build modern, animated UIs faster, with consistent styling and production-ready components."
      />
    </div>
  );
}