Motion — Refrain

Why motion is a governance problem

Motion is the one part of an interface that can hurt someone. Vestibular disorders make large, spatial animation genuinely unpleasant rather than merely unwanted, and the people affected have already told their operating system so. That signal is a safety instruction, and the system treats it as one.

But there is a second, weaker preference underneath it — people who find animation fussy and want less theatre without losing the small feedback that tells them a control responded. Collapsing those two into one switch strands one group or the other. Keeping them apart is the entire design.

Duration scale

Every animated stop picks from this scale. A raw millisecond value in a component is a review failure, not a preference — which is what keeps two products feeling like one.

--duration-instant 50ms
--duration-press 80ms
--duration-fast 150ms
--duration-sheet-close 240ms
--duration-base 250ms
--duration-medium 300ms
--duration-sheet-open 380ms
--duration-slow 400ms
--duration-skeleton-settle 420ms
--duration-slower 600ms
--duration-hero 900ms
--duration-settle 2200ms

Easing scale

Curves are named for the job they do. Each one below is plotted from its own control points, so the shape you see is the shape that ships.

--ease-out-expo cubic-bezier(0.16, 1, 0.3, 1)
--ease-linear linear
--ease-out cubic-bezier(0, 0, 0.2, 1)
--ease-spring cubic-bezier(0.34, 1.56, 0.64, 1)
--ease-in-out cubic-bezier(0.65, 0, 0.35, 1)
--ease-water cubic-bezier(0.22, 1, 0.36, 1)

The two off-switches

Reduced motion is not one preference. Conflating them either strands people who need motion gone, or strips feedback from people who only wanted less theatre.

The system setting

A safety signal, and it is treated as one: it removes everything animated, including the small feedback that survives the other switch. Nothing overrides it.

The in-app preference

A taste signal — “less theatre”. It removes journey motion and leaves micro motion in place. It can only ever add reduction: it never re-enables motion the system turned off.

Journey or micro

Every animation is classified before it ships, because the two switches above need to know which is which. Where the rules conflict, the answer is journey — reduce more, never less.

Journey

Moves something through space, runs long, loops or staggers, tweens a chart, draws an SVG, drifts in the background, or brings a surface on and off screen.

Micro

Single-shot and brief, with nothing displaced: a fade in place, a colour or state flip, a number ticking up, press feedback, one property settling.

Where the rule is deliberately not applied

Two classes of animation opt out on purpose. Naming them is the point — a rule presented without its exceptions is a rule nobody can check.

Micro motion, system signal only: Small feedback that is meant to survive the in-app preference gates on the system setting alone. Wiring it to both switches would be the bug, so it is asserted to have exactly one gate rather than left to judgement.
Journey motion gated before the styles run: Some journey motion is decided in code — the animation is never set at all when either signal is on — so there is no style rule left to gate. These are held to proving the code-level gate instead, because an automated sweep for the style rule would score them as compliant while finding nothing.

See it work

The demonstration below is journey motion, gated exactly the way the products gate theirs. Turn on reduced motion at the top of this page, or in your system settings, and it stops.