Motion

Motion serves three functions: orientation, feedback, and identity. Every transition should map to one of these purposes.

Duration Scale

Click any card to preview the duration. Each token maps to a specific range of interaction complexity.

Easing Curves

Click a card to see the easing in action. Each curve has a distinct character suited to different interaction types.

Do's and Don'ts

Guidelines for applying motion consistently and responsibly.

Do

  • Use ease-orbital for transitions > 300ms
  • Use ease-default for hover and focus
  • Match duration to distance
  • Always use reduced-motion fallback

Don't

  • Animate layout properties (width, height)
  • Use duration > 600ms in product UI
  • Use linear easing for user-triggered animation
  • Add motion that doesn't serve orientation, feedback, or identity