diff --git a/website/src/components/HookIntro.astro b/website/src/components/HookIntro.astro
index 01c590c3..01d01219 100644
--- a/website/src/components/HookIntro.astro
+++ b/website/src/components/HookIntro.astro
@@ -75,23 +75,6 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
             fill="none"
             aria-hidden="true"
           >
-            <defs>
-              <filter id="hook-glow" x="-100%" y="-100%" width="300%" height="300%">
-                <feGaussianBlur stdDeviation="5" result="blur" />
-                <feMerge>
-                  <feMergeNode in="blur" />
-                  <feMergeNode in="SourceGraphic" />
-                </feMerge>
-              </filter>
-              <filter id="hook-glow-sm" x="-100%" y="-100%" width="300%" height="300%">
-                <feGaussianBlur stdDeviation="2.5" result="blur" />
-                <feMerge>
-                  <feMergeNode in="blur" />
-                  <feMergeNode in="SourceGraphic" />
-                </feMerge>
-              </filter>
-            </defs>
-
             <!-- Desktop: serpentine S-curve paths -->
             <g class="hook-paths-desktop">
               <path
@@ -132,24 +115,9 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
               />
             </g>
 
-            <!-- Traveling dot (main) -->
-            <circle
-              r="5.5"
-              cx="-50" cy="-50"
-              fill="var(--primary)"
-              filter="url(#hook-glow)"
-              visibility="hidden"
-              data-hook-dot
-            />
-            <!-- Trailing dot -->
-            <circle
-              r="3"
-              cx="-50" cy="-50"
-              fill="var(--primary)"
-              filter="url(#hook-glow-sm)"
-              visibility="hidden"
-              data-hook-dot-trail
-            />
+            <!-- Traveling dots avoid animated SVG blur filters; the trail supplies the glow cue. -->
+            <circle r="5.5" cx="-50" cy="-50" fill="var(--primary)" opacity="0" visibility="hidden" data-hook-dot />
+            <circle r="3" cx="-50" cy="-50" fill="var(--primary)" opacity="0" visibility="hidden" data-hook-dot-trail />
           </svg>
 
           <!-- Node cards -->
@@ -295,7 +263,7 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
 </style>
 
 <script>
-  import { animate, inView } from 'motion';
+  import { inView } from 'motion';
 
   type HookFlowWindow = Window & {
     __bubHookFlowCleanup?: () => void;
@@ -313,6 +281,16 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
   const TRAIL_LEAD   = 0.018;
   const FADE_ZONE    = 0.06;
   const NEAR_DIST_SQ = 36 * 36;
+  const PATH_SAMPLE_COUNT = 560;
+  const HOOK_FRAME_MS = 1000 / 30;
+  const REPEAT_DELAY_MS = 400;
+
+  type PathSample = {
+    x: number;
+    y: number;
+    opacity: number;
+    nearest: number;
+  };
 
   /** Fade envelope: ramps in/out at path ends, 1.0 in the middle. */
   function fade(v: number): number {
@@ -330,6 +308,7 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
     if (!root) return;
 
     let stopAnim: (() => void) | null = null;
+    let rootInView = false;
     let activeIdx = -1;
     let currentMobile: boolean | null = null;
 
@@ -339,6 +318,18 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
     if (!dot || !nodeEls.length) return;
 
     const mql = window.matchMedia('(max-width: 639px)');
+    const reduceMotionMql = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    function stopAnimation() {
+      stopAnim?.();
+      stopAnim = null;
+      currentMobile = null;
+    }
+
+    function maybeStartAnimation() {
+      if (!rootInView || document.visibilityState === 'hidden' || reduceMotionMql.matches) return;
+      setupAnimation(mql.matches);
+    }
 
     function setupAnimation(isMobile: boolean) {
       if (isMobile === currentMobile) return;
@@ -365,51 +356,75 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
         };
       });
 
+      const samples: PathSample[] = Array.from({ length: PATH_SAMPLE_COUNT + 1 }, (_, sampleIndex) => {
+        const v = sampleIndex / PATH_SAMPLE_COUNT;
+        const pt = svgPath.getPointAtLength(v * totalLen);
+        let nearest = -1;
+        let bestSq = NEAR_DIST_SQ;
+
+        for (let i = 0; i < nodeCoords.length; i++) {
+          const dx = pt.x - nodeCoords[i].x;
+          const dy = pt.y - nodeCoords[i].y;
+          const dSq = dx * dx + dy * dy;
+          if (dSq < bestSq) { bestSq = dSq; nearest = i; }
+        }
+
+        return {
+          x: pt.x,
+          y: pt.y,
+          opacity: fade(v),
+          nearest,
+        };
+      });
+
       function highlightNode(idx: number) {
         if (idx === activeIdx) return;
         activeIdx = idx;
         nodeEls.forEach((el, i) => el.classList.toggle('active', i === idx));
       }
 
