Add reduced motion for the trace viewer

.changeset/yellow-pianos-relax.md

@@ -0,0 +1,5 @@
+---
+"@workflow/web-shared": patch
+---
+
+Add reduced motion for the trace viewer 

packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx

@@ -10,6 +10,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useReducedMotion } from '../../hooks/use-reduced-motion';
 import { ErrorBoundary } from '../error-boundary';
 import {
   EntityDetailPanel,
@@ -51,6 +52,7 @@ function useAnimatedViewport(initial: Viewport) {
   } | null>(null);
   const currentRef = useRef(initial);
   currentRef.current = viewport;
+  const reducedMotion = useReducedMotion();
 
   const cancel = useCallback(() => {
     if (animRef.current) {
@@ -62,6 +64,13 @@ function useAnimatedViewport(initial: Viewport) {
   const animateTo = useCallback(
     (target: Viewport) => {
       cancel();
+
+      if (reducedMotion) {
+        currentRef.current = target;
+        setViewportState(target);
+        return;
+      }
+
       const from = currentRef.current;
       const anim = { raf: 0, from, to: target, start: performance.now() };
 
@@ -79,7 +88,7 @@ function useAnimatedViewport(initial: Viewport) {
       animRef.current = anim;
       anim.raf = requestAnimationFrame(tick);
     },
-    [cancel]
+    [cancel, reducedMotion]
   );
 
   const setViewport = useCallback(

packages/web-shared/src/hooks/use-reduced-motion.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-motion: reduce)';
+
+/**
+ * Hook that detects whether the user has requested reduced motion and reacts
+ * to changes. Mirrors the `prefers-reduced-motion: reduce` media query so
+ * components can skip or shorten animations for users with motion
+ * sensitivities (e.g. vestibular disorders).
+ *
+ * @returns `true` if the user prefers reduced motion, `false` otherwise
+ */
+export const useReducedMotion = (): boolean => {
+  const [reduced, setReduced] = useState(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+
+    const media = window.matchMedia(QUERY);
+    const onChange = (): void => setReduced(media.matches);
+
+    media.addEventListener('change', onChange);
+    onChange();
+
+    return () => media.removeEventListener('change', onChange);
+  }, []);
+
+  return reduced;
+};