From 66d61595bdf080ab72205adaea7d7f1dccc664b2 Mon Sep 17 00:00:00 2001 From: R0m1k3 Date: Tue, 28 Apr 2026 13:32:58 +0200 Subject: [PATCH] fix: equalizer plus proche du design Stitch + couleurs plus profondes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Barres plus pleines et arrondies, halo lumineux sur pics audio, palette dark plus riche (indigo vibrant, cyan éclatant, bleu profond), ombres et bordures plus marquées, gradients de fond plus immersifs. Co-Authored-By: Claude Opus 4.7 --- frontend/src/components/AudioVisualizer.tsx | 45 +++++++++---------- frontend/src/styles/globals.css | 48 ++++++++++----------- 2 files changed, 47 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/AudioVisualizer.tsx b/frontend/src/components/AudioVisualizer.tsx index 994c85c..c671521 100644 --- a/frontend/src/components/AudioVisualizer.tsx +++ b/frontend/src/components/AudioVisualizer.tsx @@ -8,12 +8,12 @@ interface AudioVisualizerProps { } export default function AudioVisualizer({ - barCount = 28, - height = 80, - gap = 3, + barCount = 40, + height = 96, + gap = 2, }: AudioVisualizerProps) { const { isPlaying, getFrequencyData } = useAudio(); - const [heights, setHeights] = useState(() => Array(barCount).fill(4)); + const [heights, setHeights] = useState(() => Array(barCount).fill(3)); const rafRef = useRef(0); const playingRef = useRef(isPlaying); const getDataRef = useRef(getFrequencyData); @@ -27,33 +27,30 @@ export default function AudioVisualizer({ const animate = () => { const rawData = getDataRef.current?.(); if (rawData && playingRef.current) { - // Build symmetric mirrored heights const newHeights: number[] = []; - for (let i = 0; i < barCount; i++) { - // Mirror index: distance from center const distFromCenter = Math.abs(i - (barCount - 1) / 2); const halfIdx = Math.floor(distFromCenter); const dataIndex = Math.min(halfIdx, rawData.length - 1); - const value = rawData[dataIndex] ?? 0; - // Smooth falloff curve toward edges for aesthetic hill shape - const edgeFade = 1 - (distFromCenter / half) * 0.35; + // Smoother edge fade — keep center bars taller + const edgeFade = 1 - (distFromCenter / half) * 0.2; - // Boost mid frequencies for speech - const midBoost = distFromCenter < half * 0.5 ? 1.1 : 1; + // Mid boost for vocals/speech + const midBoost = distFromCenter < half * 0.6 ? 1.15 : 1; - const h = Math.max(4, Math.min(100, (value / 255) * 100 * edgeFade * midBoost)); + // More dynamic range — minimum height of 6% + const h = Math.max(6, Math.min(100, (value / 255) * 100 * edgeFade * midBoost)); newHeights.push(h); } - setHeights(newHeights); } else { + // Gentle decay when paused — slower falloff for smoother look setHeights(prev => prev.map(h => { - const next = h * 0.88; - return next < 4.5 ? 4 : next; + const next = h * 0.92; + return next < 3.5 ? 3 : next; }) ); } @@ -64,21 +61,25 @@ export default function AudioVisualizer({ return () => cancelAnimationFrame(rafRef.current); }, [barCount]); + const barWidth = Math.max(2, (100 - gap * (barCount - 1)) / barCount); + return (