Aurora Background

aurora x blend

Animated aurora borealis gradient background. From Aceternity.

backgroundauroragradientaceternity

Aurora Glow

Code

bg-aurora.tsx

export function AuroraBackground({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative grid h-40 place-items-center overflow-hidden rounded-xl">
      <div aria-hidden className="absolute inset-0 animate-[aurora_6s_ease_infinite] bg-gradient-to-r from-violet-500/20 via-cyan-500/20 to-emerald-500/20 bg-[length:400%_400%] motion-reduce:animate-none" />
      <div className="relative">{children}</div>
    </div>
  );
}

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