From d50b30666babb98c70d210224fe0bae9c40ca388 Mon Sep 17 00:00:00 2001 From: syoul Date: Mon, 23 Mar 2026 21:52:44 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9liore=20le=20fondu=20encha?= =?UTF-8?q?=C3=AEn=C3=A9=20et=20recalibre=20les=20vitesses?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fondu : dip à 0.15 (au lieu de 0) pour un effet dissolve plutôt qu'un blink; ease-out 150ms / ease-in 200ms - Délais : 1500ms base (×1=1.5s, ×2=750ms, ×4=375ms) - Vitesse par défaut : ×2 Co-Authored-By: Claude Sonnet 4.6 --- src/components/HeatMap.tsx | 7 ++++--- src/hooks/useAnimation.ts | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/HeatMap.tsx b/src/components/HeatMap.tsx index f37a9c3..bff36d4 100644 --- a/src/components/HeatMap.tsx +++ b/src/components/HeatMap.tsx @@ -89,13 +89,14 @@ export function HeatMap({ transactions }: HeatMapProps) { return; } - canvas.style.transition = 'opacity 0.25s ease-in-out'; - canvas.style.opacity = '0'; + canvas.style.transition = 'opacity 0.15s ease-out'; + canvas.style.opacity = '0.15'; const t = setTimeout(() => { update(); + canvas.style.transition = 'opacity 0.2s ease-in'; canvas.style.opacity = '1'; - }, 250); + }, 150); return () => clearTimeout(t); }, [transactions]); diff --git a/src/hooks/useAnimation.ts b/src/hooks/useAnimation.ts index 5cd30b7..0738b1a 100644 --- a/src/hooks/useAnimation.ts +++ b/src/hooks/useAnimation.ts @@ -60,7 +60,7 @@ export function useAnimation(transactions: Transaction[], periodDays: number) { const [active, setActive] = useState(false); const [currentIndex, setCurrentIndex] = useState(0); const [playing, setPlaying] = useState(false); - const [speed, setSpeed] = useState<1 | 2 | 4>(1); + const [speed, setSpeed] = useState<1 | 2 | 4>(2); const frames = useMemo(() => buildFrames(periodDays), [periodDays]); @@ -73,7 +73,7 @@ export function useAnimation(transactions: Transaction[], periodDays: number) { // Auto-advance: one step every (2000 / speed) ms useEffect(() => { if (!playing || !active) return; - const delay = 2000 / speed; + const delay = 1500 / speed; // ×1=1500ms, ×2=750ms, ×4=375ms const t = setTimeout(() => { setCurrentIndex((i) => { if (i >= frames.length - 1) {