interaction-and-motion
Installation
SKILL.md
Interaction & Motion
Motion is not decoration. Every animation answers a question the user is silently asking — Did that work? Where did this come from? What's happening now? What's most important? If a motion can't be tied to feedback, orientation, status, hierarchy, or earned delight, cut it. Gratuitous motion is latency you chose to add.
Why motion exists (pick one before you animate)
| Purpose | What it answers | Example |
|---|---|---|
| Feedback | "Did my action register?" | Button press depress, toggle slide, ripple |
| Orientation / continuity | "Where did this come from / go?" | Shared-element transition, sheet slides up from the bar that opened it |
| Status | "What is the system doing?" | Spinner, progress bar, skeleton shimmer, syncing pulse |
| Hierarchy | "What should I look at?" | Stagger reveals primary content first; the FAB scales in last |
| Delight | "This product has care" | Confetti on success, a spring on a like — rare, earned, skippable |
Rule: if you can't name the purpose, you have a bug, not a feature.
Duration scale
Tie duration to distance, size, and importance, not taste. Bigger/farther = longer. Enter slower than exit (entrances orient; exits get out of the way).