bar-wave-animation

1"use client";
2 
3import { motion } from "framer-motion";
4import { useState } from "react";
5 
6const TOTAL = 15;
7 
8const BarWaveAnimation = () => {
9  const [hovered, setHovered] = useState<number | null>(null);
10 
11  return (
12    <svg
13      className=" dark:invert-100 invert-0 cursor-pointer w-full h-full m-10"
14      viewBox="0 0 350 130"
15      overflow={"visible"}
16    >
17      <g transform="rotate(180, 175, 65)">
18        {Array.from({ length: TOTAL }).map((_, i) => {
19          const baseHeight = 41.5199;
20          const distance = hovered === null ? Infinity : Math.abs(hovered - i);
21          const influence = Math.max(0, 1 - distance * 0.25);
22          const height = baseHeight + influence * 150;
23          const opacity = hovered === null ? 1 : 0.2 + influence * 0.8;
24 
25          return (
26            <motion.rect
27              key={i}
28              animate={{ height, filter: `brightness(${opacity})` }}
29              transition={{
30                type: "spring",
31                stiffness: 200,
32                damping: 20,
33              }}
34              onHoverStart={() => setHovered(i)}
35              onHoverEnd={() => setHovered(null)}
36              x={0.4 + i * 15}
37              y={0.75 + i * -15}
38              width="183.071"
39              height={baseHeight}
40              rx="6.5"
41              transform="matrix(0.866025 0.5 0 1 0.0580127 -2.88838)"
42              fill="#171717"
43              stroke="#626262"
44            />
45          );
46        })}
47      </g>
48    </svg>
49  );
50};
51 
52export default BarWaveAnimation;