diff --git a/src/components/HeatMap.tsx b/src/components/HeatMap.tsx
index 03cf5b5..4527dd6 100644
--- a/src/components/HeatMap.tsx
+++ b/src/components/HeatMap.tsx
@@ -114,8 +114,10 @@ export function HeatMap({ transactions }: HeatMapProps) {
     update();
 
     // 5. Simultaneously: canvas fades in, overlay fades out → true crossfade
-    const raf = requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
+    // Both RAF ids must be cancelled on cleanup to avoid double-transition
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
         const DURATION = '0.55s ease-in-out';
         canvas.style.transition = `opacity ${DURATION}`;
         canvas.style.opacity = '1';
@@ -124,7 +126,7 @@ export function HeatMap({ transactions }: HeatMapProps) {
       });
     });
 
-    return () => cancelAnimationFrame(raf);
+    return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); };
   }, [transactions]);
 
   return (