Phase Weave Text

Text

About

A rotating text display that cycles through a list of phrases with a smooth character-by-character fade and shift animation.

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

Code

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

Usage.tsx

import { PhaseWeaveText } from "@/components/ui/phase-weave-text";

export default function PhaseWeaveTextDemo() {
  return (
    <div className="flex min-h-[220px] w-full items-center justify-center bg-background p-8 text-foreground">
      <PhaseWeaveText
        as="h2"
        className="text-4xl sm:text-5xl"
        words={["Find the signal", "Shape the path", "Keep it clear"]}
        interval={2800}
      />
    </div>
  );
}