Aurora Text

aurora x gradient

Text with animated aurora borealis gradient effect. From Magic UI.

textauroragradientmagicui

Aurora Effect

Code

text-aurora.tsx

export function AuroraText({ children }: { children: React.ReactNode }) {
  return (
    <span className="bg-gradient-to-r from-violet-500 via-cyan-500 to-emerald-500 bg-[length:200%_auto] bg-clip-text text-transparent animate-[aurora_4s_linear_infinite]">
      {children}
    </span>
  );
}
/* CSS: @keyframes aurora { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } } */

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