Reveal Text

Text 1.1K

About

Animated text component that reveals each letter with a spring-in effect, hover-triggered image masking, and a timed overlay sweep for cinematic emphasis. Perfect for hero sections, splash screens, or landing pages where you want bold, interactive branding with visual flair.

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

"use client";

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

export default function Page() {

  return (
    <div className="min-h-screen flex flex-col items-center justify-center">
      <RevealText 
        text="STUNNING"
        textColor="text-white"
        overlayColor="text-red-500"
        fontSize="text-[125px]"
        letterDelay={0.08}
        overlayDelay={0.05}
        overlayDuration={0.4}
        springDuration={600}
      />
       <p className="mt-8">Hover over the text </p>
    </div>
  );
}