71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
|
import { motion } from "framer-motion";
|
||
|
|
export const particles = Array.from({ length: 20 }, (_, i) => ({
|
||
|
|
id: i,
|
||
|
|
x: Math.random() * 100,
|
||
|
|
y: Math.random() * 100,
|
||
|
|
size: Math.random() * 3 + 1,
|
||
|
|
duration: Math.random() * 15 + 10,
|
||
|
|
delay: Math.random() * 5,
|
||
|
|
}));
|
||
|
|
|
||
|
|
export const containerVariants = {
|
||
|
|
hidden: { opacity: 0 },
|
||
|
|
visible: {
|
||
|
|
opacity: 1,
|
||
|
|
transition: { staggerChildren: 0.1, delayChildren: 0.2 },
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const itemVariants = {
|
||
|
|
hidden: { y: 20, opacity: 0 },
|
||
|
|
visible: {
|
||
|
|
y: 0,
|
||
|
|
opacity: 1,
|
||
|
|
transition: { type: "spring", stiffness: 100 },
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function HeaderAnimation() {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="absolute inset-0 overflow-hidden">
|
||
|
|
{particles.map((p) => (
|
||
|
|
<motion.div
|
||
|
|
key={p.id}
|
||
|
|
className="absolute rounded-full bg-amber-500/20"
|
||
|
|
style={{
|
||
|
|
left: `${p.x}%`,
|
||
|
|
top: `${p.y}%`,
|
||
|
|
width: p.size,
|
||
|
|
height: p.size,
|
||
|
|
}}
|
||
|
|
animate={{
|
||
|
|
y: [0, -20, 0],
|
||
|
|
x: [0, 10, -10, 0],
|
||
|
|
opacity: [0.2, 0.4, 0.2],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: p.duration,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay: p.delay,
|
||
|
|
ease: "linear",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Glow orbs */}
|
||
|
|
<motion.div
|
||
|
|
className="absolute top-20 left-20 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl"
|
||
|
|
animate={{ scale: [1, 1.2, 1], x: [0, 30, 0], y: [0, -20, 0] }}
|
||
|
|
transition={{ duration: 12, repeat: Infinity }}
|
||
|
|
/>
|
||
|
|
<motion.div
|
||
|
|
className="absolute bottom-20 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"
|
||
|
|
animate={{ scale: [1, 1.3, 1], x: [0, -30, 0], y: [0, 20, 0] }}
|
||
|
|
transition={{ duration: 15, repeat: Infinity }}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|