Motion

This skill holds how things move on every screen. It covers what animates, the curve and duration, gestures, exits, motion blur and reduced motion.

Durations and curves are exact

Use the project's motion tokens wherever they exist. Where none exists, the durations, curves and scales here are exact. Motion the user starts that runs past 300ms is a finding in any style.

Motion blur draws with @web-kits/motion-blur, whose defaults are exact: a 180° shutter, Echo at one copy per 1.5px up to 16 copies and a 1.05 smear limit.

Whether an animation should exist at all belongs to restraint. Taking an existing animation apart belongs to deconstruct. Whether it holds its frame rate belongs to frames. Surfaces, loading, hover styles and sound belong to defaults.

App chrome fades

Page switches, panels and loading states fade with opacity and do not slide or scale. That is motion-opacity-for-chrome. Animate only the axis that changes. Animating width when only height changes is motion-changing-axis-only.

Entrances do not replay

Switching pages does not replay entrances. Set initial={false} on the route-level AnimatePresence, and on any that wraps a state swap. That is motion-no-replay-on-entry. A cached view renders at once, with no fade or skeleton flash. That is motion-no-flash-on-return. See recipes.md.