Motion

Rule

Motion explains state change. It does not decorate an idle screen, simulate execution, or delay content. Animate opacity and transform only. Product surfaces do not animate on load. A brand page may use one orchestrated entrance with no more than six steps.

Use ease-out motion without bounce, elastic overshoot, parallax, or scroll control. Under prefers-reduced-motion, every transition collapses to the reduced-motion cross-fade defined by the design system. A genuine progress indicator is the single exception: it keeps looping at components.spinner.duration, because collapsing it would remove the report that work is still running rather than remove decoration.

Token contract

State changes use the design system's state duration, enter and exit use its enter duration, and overlays use its overlay duration. A continuous progress indicator is not a transition and uses components.spinner.duration instead. The named ease-out-quart and ease-out-expo curves are the only easing choices. Component motion still consumes the surface, spacing, and elevation recipes that own the resting states.

Correct example

A side panel enters once with opacity and transform, focus moves into it, and Escape returns focus to the control that opened it. Reduced-motion users receive the same content and focus change with only the minimal cross-fade.

Rejected example

A product page staggers every row on load, animates height during filtering, and uses a spring to make the panel overshoot. Its reduced-motion rule also freezes the loading indicator, so a running task and a hung one look identical. An agent must wait for information, and reduced motion changes the experience rather than only the transition.

Reasoning

See the motion rationale and the deterministic rendering requirements in the agent persona.