> ## Documentation Index
> Fetch the complete documentation index at: https://substrate.docs.unknowncreatives.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Motion Token Reference

> Substrate's continuous motion model: one brand base duration scaled by the user's motion factor, one authored easing — no named duration steps.

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`:

```css theme={null}
--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.

<Note>
  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.
</Note>

<Card title="Config: Motion" icon="wand-magic-sparkles" href="/brand-config/motion">
  How to author duration-base and easing in a brand config.
</Card>