-      const controls = animate(0, 1, {
-        duration: CYCLE_DUR,
-        repeat: Infinity,
-        repeatDelay: 0.4,
-        ease: 'linear',
-        onUpdate(v: number) {
-          const f = fade(v);
-
-          const pt = svgPath!.getPointAtLength(v * totalLen);
-          dot!.setAttribute('cx', String(pt.x));
-          dot!.setAttribute('cy', String(pt.y));
-          dot!.setAttribute('opacity', String(f));
-          dot!.setAttribute('visibility', 'visible');
-
-          if (dotTrail) {
-            const pt2 = svgPath!.getPointAtLength(Math.max(0, v - TRAIL_LEAD) * totalLen);
-            dotTrail.setAttribute('cx', String(pt2.x));
-            dotTrail.setAttribute('cy', String(pt2.y));
-            dotTrail.setAttribute('opacity', String(f * 0.35));
-            dotTrail.setAttribute('visibility', 'visible');
-          }
-
-          trail!.style.strokeDashoffset = String(0.14 - v);
-          trail!.style.opacity = String(f * 0.35);
-
-          let nearest = -1;
-          let bestSq = NEAR_DIST_SQ;
-          for (let i = 0; i < nodeCoords.length; i++) {
-            const dx = pt.x - nodeCoords[i].x;
-            const dy = pt.y - nodeCoords[i].y;
-            const dSq = dx * dx + dy * dy;
-            if (dSq < bestSq) { bestSq = dSq; nearest = i; }
-          }
-          highlightNode(nearest);
-        },
-      });
+      const cycleMs = CYCLE_DUR * 1000;
+      const loopMs = cycleMs + REPEAT_DELAY_MS;
+      const startedAt = performance.now();
+
+      function updateFrame() {
+        const elapsed = (performance.now() - startedAt) % loopMs;
+        if (elapsed > cycleMs) {
+          dot!.setAttribute('opacity', '0');
+          dotTrail?.setAttribute('opacity', '0');
+          trail!.style.opacity = '0';
+          highlightNode(-1);
+          return;
+        }
+
+        const v = elapsed / cycleMs;
+        const sampleIndex = Math.min(PATH_SAMPLE_COUNT, Math.max(0, Math.round(v * PATH_SAMPLE_COUNT)));
+        const sample = samples[sampleIndex];
+
+        dot!.setAttribute('cx', String(sample.x));
+        dot!.setAttribute('cy', String(sample.y));
+        dot!.setAttribute('opacity', String(sample.opacity));
+        dot!.setAttribute('visibility', 'visible');
+
+        if (dotTrail) {
+          const trailIndex = Math.max(0, sampleIndex - Math.round(TRAIL_LEAD * PATH_SAMPLE_COUNT));
+          const trailSample = samples[trailIndex];
+          dotTrail.setAttribute('cx', String(trailSample.x));
+          dotTrail.setAttribute('cy', String(trailSample.y));
+          dotTrail.setAttribute('opacity', String(sample.opacity * 0.35));
+          dotTrail.setAttribute('visibility', 'visible');
+        }
+
+        trail!.style.strokeDashoffset = String(0.14 - v);
+        trail!.style.opacity = String(sample.opacity * 0.35);
+        highlightNode(sample.nearest);
+      }
+
+      updateFrame();
+      const intervalId = window.setInterval(updateFrame, HOOK_FRAME_MS);
 
       stopAnim = () => {
-        controls.stop();
+        window.clearInterval(intervalId);
         dot!.setAttribute('opacity', '0');
         dot!.setAttribute('visibility', 'hidden');
         dotTrail?.setAttribute('opacity', '0');
@@ -423,29 +438,46 @@ const straightPathD = `M ${CX} ${-44} L ${CX} ${VB_H + 44}`;
 
     const handleMediaChange = () => {
       const wasRunning = stopAnim !== null;
-      stopAnim?.();
-      stopAnim = null;
-      currentMobile = null;
-      if (wasRunning) setupAnimation(mql.matches);
+      stopAnimation();
+      if (wasRunning) maybeStartAnimation();
+    };
+
+    const handleMotionPreferenceChange = () => {
+      if (reduceMotionMql.matches) {
+        stopAnimation();
+      } else {
+        maybeStartAnimation();
+      }
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        stopAnimation();
+      } else {
+        maybeStartAnimation();
+      }
     };
 
     mql.addEventListener('change', handleMediaChange);
