Prefers Reduced Motion

Prefers reduced motion is a media query that detects when a user has asked their device to limit animation. It exists because not everyone experiences motion the same way. Vestibular disorders, migraines, ADHD, and even simple fatigue make certain transitions physically unpleasant. The query lets you ship a responsible fallback instead of forcing your cool transitions on everyone.

Respecting prefers reduced motion is not the same as stripping all animation. That is the common mistake. Turning every slide into a hard cut creates its own usability problems. The correct move is replacing distance based motion with opacity based motion. The state change still registers. The vestibular trigger disappears. Teams that miss this distinction treat accessibility as a checklist item instead of a design constraint.

Apple's Human Interface Guidelines updated in 2024 to show the right pattern. A card that normally slides up 40 pixels fades in instead when the query triggers. The timing stays identical. The information stays complete. Linear's settings panel does the same. Their normally bouncy toggle becomes a simple scale and opacity shift. Users with the preference enabled never mention motion sickness in support tickets. Teams that ignore the query face increasing compliance risk under the European Accessibility Act.

Implement this early in your design system. Create a reduced motion variant for every component that moves more than 20 pixels. Test it by toggling the setting in dev tools. If anything still triggers discomfort rebuild it. The 2026 reality is that regulators treat this as enforceable. Shipping without it is no longer a style choice. It is a liability.

Use the reduced motion path on every product interface that ships to the public. Marketing sites can sometimes lean harder into motion for conversion impact but even there consider offering a static version. Avoid it only in closed internal tools where you control the exact user hardware and have explicit consent. The tradeoff is design effort. You now maintain two variants of every transition. The reward is users who do not abandon your product because it literally makes them nauseous.

The query forces better initial decisions. When you know a distance based animation will be replaced with opacity you design the fade version first. That constraint often improves the primary version too. Senior teams treat prefers reduced motion as a design partner not an afterthought.

Audit every animation against this setting during review. Toggle it on. Walk the full flow. Anything that still feels wrong gets rebuilt. Most products fail this test on first pass because no one checked until launch week. Build the habit early.

Prefers reduced motion is the canary in the coal mine for overdesigned interfaces. If your motion cannot survive the query it was never as necessary as you thought.

Respect the query. Swap distance for opacity. Keep the meaning. Lose the harm. That is professional motion design in 2026.