Fancy Text

Text

About

A character-by-character text reveal animation that clips each letter into view with staggered motion, useful for hero headlines and section titles.

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

Code

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

Usage.tsx

import { FancyText } from "@/components/ui/fancy-text";

export default function FancyTextDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background">
      <FancyText
        className="text-5xl font-black leading-none text-black/10 dark:text-white/10"
        fillClassName="text-black dark:text-white"
        stagger={0.06}
        duration={1.2}
        delay={0.2}
      >
        Authentic.
      </FancyText>
    </div>
  );
}