Motion

Generate timing and easing values from motion presets.

Core principles

  • Use motion to explain state changes.
  • Keep interactive transitions short and respect reduced-motion preferences.

Model

  • Motion presets produce duration and easing tokens.
  • Tools calculate spring and minimum-jerk trajectories.

Use in your app

  • Use transitions for opening, closing, and state changes.
  • Review moving overlays and reduced-motion behavior in the browser.

Verification scope

  • Motion fixtures compare declared durations with configured bounds. They do not test reduced-motion behavior or rendered animation.

Token notes

  • Motion tokens feed transitions and overlays.