63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
|
|
export function AudioWave() {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-center gap-1 h-32">
|
|
{[...Array(20)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
custom={i}
|
|
variants={{
|
|
initial: { height: "20%" },
|
|
animate: (i: number) => ({
|
|
height: ["20%", "70%"],
|
|
transition: {
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
type: "spring",
|
|
repeatType: "reverse",
|
|
stiffness: Math.random() * 100 + 10,
|
|
damping: Math.random() * 5 + 10,
|
|
delay: i * 0.05,
|
|
},
|
|
}),
|
|
}}
|
|
initial="initial"
|
|
animate="animate"
|
|
className="w-2 bg-primary/50 rounded-full"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-1 h-32 scale-120 absolute top-0 left-0 right-0">
|
|
{[...Array(20)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
custom={i}
|
|
variants={{
|
|
initial: { height: "20%" },
|
|
animate: (i: number) => ({
|
|
height: ["20%", "70%"],
|
|
transition: {
|
|
duration: 8,
|
|
repeat: Infinity,
|
|
type: "spring",
|
|
repeatType: "reverse",
|
|
stiffness: Math.random() * 100 + 10,
|
|
damping: Math.random() * 5 + 10,
|
|
delay: i * 0.05,
|
|
},
|
|
}),
|
|
}}
|
|
initial="initial"
|
|
animate="animate"
|
|
className="w-2 bg-primary/10 rounded-full"
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
} |