Reveal Text

Text 134

About

Fluid responsive blur-and-stagger text reveal animation using Framer Motion

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 RevealTextDemo() {
  return (
    <div
      className="min-h-screen w-full flex flex-col items-center justify-center p-4 sm:p-8 md:p-12 gap-8 bg-[#09090b] text-white overflow-x-hidden"
      style={{
        minHeight: "100vh",
        width: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "clamp(1.5rem, 5vw, 4rem) 1rem",
        gap: "clamp(1.5rem, 4vw, 3rem)",
        backgroundColor: "#09090b",
        color: "#ffffff",
        fontFamily: "'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        boxSizing: "border-box",
        overflowX: "hidden",
      }}
    >
      <div className="flex flex-col items-center gap-4 text-center w-full max-w-5xl mx-auto">
        {/* Responsive Eyebrow */}
        <RevealText
          size="sm"
          as="p"
          stagger={0.02}
          className="uppercase tracking-widest font-mono font-semibold text-emerald-400"
          style={{ color: "#34d399", letterSpacing: "0.2em", maxWidth: "36rem" }}
        >
          Fluid Responsive Typography
        </RevealText>

        {/* Big Responsive Headline */}
        <RevealText
          size="display"
          as="h1"
          stagger={0.045}
          delay={0.15}
          duration={0.85}
          className="text-white font-bold max-w-4xl"
        >
          Every great developer was once a beginner who refused to give up.
        </RevealText>

        {/* Responsive Subtitle */}
        <RevealText
          size="base"
          as="p"
          stagger={0.03}
          delay={0.35}
          className="text-neutral-400 max-w-2xl font-normal"
          style={{ color: "#a1a1aa", lineHeight: 1.6 }}
        >
          Craft is the invisible detail that separates work that merely functions from work that people remember.
        </RevealText>
      </div>
    </div>
  );
}