Apple design motion
Skill s1gmamale1/apple-design-skills/skills/apple-design-motion
Apple-grade design skill family for Claude Code & Codex — 9 confidence-labeled skills (HIG, Liquid Glass, motion, scrollytelling, OS surfaces, delivery, a11y) with a restraint × surface discipline. One installer links into both ~/.claude/skills and ~/.agents/skills.
npx -y skills add s1gmamale1/apple-design-skills --skill apple-design-motionAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Use when animating an Apple-style interface — spring physics, the signature smooth/snappy/bouncy springs, fluid interruptible transitions, hero/continuity transitions, gestures (swipe, drag, context menu, Dynamic Island, swipe actions), haptic feedback, control/loading micro-interactions, and the web aliveness primitives (continuous scroll-progress motion + pointer-reactive sugar). Part of the apple-design family. Keywords: apple animation, spring, springs, damping fraction, response, fluid interface, interruptible, matchedGeometryEffect, zoom transition, hero, gesture, swipe to dismiss, drag, velocity handoff, context menu, haptics, taptic engine, sensory feedback, micro-interaction, button press, prefers-reduced-motion, css linear() spring, easing, scroll-progress, scroll progress mapping, damped scroll, scroll smoothing, mapRange, magnetic button, tilt, pointer-reactive, spotlight.
SKILL.md
4.1 KB, as published. Nobody here has run it
Apple Design — Motion (animation · gestures · feedback)
How Apple makes interfaces feel alive: spring-driven, interruptible, responsive.
When to use
- Adding any transition, animation, gesture, or press/loading feedback.
- Making web motion feel "Apple-fluid" rather than canned-easing.
Core rules
- Springs over fixed easing. Apple animates with springs (mass/stiffness/damping), parameterized as
response+dampingFraction(orduration+bounce). On web, generate a CSSlinear()curve from spring params — don't default toease. - Interruptible + velocity handoff. Respond on
pointerdown, let a gesture's release velocity feed the spring, and allow mid-flight redirection. Never block input behind an animation. - Animate
transform/opacityonly (GPU-composited); usewill-changesparingly. Don't animate layout properties. - Every action gets feedback — visual press state (scale/dim) always; haptics where available. Web Vibration API does not work in iOS Safari — never rely on it for tactile feel.
- Honor
prefers-reduced-motion: provide a fade/instant alternative, not the big move. - Bind to continuous scroll progress on flagship pages. On flagship/marketing pages, bind motion to CONTINUOUS scroll progress (damped — smooth the read, never hijack scroll), not just in-view reveals. Reversible, multi-rate scroll-progress motion is the single biggest differentiator between a dead template and an alive Apple page.
References
| File | Use for |
|---|---|
references/motion-animation.md | Spring presets + values, fluid-interface rules, linear() recipes, matchedGeometry/zoom |
references/motion-animation.md → "Continuous scroll-progress motion (the aliveness primitive)" | mapRange + damped-scroll rAF lerp (smooth the read, no scroll-jacking), reversible/multi-rate binding, @supports (animation-timeline) CSS path, reduced-motion |
references/motion-animation.md → "Pointer-reactive motion (desktop sugar)" | Magnetic button / tilt / spotlight vanilla recipes, the pointer:fine + reduced-motion HARD gate, single-rAF-tick production note |
references/gestures-interaction.md | Gesture vocabulary, swipe-to-dismiss, context menus, Dynamic Island, JS pointer recipes |
references/microinteractions-feedback.md | Haptic catalog + when-to-fire, control states, loading patterns, the iOS web-haptics gap |
Common mistakes
ease/lineareverywhere; long, non-interruptible, input-blocking animations.- Animating
width/top/heightinstead oftransform; ignoring reduced-motion. - No tap feedback; haptic spam / double-firing; assuming web vibration works on iOS.
Related: the glass that's moving → apple-design-materials · scroll-driven web motion → apple-design-web · reduce-motion as a11y → apple-design-tactics.
This skill OWNS the reusable scroll/pointer engine primitives above. Page-level scroll compositions that build on them — theme/background morph, sticky-stacked cards, scrubbed canvas hero — live in apple-design-web. The surface-axis decision (whether a given surface should commit to continuous motion at all) lives in apple-design's restraint-and-antislop.md.