Motion

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

Duration and easing

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

The four steps

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.

Choosing a step

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

Reduced motion

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.

Tokens

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

Related

See Modal and Sheet for overlay timing, and Accordion for a state change on the base step.