Aurora Background

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4
5export default function AuroraBackground({ children }) {
6  return (
7    <div className="relative w-full h-full min-h-[400px] overflow-hidden rounded-2xl bg-black">
8      {/* Aurora glow 1 */}
9      <motion.div
10        className="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] rounded-full opacity-60 blur-[100px]"
11        style={{
12          background: "radial-gradient(circle, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,0) 100%)",
13        }}
14        animate={{
15          x: ["0%", "20%", "-10%", "0%"],
16          y: ["0%", "10%", "-20%", "0%"],
17          scale: [1, 1.2, 0.9, 1],
18        }}
19        transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
20      />
21      
22      {/* Aurora glow 2 */}
23      <motion.div
24        className="absolute top-[30%] -right-[10%] w-[60%] h-[60%] rounded-full opacity-50 blur-[120px]"
25        style={{
26          background: "radial-gradient(circle, rgba(0,212,255,1) 0%, rgba(9,9,121,1) 50%, rgba(2,0,36,0) 100%)",
27        }}
28        animate={{
29          x: ["0%", "-20%", "10%", "0%"],
30          y: ["0%", "-10%", "20%", "0%"],
31          scale: [1, 1.1, 0.8, 1],
32        }}
33        transition={{ duration: 18, repeat: Infinity, ease: "linear" }}
34      />
35      
36      {/* Aurora glow 3 */}
37      <motion.div
38        className="absolute -bottom-[20%] left-[20%] w-[70%] h-[50%] rounded-full opacity-40 blur-[90px]"
39        style={{
40          background: "radial-gradient(circle, rgba(29,253,153,1) 0%, rgba(26,112,50,1) 50%, rgba(0,0,0,0) 100%)",
41        }}
42        animate={{
43          x: ["0%", "15%", "-15%", "0%"],
44          y: ["0%", "-20%", "10%", "0%"],
45          scale: [1, 1.3, 0.9, 1],
46        }}
47        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
48      />
49
50      {/* Content wrapper with glassmorphism to let the aurora shine through but readable text */}
51      <div className="relative z-10 w-full h-full flex flex-col items-center justify-center p-8 backdrop-blur-[2px]">
52        {children || (
53          <div className="text-center space-y-4">
54            <h2 className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-br from-white to-white/40">
55              Aurora
56            </h2>
57            <p className="text-white/60 font-medium tracking-wide">Dynamic multi-layered gradient field.</p>
58          </div>
59        )}
60      </div>
61    </div>
62  );
63}
64