all-in-motionlisted
The complete UI motion and micro-interaction system for web interfaces — build, review, polish and audit animation with one doctrine, one token scale, twenty spring presets and a 79-recipe catalog (press, hover, toggles, checks, dropdowns, tooltips, modals, drawers, toasts, tabs, page slides, data tables, expandable rows, text/icon/number swaps, skeletons, shimmers, loaders, reveals, staggers, drag/swipe/tilt gestures, confetti, dissolves, gradient text) with a live demo page. Use whenever the user asks to animate, add motion, transition, make something feel smooth/alive/snappy/polished/Apple-like, choose an easing, duration or spring, fix janky or slow animation, add hover/press/loading/success/error feedback, build a toast/drawer/dropdown/tooltip/tab/carousel/counter, implement drag-to-dismiss or swipe, review or audit animations, tokenize motion, handle prefers-reduced-motion, or mentions micro-interactions, motion design, Framer Motion/Motion, GSAP, react-spring, WAAPI, View Transitions, Tailwind motion u
prewue/all-in-motion · ★ 0 · Web & Frontend · score 72
Install: claude install-skill prewue/all-in-motion
# All-In-Motion
One system that closes the whole UI-motion question: **judgment** (should it move, how much, in what character), **values** (one token scale, springs), **recipes** (79 drop-in animations) and **process** (build → review → polish → audit). Web first (CSS, WAAPI, React/Motion, Vue, Svelte, Tailwind), with a native mapping for iOS/Android/RN.
## Step 0 — detect the mode
| Signal | Mode | Read |
| --- | --- | --- |
| "animate", "add motion", "make it feel…", "build a toast/dropdown/…", "transition" | **Build** | this file → catalog entry → `references/01`, `02` |
| "review", "is this animation good", a diff or snippet to critique | **Review** | `references/08-review-and-audit.md §1` + `07-anti-patterns.md` |
| "polish", "tune the timing", "tokenize", "align to tokens", "too slow/fast" | **Polish** | `references/08 §3` + `02-tokens.md` |
| "audit my animations", whole codebase, "where would motion help" | **Audit** | `references/08 §2` (reconnaissance first, confirm weighting, then audit) |
| Ambiguous ("look at this modal animation") | ask: build or review? | — |
## Build sequence — decisions in the order that determines feel
1. **Frequency gate.** 100+/day or keyboard-initiated → no animation, say so, offer the instant alternative. Tens/day → near-imperceptible. Occasional → standard. Rare → delight allowed. (`references/01-principles.md §1`)
2. **Purpose in one word**: feedback · orientation · state · preventing a jarring change · continuity · explanation ·