Fade Through

Text 47

About

A text animation component that cycles through phrases with a Material-style crossfade, fading old text out and new text in for hero headlines and rotating taglines.

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

Code

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

Usage.tsx

"use client";

import FadeThrough from "@/components/ui/fade-through";

const FadeThroughDemo = () => (
  <div className="flex min-h-[300px] flex-col items-center justify-center gap-8 text-center">
    <div className="flex flex-col items-center gap-2">
      <p className="text-muted-foreground text-sm uppercase tracking-widest">
        We help you
      </p>
      <FadeThrough
        className="font-bold text-4xl tracking-tight"
        phrases={["Ship faster.", "Build smarter.", "Scale further."]}
      />
    </div>

    <FadeThrough
      className="text-lg text-muted-foreground"
      interval={3000}
      phrases={[
        "Beautifully animated components.",
        "Accessible by default.",
        "Copy-paste ready.",
      ]}
    />
  </div>
);

export default FadeThroughDemo;