micro-motionlisted

# Micro-Motion Motion confirms a change, origin, or what to notice next. If it answers none, cut it. ## Non-negotiables (the rules that keep motion feeling good) - **Prefer compositor-safe properties.** Start with `transform` and `opacity`. Color, filter, SVG, or measured layout transitions need purpose and target-device trace. - **Ease by direction.** Ease-out enters, ease-in exits, ease-in-out moves; linear is for a purposeful continuous loop only. - **Design reduced motion as an equivalent state.** Keep labels, choices, focus, and content; remove spatial movement. - **Let JavaScript opt elements into waiting states only after the observer is ready.** Static CSS must not hide content when JavaScript fails, initializes late, or restores from the back-forward cache. - **Make looping motion controllable and never scroll-jack.** ## Easing & duration tokens Use semantic duration/easing tokens: acknowledgement `120–160ms`, insertion/menu `160–220ms`, confirmation/route `220–320ms`. These are starting bands; test on target device. Motion never delays committed state, focus, or next keyboard action. ## Settle before styling Define usable end state and interruption policy before an entrance. Superseded save, route, insertion, or dismissal must converge on newest state without stale overlay, announcement, focus jump, or success message. Motion reflects ownership, not decides it. Unknown ownership/focus recovery goes to `component-states`. ## The reduced-motion contr