accessibility
Reduced motion
What is reduced motion (prefers-reduced-motion)?
Reduced motion is honouring a user's request to cut animation. Movement on screen makes some people dizzy, nauseous or worse; the prefers-reduced-motion setting is them asking you to keep things still, and a good interface listens.
Also known as: prefers-reduced-motion, motion sensitivity, vestibular safe
The demo
Watch the panel arrive, then switch modes and replay. One version is lively; the other is calm - and for a lot of people, calm is the difference between usable and unwell.
What this demo shows (text version)
A panel animates into view. In "full motion" it slides up and overshoots with a bounce - the kind of decorative movement that looks energetic but can trigger dizziness or nausea in people with vestibular sensitivity. In "reduced motion" the same panel simply fades in, conveying the same arrival without the lurch.
The demo also reports your operating system's "reduce motion" preference. If it is switched on, the page respects it automatically - the CSS prefers-reduced-motion media query softens even the "full" animation - which is exactly what every site should do: treat the setting as an instruction, not a suggestion.
With motion on, the panel flew in - lively for some, genuinely sickening for others. Switch to reduced and it simply appears, losing nothing that mattered. This page already checks your own system setting and quietens itself if you have asked it to.
This is not a niche nicety. Vestibular disorders are common, and large parallax, zoom and spin effects can set off real dizziness and nausea - the accessibility equivalent of a strobe. The CSS prefers-reduced-motion media query exposes the operating-system setting in a single line, so respecting it costs almost nothing.
"Reduced" rarely means "none". Keep the motion that carries meaning - a gentle fade, a state change you would otherwise miss - and drop the decorative excess: the long slides, the parallax, the bounce. The test is whether an animation tells the user something, or just shows off.