Initial commit

src/components/ui/AnimatedBarChart.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+import { cls } from "@/lib/utils";
+
+const BARS = [
+  { height: 100, hoverHeight: 40 },
+  { height: 84, hoverHeight: 100 },
+  { height: 62, hoverHeight: 75 },
+  { height: 90, hoverHeight: 50 },
+  { height: 70, hoverHeight: 90 },
+  { height: 50, hoverHeight: 60 },
+  { height: 75, hoverHeight: 85 },
+  { height: 80, hoverHeight: 70 },
+];
+
+const AnimatedBarChart = () => {
+  const [active, setActive] = useState(2);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => setActive((p) => (p + 1) % BARS.length), 3000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div
+      className="hidden md:block h-full w-full"
+      style={{ maskImage: "linear-gradient(to bottom, black 40%, transparent)" }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="flex items-end gap-4 h-full w-full">
+        {BARS.map((bar, i) => (
+          <div
+            key={i}
+            className="relative w-full rounded bg-background-accent transition-all duration-500"
+            style={{ height: `${isHovered ? bar.hoverHeight : bar.height}%` }}
+          >
+            <div className={cls("absolute inset-0 rounded primary-button transition-opacity duration-500", active === i ? "opacity-100" : "opacity-0")} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AnimatedBarChart;