Motion and Animation
01 Why Motion Needs a ReasonFree preview Motion is a budget spent from the user's attention — demand a named purpose, and scale the allowance by frequency. 02 Duration and SpeedFree preview Keep interface motion under 300ms, front-load the movement, and let exits run faster than entrances. 03 Easing Is Everything Ease-out for anything entering or exiting, ease-in-out for movement within the screen — and never ease-in on interface elements. 04 Animate the Cheap Properties Build motion from transform and opacity, prefer percentage transforms, and never enter from scale(0). 05 Enter, Exit, and Interruption Leave the way you arrived, faster; grow out of the trigger; and build state changes on transitions so interruptions reverse smoothly. 06 Choreography and Stagger Cascade arrivals with a 30–80ms stagger, cap the parade on long lists, and keep one animation leading at a time. 07 Springs and Gestures Curves for scripted motion, springs for motion the user co-authors — drags, flicks, and anything interruptible mid-flight. 08 Accessible Motion Honor prefers-reduced-motion as a designed mode — strip movement, keep meaning — and avoid the known vestibular triggers. 09 Building a Motion System (+ AI Prompt) Purpose-gated animation, four durations, two curves, cheap properties, symmetric exits, staggered arrivals, springs for gestures, and a designed reduced mode.