About apple-design-motion
apple-design-motion is a design skill for planning responsive interface motion, gestures, and feedback. It emphasizes interruptible spring animation, reduced-motion alternatives, and scroll- or pointer-driven effects.
Key features
- 01Spring-based animation guidance
- 02Interruptible gestures and velocity handoff
- 03Transform and opacity animation rules
- 04Action feedback and haptic guidance
- 05Reduced-motion alternatives
- 06Scroll- and pointer-driven motion
Use cases
- 01Design interface transitions and gestures
- 02Add responsive press and loading feedback
- 03Create scroll-linked page motion
- 04Adapt animation for reduced-motion settings
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/apple-design-motionin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/gestures-interaction.mdmicrointeractions-feedback.mdmotion-animation.mdDetails
From the project READMEApple 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.