diff --git a/src/hooks/useAnimation.ts b/src/hooks/useAnimation.ts
index 0738b1a..ba273e8 100644
--- a/src/hooks/useAnimation.ts
+++ b/src/hooks/useAnimation.ts
@@ -64,10 +64,12 @@ export function useAnimation(transactions: Transaction[], periodDays: number) {
 
   const frames = useMemo(() => buildFrames(periodDays), [periodDays]);
 
-  // Reset cursor and playback when period or activation changes
+  // Reset cursor when period or activation changes.
+  // Stop playback only on deactivation — not on activation, so activate() can
+  // start playing immediately without being overridden by this effect.
   useEffect(() => {
     setCurrentIndex(0);
-    setPlaying(false);
+    if (!active) setPlaying(false);
   }, [periodDays, active]);
 
   // Auto-advance: one step every (2000 / speed) ms
@@ -95,7 +97,7 @@ export function useAnimation(transactions: Transaction[], periodDays: number) {
 
   return {
     active,
-    activate: () => setActive(true),
+    activate: () => { setActive(true); setSpeed(1); setPlaying(true); },
     deactivate: () => { setActive(false); },
     playing,
     play: () => setPlaying(true),