# Motion

- Motion explains a change: where something came from, where it went, what changed.
- Durations: 150–250 ms for small UI, up to 400 ms for panels. Springs for things you drag or touch.
- Enter with opacity + 4–12 px translate. Exit faster than enter.
- Numbers roll in the direction they changed. Charts morph between datasets instead of redrawing.
- Never animate layout on every keystroke, never block input while animating, never loop decorative motion near text people read.
- Respect reduced motion: wrap the app in `<MotionConfig reducedMotion="user">` and use `motion-safe:` for CSS animations.