← ClaudeAtlas

springy-motionlisted

Design and implement beautiful, springy, physically-grounded animations and micro-interactions across web (Motion / Framer Motion + CSS/WAAPI) and native (SwiftUI). Use when building or polishing motion: spring transitions, pop-in entrances, sheets/trays/drawers, shared-element morphs, text morphs, staggers, direction-aware tabs/routes, swipe-to-dismiss, drag-to-reorder, rubber-band overscroll, press/hover/tap feedback, number tickers, hold-to-confirm, ripples, success/confetti, skeletons. Also use to REVIEW or critique existing animations ("make it feel alive", "this transition feels off", "too janky", "doesn't feel premium"). Triggers on: springy/bouncy animation, spring physics, stiffness/ damping/bounce, Motion/Framer Motion, SwiftUI animation/withAnimation, easing, interruptible gestures, momentum, reduced motion, interaction design polish.
OtherdaysStudio/springy-motion · ★ 1 · Web & Frontend · score 72
Install: claude install-skill OtherdaysStudio/springy-motion
# springy-motion Beautiful motion is not decoration. It is the explanation of what just happened, in the language of physics the body already speaks. This skill builds and reviews motion that *orients, gives feedback, and shows relationships* — and nothing that doesn't. It is opinionated: one perceptual spring model (`duration` + `bounce`), five named presets, and a small set of rules synthesized from the best interaction-design writing (Kowalski, Benji's *Family Values*, Rauno's *Invisible Details* — see `SOURCES.md`). Every number was verified against primary docs and tuned by eye in a real gallery. ## The two jobs ### A. Implement motion 1. **Name the interaction** and find it in the recipe catalog (`references/recipes-web.md`, `references/recipes-swiftui.md`). 2. **Pick the preset by frequency** (rule below). High-frequency/keyboard → less motion. Rare/high-impact → more delight. 3. **Use the recipe's code** for the target platform. Adjust the preset, not the structure. 4. **Add the reduced-motion variant** — it ships with every recipe. Not optional. 5. **Animate only `transform` + `opacity`.** If you reached for `width`/`top`/`margin`, stop. ### B. Review motion Run `references/review-checklist.md` against the code. Report **blockers** (layout-prop animation, no reduced-motion, non-interruptible gesture, naive 0→1, destructive-commit-mid-gesture) first, then smells, then nits. Give each finding its principle and the corrected snippet. ## The spring presets (memoriz