| import { motion } from "motion/react"; | |
| import { useEffect, useState } from "react"; | |
| export default function GeometricBackground() { | |
| const [mounted, setMounted] = useState(false); | |
| useEffect(() => { | |
| setMounted(true); | |
| }, []); | |
| if (!mounted) return null; | |
| return ( | |
| <div className="fixed inset-0 z-[-1] overflow-hidden pointer-events-none"> | |
| {/* Soft overlay gradient */} | |
| <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-900/10 via-transparent to-transparent"></div> | |
| {/* Floating geometric elements */} | |
| <motion.div | |
| className="absolute top-[10%] left-[15%] w-64 h-64 rounded-full border border-white/5" | |
| animate={{ | |
| y: [0, -30, 0], | |
| x: [0, 20, 0], | |
| rotate: [0, 90, 0], | |
| }} | |
| transition={{ | |
| duration: 20, | |
| repeat: Infinity, | |
| ease: "linear", | |
| }} | |
| /> | |
| <motion.div | |
| className="absolute bottom-[20%] right-[10%] w-96 h-96 rounded-full border border-indigo-500/10" | |
| animate={{ | |
| y: [0, 40, 0], | |
| x: [0, -30, 0], | |
| scale: [1, 1.1, 1], | |
| }} | |
| transition={{ | |
| duration: 25, | |
| repeat: Infinity, | |
| ease: "easeInOut", | |
| }} | |
| /> | |
| <motion.div | |
| className="absolute top-[40%] right-[30%] w-32 h-32 rotate-45 border border-sky-500/10" | |
| animate={{ | |
| rotate: [45, 225], | |
| y: [0, -50, 0], | |
| }} | |
| transition={{ | |
| duration: 30, | |
| repeat: Infinity, | |
| ease: "linear", | |
| }} | |
| /> | |
| {/* Grid pattern overlay */} | |
| <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_20%,transparent_100%)]"></div> | |
| </div> | |
| ); | |
| } | |