Text Cascade

Text

About

A text component that cascades its letters in one by one with a left-to-right stagger whenever the string changes, for rotating headlines or status labels.

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

Code

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

Usage.tsx

import TextCascade from "@/components/ui/text-cascade";
import { useEffect, useState } from "react";

const PHRASES = ["Install skills", "Open settings", "Ship updates"];

function TextCascadePreview() {
  const [phrase, setPhrase] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => {
      setPhrase((p) => (p + 1) % PHRASES.length);
    }, 2400);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="flex w-full justify-center">
      <p className="text-lg font-medium text-foreground">
        <TextCascade text={PHRASES[phrase] ?? PHRASES[0]} />
      </p>
    </div>
  );
}

export default TextCascadePreview;