micro-motionlisted

# Micro-Motion Motion confirms a change, its origin, or what to notice next. If it answers none of those, 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 are valid when the purpose requires them and a performance trace shows the target device can sustain the interaction. - **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 final content; remove spatial movement. - **Let JavaScript opt individual elements into waiting states only after the observer is ready.** Static CSS must not leave content hidden 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`. Treat these as starting bands and test on the target device. Motion never delays committed state, focus, or the next keyboard action. ## Settle before styling Define the usable end state and interruption policy before choosing an entrance. A superseded save, route, insertion, or dismissal must converge on the newest state without a stale overlay, announcement, focus j