Spaces:
Sleeping
Sleeping
| import { motion } from 'motion/react'; | |
| import { useTheme } from '../context/ThemeContext'; | |
| export default function BackgroundElements() { | |
| const { config } = useTheme(); | |
| return ( | |
| <div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden"> | |
| {/* Floating dynamic theme glows */} | |
| <motion.div | |
| animate={{ y: [0, 50, 0], opacity: [0.08, 0.18, 0.08] }} | |
| transition={{ duration: 12, repeat: Infinity, ease: "linear" }} | |
| className="absolute top-1/4 left-1/4 w-[450px] h-[450px] rounded-full blur-[140px] transition-colors duration-700" | |
| style={{ backgroundColor: config.bgGradientFrom }} | |
| /> | |
| <motion.div | |
| animate={{ y: [0, -35, 0], opacity: [0.05, 0.15, 0.05] }} | |
| transition={{ duration: 16, repeat: Infinity, ease: "linear" }} | |
| className="absolute bottom-1/4 right-1/4 w-[550px] h-[550px] rounded-full blur-[160px] transition-colors duration-700" | |
| style={{ backgroundColor: config.bgGradientTo }} | |
| /> | |
| </div> | |
| ); | |
| } | |