Aurora Background

Installation

1. Install the dependencies

   $ npm i motion lucide-react

2. Copy the source into components/ui/aurora-background.tsx

   components/ui/aurora-background.tsxCopy

   "use client";
   
   import { motion } from "motion/react";
   import type { ReactNode } from "react";
   
   type AuroraBackgroundProps = {
     children?: ReactNode;
     className?: string;
     colors?: [string, string, string];
   };
   
   export function AuroraBackground({
     children,
     className = "",
     colors = ["#bfdbfe", "#ddd6fe", "#a5f3fc"],
   }: AuroraBackgroundProps) {
     const blobs = [
       { color: colors[0], className: "left-[-10%] top-[-20%] h-[70%] w-[55%]", x: [0, 80, 0], y: [0, 40, 0] },
       { color: colors[1], className: "right-[-10%] top-[-10%] h-[65%] w-[50%]", x: [0, -60, 0], y: [0, 60, 0] },
       { color: colors[2], className: "bottom-[-25%] left-[25%] h-[70%] w-[50%]", x: [0, 50, -30, 0], y: [0, -40, 0] },
     ];
   
     return (
       <div className={`relative isolate overflow-hidden bg-white ${className}`}>
         {blobs.map((b, i) => (
           <motion.div
             key={i}
             aria-hidden
             className={`absolute -z-10 rounded-full opacity-70 blur-3xl ${b.className}`}
             style={{ backgroundColor: b.color }}
             animate={{ x: b.x, y: b.y, scale: [1, 1.15, 1] }}
             transition={{ duration: 14 + i * 3, repeat: Infinity, ease: "easeInOut" }}
           />
         ))}
         <div aria-hidden className="absolute inset-0 -z-10 bg-white/30" />
         {children}
       </div>
     );
   }
   
   export default function Demo() {
     return (
       <AuroraBackground className="grid h-80 w-full max-w-4xl place-items-center rounded-3xl border border-zinc-200">
         <div className="px-6 text-center">
           <h3 className="text-4xl font-semibold tracking-tight text-zinc-900">Calm, living color</h3>
           <p className="mt-3 text-zinc-600">Soft gradients that drift slowly behind your content.</p>
         </div>
       </AuroraBackground>
     );
   }
   

3. Use it

   The file exports the component and a Demo showing typical usage. Import whichever you need.