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) {