+    reduceMotionMql.addEventListener('change', handleMotionPreferenceChange);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
 
     const stopInView = inView(root, () => {
-      setupAnimation(mql.matches);
+      rootInView = true;
+      maybeStartAnimation();
       return () => {
-        stopAnim?.();
-        stopAnim = null;
-        currentMobile = null;
+        rootInView = false;
+        stopAnimation();
       };
     }, { margin: '-8% 0px' });
 
     hookFlowWindow.__bubHookFlowCleanup = () => {
       stopInView();
       mql.removeEventListener('change', handleMediaChange);
-      stopAnim?.();
-      stopAnim = null;
-      currentMobile = null;
+      reduceMotionMql.removeEventListener('change', handleMotionPreferenceChange);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      rootInView = false;
+      stopAnimation();
     };
   }
 
diff --git a/website/src/components/TapeModel.astro b/website/src/components/TapeModel.astro
index c1a1bda2..115114cc 100644
--- a/website/src/components/TapeModel.astro
+++ b/website/src/components/TapeModel.astro
@@ -210,13 +210,24 @@ const t = useTranslations(getLangFromUrl(Astro.url));
   }
 
   /* ── Animations ── */
-  .tape-live-dot   { animation: live-pulse   2s ease-in-out infinite; }
-  .tape-cursor-line { animation: cursor-blink 1s ease-in-out infinite; }
+  .tape-live-dot,
+  .tape-cursor-line {
+    animation-play-state: paused;
+  }
+  .tape-live-dot {
+    box-shadow: 0 0 6px var(--site-accent-live-shadow);
+  }
+  [data-tape-running] .tape-live-dot {
+    animation: live-pulse 2s ease-in-out infinite;
+  }
+  [data-tape-running] .tape-cursor-line {
+    animation: cursor-blink 1s ease-in-out infinite;
+  }
   .tape-live-label { color: var(--site-accent-live); opacity: 0.8; }
 
   @keyframes live-pulse {
-    0%, 100% { opacity: 1;   box-shadow: 0 0 6px var(--site-accent-live-shadow);  }
-    50%       { opacity: 0.4; box-shadow: 0 0 2px var(--site-accent-live-shadow-dim); }
+    0%, 100% { opacity: 1; }
+    50%      { opacity: 0.45; }
   }
   @keyframes cursor-blink {
     0%, 100% { opacity: 1; }
@@ -276,17 +287,39 @@ const t = useTranslations(getLangFromUrl(Astro.url));
 
     let active = false;
     let timers: number[] = [];
+    let controls: Array<{ stop: () => void }> = [];
+
+    function setRunning(running: boolean) {
+      viz.toggleAttribute('data-tape-running', running);
+    }
 
     function sched(fn: () => void, ms: number) {
       timers.push(window.setTimeout(() => { if (active) fn(); }, ms));
     }
 
+    function runAnimation(
+      target: Parameters<typeof animate>[0],
+      keyframes: Parameters<typeof animate>[1],
+      options: Parameters<typeof animate>[2],
+    ) {
+      const control = animate(target, keyframes, options);
+      controls.push(control);
+      return control;
+    }
+
+    function stopAnimations() {
+      controls.forEach((control) => control.stop());
+      controls = [];
+    }
+
     function clearTimers() {
       timers.forEach(clearTimeout);
       timers = [];
     }
 
     function reset() {
+      stopAnimations();
+      setRunning(false);
       if (header) header.style.opacity = '0';
       rows.forEach(r => {
         r.style.opacity = '0';
@@ -308,15 +341,16 @@ const t = useTranslations(getLangFromUrl(Astro.url));
       if (!active) return;
       clearTimers();
       reset();
+      setRunning(true);
 
       // ─ Phase 1: header
       sched(() => {
-        if (header) animate(header, { opacity: [0, 1] }, { duration: 0.3, ease: 'ease-out' });
+        if (header) runAnimation(header, { opacity: [0, 1] }, { duration: 0.3, ease: 'ease-out' });
       }, 60);
 
       // ─ Phase 2: staggered rows
       sched(() => {
-        animate(
+        runAnimation(
           rows,
           { opacity: [0, 1], y: [10, 0] },
           { delay: stagger(GAP, { start: BASE }), duration: 0.4, ease: [0.22, 1, 0.36, 1] }
@@ -331,7 +365,7 @@ const t = useTranslations(getLangFromUrl(Astro.url));
           sched(() => {
             const badge = row.querySelector('.tape-anchor-badge') as HTMLElement | null;
             if (badge) {
-              animate(badge, { scale: [0.85, 1.05, 1] }, { duration: 0.55, ease: [0.22, 1, 0.36, 1] });
+              runAnimation(badge, { scale: [0.85, 1.05, 1] }, { duration: 0.55, ease: [0.22, 1, 0.36, 1] });
               row.classList.add('tape-anchor-glow');
               sched(() => row.classList.remove('tape-anchor-glow'), 1500);
             }
@@ -353,24 +387,24 @@ const t = useTranslations(getLangFromUrl(Astro.url));
       sched(() => {
         if (!scan) return;
         const h = scan.parentElement?.scrollHeight ?? 300;
-        animate(scan, { opacity: [0, 0.7, 0.7, 0], y: [0, 0, h, h] }, { duration: 1.3, ease: [0.4, 0, 0.2, 1] });
+        runAnimation(scan, { opacity: [0, 0.7, 0.7, 0], y: [0, 0, h, h] }, { duration: 1.3, ease: [0.4, 0, 0.2, 1] });
       }, (ENTRANCE_END + 0.15) * 1000);
 
       // ─ Phase 5: cursor
       sched(() => {
-        if (cursor) animate(cursor, { opacity: [0, 1] }, { duration: 0.4, ease: 'ease-out' });
+        if (cursor) runAnimation(cursor, { opacity: [0, 1] }, { duration: 0.4, ease: 'ease-out' });
       }, (ENTRANCE_END + 0.5) * 1000);
 
       // ─ Phase 6: view assembly
       sched(() => {
-        if (viewEl) animate(viewEl, { opacity: [0, 1], y: [6, 0] }, { duration: 0.5, ease: [0.22, 1, 0.36, 1] });
+        if (viewEl) runAnimation(viewEl, { opacity: [0, 1], y: [6, 0] }, { duration: 0.5, ease: [0.22, 1, 0.36, 1] });
       }, (ENTRANCE_END + 1.2) * 1000);
 
       // ─ Phase 7: hold → fade out → loop
       const fadeAt = (ENTRANCE_END + 1.8 + HOLD) * 1000;
       sched(() => {
         const all = [header, ...rows, viewEl, cursor].filter(Boolean) as HTMLElement[];
-        animate(all, { opacity: 0 }, { duration: FADE, ease: 'ease-in' });
+        runAnimation(all, { opacity: 0 }, { duration: FADE, ease: 'ease-in' });
         sched(() => cycle(), (FADE + PAUSE) * 1000);
       }, fadeAt);
     }
@@ -383,7 +417,7 @@ const t = useTranslations(getLangFromUrl(Astro.url));
         clearTimers();
         reset();
       };
-    }, { margin: '-10% 0px' });
+    }, { margin: '-20% 0px -20% 0px' });
 
     tapeAnimationWindow.__bubTapeAnimationCleanup = () => {
       stopInView();
diff --git a/website/src/components/Testimonials.astro b/website/src/components/Testimonials.astro
index fd58569d..a1b86002 100644
--- a/website/src/components/Testimonials.astro
+++ b/website/src/components/Testimonials.astro
@@ -97,6 +97,7 @@ const columns = columnConfigs.map((config, columnIndex) => ({
 
   :global([data-testimonials-playing]) .testimonial-col > div {
     animation-play-state: running;
+    will-change: transform;
   }
 
   :global([data-testimonials-playing]:hover) .testimonial-col > div,
@@ -131,16 +132,47 @@ const columns = columnConfigs.map((config, columnIndex) => ({
     const wrapper = document.querySelector('[data-testimonials]') as HTMLElement | null;
     if (!wrapper) return;
 
+    let wrapperInView = false;
+    const reduceMotionMql = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    function setPlaying(playing: boolean) {
+      wrapper.toggleAttribute('data-testimonials-playing', playing);
+    }
+
+    function maybePlay() {
+      setPlaying(
+        wrapperInView &&
+        document.visibilityState !== 'hidden' &&
+        !reduceMotionMql.matches,
+      );
+    }
+
+    const handleMotionPreferenceChange = () => {
+      maybePlay();
+    };
+
+    const handleVisibilityChange = () => {
+      maybePlay();
+    };
+
+    reduceMotionMql.addEventListener('change', handleMotionPreferenceChange);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
     const stopInView = inView(wrapper, () => {
-      wrapper.setAttribute('data-testimonials-playing', '');
+      wrapperInView = true;
+      maybePlay();
       return () => {
-        wrapper.removeAttribute('data-testimonials-playing');
+        wrapperInView = false;
+        setPlaying(false);
       };
     }, { margin: '-5% 0px' });
 
     testimonialsWindow.__bubTestimonialsCleanup = () => {
       stopInView();
-      wrapper.removeAttribute('data-testimonials-playing');
+      reduceMotionMql.removeEventListener('change', handleMotionPreferenceChange);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      wrapperInView = false;
+      setPlaying(false);
     };
   }