30 lines
742 B
TypeScript
30 lines
742 B
TypeScript
"use client"
|
|
|
|
import { motion } from "framer-motion"
|
|
|
|
export default function WaveAnimation() {
|
|
return (
|
|
<div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
|
|
{[...Array(5)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-rose-200/20 to-transparent"
|
|
animate={{
|
|
scaleY: [1, 1.5, 1],
|
|
opacity: [0.3, 0.6, 0.3]
|
|
}}
|
|
transition={{
|
|
duration: 2 + i * 0.5,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
style={{
|
|
left: `${i * 20}%`,
|
|
transformOrigin: "bottom"
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|