Animated Gradient Text

gradient x scroll

Text with animated background gradient. From Animata.

textgradientanimatedanimata

Gradient Text

Code

text-gradient.tsx

export function GradientText({ children }: { children: React.ReactNode }) {
  return (
    <h2 className="bg-gradient-to-r from-violet-500 via-fuchsia-500 to-orange-500 bg-clip-text text-3xl font-bold text-transparent">
      {children}
    </h2>
  );
}

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 Animated Gradient Text component and wire it to my accent.”