fix(accessibility): respect reduced motion in animated components

Author: phh235

src/components/common/preview-video.tsx

@@ -64,12 +64,13 @@ export function PreviewVideo({
     card.addEventListener("focusout", pause);
     return () => {
       io.disconnect();
+      video.pause();
       card.removeEventListener("pointerenter", play);
       card.removeEventListener("pointerleave", pause);
       card.removeEventListener("focusin", play);
       card.removeEventListener("focusout", pause);
     };
-  }, []);
+  }, [src]);
 
   return (
     <video

src/components/landing/hero-reel.tsx

@@ -93,6 +93,7 @@ export function HeroReel({
     if (!holder) return;
     const components = itemsRef.current;
     const count = components.length;
+    if (count === 0) return;
     const step = (Math.PI * 2) / count;
     const fitMaxHalfHeight = step * FIT_MAX_RATIO;
     const wideHalfHeight = step * WIDE_RATIO;
@@ -214,7 +215,9 @@ export function HeroReel({
     const resizeObserver = new ResizeObserver(resize);
     resizeObserver.observe(holder);
 
+    let disposed = false;
     document.fonts?.ready.then(() => {
+      if (disposed) return;
       rows.forEach((row, i) => {
         row.aspect = drawLabel(
           row.texture.image as HTMLCanvasElement,
@@ -255,12 +258,14 @@ export function HeroReel({
       "(prefers-reduced-motion: reduce)",
     ).matches;
     let tick = 0;
-    const interval = window.setInterval(() => {
-      if (!pausedRef.current && !reducedMotion && !document.hidden) {
-        tick += 1;
-        onActiveChangeRef.current?.(tick % count);
-      }
-    }, 5000);
+    const interval = reducedMotion
+      ? null
+      : window.setInterval(() => {
+          if (!pausedRef.current && !document.hidden) {
+            tick += 1;
+            onActiveChangeRef.current?.(tick % count);
+          }
+        }, 5000);
 
     let rotation = 0;
     let push = 0;
@@ -306,6 +311,10 @@ export function HeroReel({
         row.mesh.renderOrder = Math.round(row.alpha * 100);
       });
       renderer.render(scene, camera);
+      if (reducedMotion) {
+        running = false;
+        return;
+      }
       raf = requestAnimationFrame(animate);
     };
 
@@ -344,8 +353,9 @@ export function HeroReel({
     start();
 
     return () => {
+      disposed = true;
       stop();
-      window.clearInterval(interval);
+      if (interval !== null) window.clearInterval(interval);
       themeObserver.disconnect();
       resizeObserver.disconnect();
       viewObserver.disconnect();

src/components/landing/hero-reveal.tsx

@@ -35,6 +35,19 @@ export function HeroReveal({
     let last = performance.now();
     let inView = true;
     let running = false;
+    const reducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+    let hostRect = host.getBoundingClientRect();
+
+    const updateHostRect = () => {
+      hostRect = host.getBoundingClientRect();
+    };
+
+    const resizeObserver = new ResizeObserver(updateHostRect);
+    resizeObserver.observe(host);
+    window.addEventListener("resize", updateHostRect);
+    window.addEventListener("scroll", updateHostRect, { passive: true });
 
     const onMove = (event: PointerEvent) => {
       if (event.isTrusted) userActive = true;
@@ -58,20 +71,19 @@ export function HeroReveal({
           0.5 + 0.34 * Math.sin(t * 0.37) + 0.14 * Math.sin(t * 0.93 + 1.7);
         const ny =
           0.5 + 0.3 * Math.sin(t * 0.53 + 0.8) + 0.14 * Math.sin(t * 1.19 + 4.1);
-        const rect = host.getBoundingClientRect();
         target.dispatchEvent(
           new PointerEvent("pointermove", {
             bubbles: true,
-            clientX: rect.left + rect.width * nx,
-            clientY: rect.top + rect.height * ny,
+            clientX: hostRect.left + hostRect.width * nx,
+            clientY: hostRect.top + hostRect.height * ny,
           }),
         );
       }
       raf = requestAnimationFrame(tick);
     };
 
     const start = () => {
-      if (running || !inView || document.hidden) return;
+      if (reducedMotion || running || !inView || document.hidden) return;
       running = true;
       last = performance.now();
       raf = requestAnimationFrame(tick);
@@ -107,7 +119,10 @@ export function HeroReveal({
     return () => {
       stop();
       observer.disconnect();
+      resizeObserver.disconnect();
       document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.removeEventListener("resize", updateHostRect);
+      window.removeEventListener("scroll", updateHostRect);
       host.removeEventListener("pointermove", onMove, true);
       host.removeEventListener("pointerleave", onLeave, true);
     };

src/demos/demo-image-cycler.tsx

@@ -45,15 +45,39 @@ export function DemoImageCycler({
   interval?: number;
 }) {
   const shouldReduceMotion = useReducedMotion();
-  const [active, setActive] = useState(0);
+  const imageCount = images.length;
+  const [activeIndex, setActiveIndex] = useState(0);
 
   useEffect(() => {
-    const id = setInterval(
-      () => setActive((prev) => (prev + 1) % images.length),
-      interval,
-    );
-    return () => clearInterval(id);
-  }, [images.length, interval]);
+    if (shouldReduceMotion || imageCount < 2 || interval <= 0) return;
+
+    let timer: ReturnType<typeof setInterval> | null = null;
+    const stop = () => {
+      if (timer === null) return;
+      clearInterval(timer);
+      timer = null;
+    };
+    const start = () => {
+      if (timer !== null || document.hidden) return;
+      timer = setInterval(
+        () => setActiveIndex((prev) => (prev + 1) % imageCount),
+        interval,
+      );
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) stop();
+      else start();
+    };
+
+    start();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [imageCount, interval, shouldReduceMotion]);
+
+  const active = imageCount === 0 ? 0 : activeIndex % imageCount;
 
   return (
     <div className="relative aspect-video w-full overflow-hidden">