prefers-reduced-motion: what to turn off and what to keep

Some people get dizzy or nauseous from motion on screens, and every major operating system has a setting to ask apps to reduce it. The web reads that setting through one media query. What the site does with it is up to you, and the common answers, all or nothing, are both wrong.

What to remove

• Parallax and scroll-linked movement.
• Elements that slide in from far off screen.
• Zooms, spins and large scale changes.
• Auto-playing video backgrounds and looping animation.
• Smooth scrolling on anchor links.

What to keep

• Colour and opacity changes on hover and press.
• Short fades that show something appeared or went away.
• Focus rings and state changes, which are information, not decoration.

The CSS pattern

Write motion as tokens, then zero the movement ones in one place:

:root {
  --dur-fast: 120ms;
  --dur-slow: 400ms;
  --rise: 16px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-slow: 1ms; --rise: 0px; }
  html { scroll-behavior: auto; }
}
.reveal { transition: opacity var(--dur-slow), transform var(--dur-slow);
          transform: translateY(var(--rise)); }

Every component that uses the tokens now respects the setting, and nobody has to remember to add a media query to each new animation.

The JavaScript pattern

const reduce = matchMedia("(prefers-reduced-motion: reduce)");
function animate(el) {
  if (reduce.matches) return el.classList.add("is-in");
  // start the spring, parallax or scroll effect here
}

Animation libraries such as Motion can read the setting for you. This site uses Motion for a headline spring, card hover lift and hero parallax, and all three are off under reduced motion.

Test it

Turn the setting on in your operating system, or emulate it in browser dev tools under rendering options, and click through the site. It takes five minutes and it is part of the accessibility checks we run on every change, along with contrast.

Warm Storefront UI includes this site's motion as tokens, so Claude writes animations that switch off correctly under reduced motion from the first screen.