Spaces:
Sleeping
Sleeping
File size: 2,291 Bytes
9e7f815 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import { motion } from "motion/react";
import { useEffect, useState } from "react";
import { useTheme } from "../context/ThemeContext";
export default function GeometricBackground() {
const [mounted, setMounted] = useState(false);
const { config, theme } = useTheme();
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return (
<div className="fixed inset-0 z-[-1] overflow-hidden pointer-events-none bg-[#05070a] transition-colors duration-700">
{/* Soft overlay gradient according to atmosphere theme */}
<div
className="absolute inset-0 transition-opacity duration-700 pointer-events-none"
style={{
background: `radial-gradient(ellipse at top right, ${config.bgGradientFrom}, transparent 65%), radial-gradient(ellipse at bottom left, ${config.bgGradientTo}, transparent 70%)`
}}
/>
{/* Floating geometric elements */}
<motion.div
className="absolute top-[8%] left-[12%] w-[450px] h-[450px] rounded-full blur-[140px] transition-colors duration-700"
style={{ backgroundColor: config.bgGradientFrom }}
animate={{
y: [0, -35, 0],
x: [0, 25, 0],
scale: [1, 1.05, 1],
}}
transition={{
duration: 20,
repeat: Infinity,
ease: "linear",
}}
/>
<motion.div
className="absolute bottom-[15%] right-[8%] w-[550px] h-[550px] rounded-full blur-[160px] transition-colors duration-700"
style={{ backgroundColor: config.bgGradientTo }}
animate={{
y: [0, 45, 0],
x: [0, -35, 0],
scale: [1, 1.08, 1],
}}
transition={{
duration: 26,
repeat: Infinity,
ease: "easeInOut",
}}
/>
{/* Grid pattern overlay */}
<div
className="absolute inset-0 bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_65%_65%_at_50%_50%,#000_25%,transparent_100%)] opacity-40 transition-all duration-700"
style={{
backgroundImage: `linear-gradient(${config.accentGlow.replace("0.4", "0.04")} 1px, transparent 1px), linear-gradient(90deg, ${config.accentGlow.replace("0.4", "0.04")} 1px, transparent 1px)`
}}
/>
</div>
);
}
|