File size: 1,150 Bytes
c2efbe6 | 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 | import { motion } from "framer-motion"
import "./FloatingElements.css"
const FloatingElements = () => {
const elements = [
{ id: 1, size: 60, delay: 0, duration: 8 },
{ id: 2, size: 40, delay: 2, duration: 10 },
{ id: 3, size: 80, delay: 4, duration: 12 },
{ id: 4, size: 30, delay: 1, duration: 9 },
{ id: 5, size: 50, delay: 3, duration: 11 },
]
return (
<div className="floating-elements">
{elements.map((element) => (
<motion.div
key={element.id}
className="floating-element"
style={{
width: element.size,
height: element.size,
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
}}
animate={{
y: [-20, 20, -20],
x: [-10, 10, -10],
rotate: [0, 360],
scale: [1, 1.1, 1],
}}
transition={{
duration: element.duration,
repeat: Number.POSITIVE_INFINITY,
delay: element.delay,
ease: "easeInOut",
}}
/>
))}
</div>
)
}
export default FloatingElements |