Motion Sensitivity & `prefers-reduced-motion`

Dynamic animations, smooth parallax scrolling, and flashy page transitions can look stunning to many users, but for individuals with vestibular disorders, they cause physical dizziness, nausea, and vertigo.

Modern operating systems (macOS, iOS, Windows, Android) include a user setting called Reduce Motion.

A design system honors this preference using the CSS media query @media (prefers-reduced-motion: reduce):

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

In the design system, motion tokens should automatically evaluate this preference, replacing sweeping zooms and slide-ins with subtle cross-fades or instant state transitions.