Fade In Text

Text 32

About

Text that animates into view by fading in word by word or character by character.

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

Code

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

Usage.tsx

import { TextFadeIn } from "@/components/ui/text-fade-in";

export default function TextFadeInDemo() {
  return (
    <div className="flex min-h-[300px] w-full items-center justify-center p-8">
      <TextFadeIn
        by="word"
        duration={0.6}
        staggerDelay={0.08}
        className="max-w-xl text-center text-3xl font-semibold tracking-tight text-foreground"
      >
        Beautiful text that gracefully fades into view, word by word.
      </TextFadeIn>
    </div>
  );
}