File size: 2,024 Bytes
e753bcf | 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 | 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>
);
}
|