Spaces:
Sleeping
Sleeping
| 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> | |
| ); | |
| } | |