Animation on the web is often deployed without considering users with vestibular disorders, for whom motion can trigger nausea, dizziness, or worse. The prefers-reduced-motion media query exists to address this — but most teams apply it inconsistently, per-component, if at all.
The System
All animation durations and easing curves are defined as CSS custom properties. A single media query at the root level overrides them to near-zero for users who prefer reduced motion:
:root {
--duration-fast: 100ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
--easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-normal: 0ms;
--duration-slow: 0ms;
}
}
Every component uses these tokens. None of them contain a hardcoded duration or a per-component media query. The system is safe by construction.
The Outcome
The design system now has a documented motion policy. New components are reviewed against it before merge. No vestibular-unsafe animation has shipped since adoption.