Reduced motion preference is respected

For users with vestibular disorders, conditions like PPPD (Persistent Postural-Perceptual Dizziness) or Meniere's disease, parallax scrolling, auto-playing carousels, and animated page transitions can trigger nausea, vertigo, and seizure-like symptoms. These users configure their OS to prefer reduced motion as a medical accommodation. WCAG 2.2 SC 2.3.3 (Animation from Interactions) — a AAA criterion — requires that motion animation triggered by interaction can be disabled. Section 508 2018 Refresh 302.1 covers a general right to usability. Even at AA, animations that play unconditionally violate reasonable usability expectations for a significant user population. The prefers-reduced-motion media query is supported in all major browsers and is a one-to-one signal from user OS settings.

Add a global prefers-reduced-motion override to your CSS that kills durations rather than animations entirely — this preserves state changes while removing kinetic movement.

/* globals.css */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

For JavaScript animations (Framer Motion, GSAP, CSS-in-JS), check the preference at runtime:

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

// In Framer Motion
<motion.div
  animate={{ x: 100 }}
  transition={{
    duration: prefersReducedMotion ? 0 : 0.3,
  }}
/>

// Or use the built-in hook
import { useReducedMotion } from 'framer-motion';
const shouldReduce = useReducedMotion();

Autoplay carousels and video backgrounds should pause entirely — not slow down — when reduced motion is preferred. The scroll-behavior: auto override prevents smooth scroll from triggering vestibular reactions.