# Motion

Binary UIKit animates with curves rather than linear timing. Transitions are fast enough to feel responsive and curved enough to feel alive.

<h2 id="purpose">Duration and easing</h2>

Motion is expressed as one value that carries duration and easing. Components use stable semantic steps, while each preset can tune the resulting pace.

<h2 id="anatomy">The four steps</h2>

`fast` covers hover, focus, and small states. `base` is the common control step. `slow` covers large surfaces and overlays. `spring` is the emphasis recipe.

Graphite Light and Graphite Dark use 90, 140, 220, and 260 ms without spring overshoot. Blueprint Light and Blueprint Dark use 120, 200, 320, and 520 ms.

<h2 id="usage">Choosing a step</h2>

Default to `base`. Use `fast` for small changes that repeat often. Use `slow` when a large surface enters or leaves. Reserve `spring` for emphasis.

<h2 id="accessibility">Reduced motion</h2>

Honor `prefers-reduced-motion` in product code: shorten or remove movement and keep the state change itself visible. Never make an animation the only signal that something happened.

<h2 id="tokens">Tokens</h2>

`--bd-motion-fast`, `--bd-motion-base`, `--bd-motion-slow`, and `--bd-motion-spring` come from the merged motion axis through `Provider`. `BD_TOKENS.motion` supplies Graphite Light defaults, and `BDThemeOverrides.motion` can replace individual steps.

<h2 id="related">Related</h2>

See [Modal](/docs/components/modal) and [Sheet](/docs/components/sheet) for overlay timing, and [Accordion](/docs/components/accordion) for a state change on the base step.