Skip to content
Skip design navigation
Etesie Alpha
Loading account
← Back to the pairing picker
Motion · Use the system · Guide

Reduced motion, applied

What the generated override block changes in this theme, and what to write yourself when tokens cannot reach your animation. Why the split runs exactly this way is the Learn guide.

This browser currently reports no-preference. Every preview on these pages already honours it.

Generated override block

14 tokens are re-pointed

Emitted as a @media (prefers-reduced-motion: reduce) block. Consumers that reference tokens get this for free — there is nothing to opt into.

Motion tokens changed under reduced motion
TokenNormalReduced
--et-motion-spring-fast-spatial-easingsampled curvelinear(0, 1)
--et-motion-spring-fast-spatial-duration350ms1ms
--et-motion-spring-default-spatial-easingsampled curvelinear(0, 1)
--et-motion-spring-default-spatial-duration500ms1ms
--et-motion-spring-slow-spatial-easingsampled curvelinear(0, 1)
--et-motion-spring-slow-spatial-duration750ms1ms
--md-sys-motion-duration-long1450ms1ms
--md-sys-motion-duration-long2500ms1ms
--md-sys-motion-duration-long3550ms1ms
--md-sys-motion-duration-long4600ms1ms
--md-sys-motion-duration-extra-long1700ms1ms
--md-sys-motion-duration-extra-long2800ms1ms
--md-sys-motion-duration-extra-long3900ms1ms
--md-sys-motion-duration-extra-long41000ms1ms
Deliberately unchanged

32 tokens keep their value

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.

  • --md-sys-motion-duration-short150ms
  • --md-sys-motion-duration-short2100ms
  • --md-sys-motion-duration-short3150ms
  • --md-sys-motion-duration-short4200ms
  • --md-sys-motion-duration-medium1250ms
  • --md-sys-motion-duration-medium2300ms
  • --md-sys-motion-duration-medium3350ms
  • --md-sys-motion-duration-medium4400ms
  • --et-motion-scheme-standard-fast-effects-easingcubic-bezier(0.31, 0.94, 0.34, 1)
  • --et-motion-scheme-standard-fast-effects-duration150ms
  • --et-motion-scheme-standard-default-effects-easingcubic-bezier(0.34, 0.8, 0.34, 1)
  • --et-motion-scheme-standard-default-effects-duration200ms

…and 20 more. The complete list is in the Token reference.

Writing your own reduced-motion code

If you animate with tokens, you are already done. If you animate imperatively — the Web Animations API, a JS spring library, a canvas loop — the tokens cannot reach you, so check the preference yourself and skip straight to the end state.

if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
  element.style.transform = endTransform; // no tween
} else {
  element.animate(frames, {
    duration: 500,
    easing: 'var(--et-motion-spring-default-spatial-easing)'
  });
}

The shape-morph builder does exactly this: with the preference set it jumps to the final silhouette instead of running the sequence.