Motion · Learn · Guide

Reduce motion, don't remove it

prefers-reduced-motion is a request to avoid motion that can trigger vestibular discomfort — large travel, spring overshoot, parallax. It is not a request for a static interface. A fade that still tells you a menu opened is both safe and useful, so Etesie keeps it.

What changes, and why

Neutralized

The three spatial springs and every long and extra-long duration resolve to 1ms. Spatial motion is exactly the class the preference is about — travel, scale, overshoot — and long durations exist to give large travel time it no longer needs.

Deliberately kept

Short and medium durations stay because a 200ms state change is not what the preference is about. Effects springs stay because opacity and colour carry no spatial motion at all — they are the safe channel that still communicates change.

The override ships as a @media (prefers-reduced-motion: reduce) block in the generated stylesheet. Consumers that animate with tokens get it for free — there is nothing to opt into. The live override table shows exactly which tokens your theme re-points, and the code to write when you animate imperatively.