Motion Token Reference

Substrate has no named duration tokens — no fast/normal/slow steps and no --ease-* set. Motion is one continuous product, from generated/global/css/tokens.gen.css:

--duration: calc(var(--duration-base) * var(--motion-factor));

The three motion variables

Variable	Source	Description
`--duration-base`	`motion.duration-base`	The brand’s base duration in ms. Authored values differ widely across the bundled demo brands — from 75 to 200.
`--motion-factor`	runtime preference	The user’s continuous motion preference, 0 (instant) → 1 (full brand duration). Defaults to 0.75, and the brand bounds it via `flexibility.motion`.
`--easing`	`motion.easing`	The brand’s single authored easing string — one brand may ship `cubic-bezier(0.25, 0.1, 0.25, 1)` where another ships `linear`.

Components don’t pick from a duration menu; their style descriptors carry a duration multiple, so a component’s transition is duration-base × motionFactor × multiplier. In generated CSS this surfaces as --surface-transition-duration, --surface-transition-delay, and --surface-transition-timing.

Reduced motion

Reduced motion is handled by the runtime, not by a generated media-query block: when prefers-reduced-motion: reduce matches, the runtime sets motionFactor to 0, which zeroes every resolved duration through the single formula above. Because motionFactor is a user preference, motion sensitivity is also adjustable between 0 and 1 — it is not a binary switch.

A brand can constrain how much motion users can dial in with flexibility.motion (min/max) — for example pinning max below 1 for a deliberately restrained product.

Config: Motion

How to author duration-base and easing in a brand config.

​The three motion variables

​Reduced motion

Config: Motion

The three motion variables

Reduced motion