Text Animate

word x crossfade

Crossfading word animation cycling through options. From Magic UI.

textanimatecrossfademagicui

Build beautiful websites

Code

text-animate.tsx

"use client";
import { useEffect, useState } from "react";

export function RotatingWords({ words }: { words: string[] }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const i = setInterval(() => setIdx(p => (p + 1) % words.length), 2500);
    return () => clearInterval(i);
  }, [words]);
  return <span className="text-brand transition-all duration-500" key={idx}>{words[idx]}</span>;
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Text Animate component and wire it to my accent.”