Reduced motion

The sweep’s worklist

Degrade or delete

The 0.01s finding

The rule, as code

The degrade branch — css
/* Movement is a multiplier, so the policy has one place to land. */
.surface {
  --motion-translate: 1;
  --motion-scale: 1;
  transform: translateY(calc(8px * var(--motion-translate)))
             scale(calc(1 - 0.06 * var(--motion-scale)));
  transition:
    transform var(--duration-enter) var(--ease-entry),
    opacity var(--duration-enter) var(--ease-entry),
    background-color var(--duration-state) var(--ease-state);
}
​
/* Degrade: movement goes, opacity and colour stay. Not display: none for
   motion — the feedback is the point, the travel is the problem. */
@media (prefers-reduced-motion: reduce) {
  .surface {
    --motion-translate: 0;
    --motion-scale: 0;
  }
​
  /* Loops stop. They do not slow down: slower vestibular motion is still
     vestibular motion, and a 3s spinner reads as a hung interface. */
  .spinner,
  .progressIndeterminate {
    animation: none;
  }
}
​
/* Hover motion is gated on a fine pointer as well. A touch device fires a
   hover on tap, so an un-gated hover animation runs on every tap. */
@media (hover: hover) and (pointer: fine) {
  .row:hover {
    transform: translateY(calc(-1px * var(--motion-translate)));
  }
}
​
/* An app with its own reduce-motion setting can flip a JS library but cannot
   flip a media query, so the same rules answer to an attribute too. */
[data-reduced-motion='reduce'] .surface {
  --motion-translate: 0;
  --motion-scale: 0;
}

useReducedMotion() — the JS half of the same policy — tsx
/**
 * The JS half of the same policy. Charts, canvas and any motion library read
 * this; CSS reads the media query. They have to agree, or a chart animates
 * while the interface around it does not.
 */
export function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState(() =>
    typeof window === 'undefined'
      ? false
      : window.matchMedia('(prefers-reduced-motion: reduce)').matches,
  );
​
  useEffect(() => {
    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
    const onChange = (event: MediaQueryListEvent) => setReduced(event.matches);
    query.addEventListener('change', onChange);
    return () => query.removeEventListener('change', onChange);
  }, []);
​
  // The app-level override, so a product setting can force the policy on
  // without touching the OS. Same attribute the CSS above answers to.
  const forced = useContext(MotionPreferenceContext);
  return forced ?? reduced;
}