Spaces:
Build error
Build error
File size: 1,610 Bytes
09fa60b |
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
"use client";
import { useEffect, useRef } from "react";
export function MiniVisualizer() {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
if (!ctx) return;
canvas.width = 200;
canvas.height = 40;
let animationFrameId: number;
const bars = 20;
const barHeights = Array(bars).fill(0).map(() => Math.random());
const draw = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const barWidth = canvas.width / bars;
for (let i = 0; i < bars; i++) {
// Animate bar heights
barHeights[i] += (Math.random() - 0.5) * 0.3;
barHeights[i] = Math.max(0.1, Math.min(1, barHeights[i]));
const barHeight = barHeights[i] * canvas.height;
const x = i * barWidth;
const y = canvas.height - barHeight;
// Gradient for bars
const gradient = ctx.createLinearGradient(0, y, 0, canvas.height);
gradient.addColorStop(0, "rgba(99, 102, 241, 0.8)");
gradient.addColorStop(1, "rgba(168, 85, 247, 0.8)");
ctx.fillStyle = gradient;
ctx.fillRect(x + 1, y, barWidth - 2, barHeight);
}
animationFrameId = requestAnimationFrame(draw);
};
draw();
return () => {
cancelAnimationFrame(animationFrameId);
};
}, []);
return (
<canvas
ref={canvasRef}
className="w-full h-10 rounded opacity-60"
aria-hidden="true"
/>
);
}
|