Aurora backgroundPro

• Hero sections, pricing headers and empty states that need atmosphere.

• Behind dense data or long text: it lowers contrast.
• More than one per page.

Import it from @/components/ui/aurora-background after installing.

import { AuroraBackground } from "@/components/ui/aurora-background";

export function Hero() {
  return (
    <AuroraBackground className="rounded-3xl">
      <div className="px-6 py-24 text-center">…</div>
    </AuroraBackground>
  );
}

• The glow is aria-hidden and sits behind content.
• Static under reduced motion.
• Check text contrast over the brightest color.

• Each field drifts and breathes on its own mirrored loop, offset by 3 seconds.

• Fills its container at any size.

• Four blurred, transform-only layers; GPU composited.

• Use theme-friendly colors; the glow sits on var(--background).