Apple Design: Apple's gestures, springs and materials on the web
An interface feels alive when motion starts from where things are, inherits the finger's velocity and can be grabbed mid-flight. Emil Kowalski's skill distils Apple's WWDC design talks, chiefly Designing Fluid Interfaces from 2018, into web terms: Pointer Events, requestAnimationFrame, backdrop-filter and springs from the Motion library.
Springs instead of fixed-duration tweens, framed as damping ratio and response, with the values Apple ships for sheets and repositioning
Interruptibility: every animation starts from the live on-screen value, so a moving element can be caught and reversed
Velocity handoff and momentum projection using Apple's own projection function with a 0.998 deceleration rate
Rubber-band edges, symmetric enter and exit paths, and translucent materials built with backdrop-filter
Accessibility through prefers-reduced-motion, prefers-reduced-transparency and prefers-contrast, plus optical sizing, tracking and leading
When to use it
You are building a bottom sheet, carousel or swipeable cards and want them to behave like iOS
A closing modal ignores the user who changes their mind halfway, and it feels broken
You need a glass navigation bar that stays legible over content and respects accessibility settings
Ask your agent
Build a bottom sheet with a spring that picks up the swipe velocity on release
Review this carousel against Apple's rules: interruptibility, momentum, rubber-band edges
Add a translucent nav bar and a fallback for prefers-reduced-transparency
Questions
How do I install Apple Design?
Run npx skills add emilkowalski/skills@apple-design. Without the @apple-design suffix the same command installs Emil Kowalski's whole skill set.
Where do the Apple Design rules come from?
From Apple's WWDC design talks, mainly Designing Fluid Interfaces (2018) and a talk on audio and haptics, translated into CSS, Pointer Events and Motion springs.
How does Apple Design differ from Emil Kowalski's other skills?
Many of the other skills in the set cover animation in general and reviewing it. Apple Design collects Apple's own approach: gestures, springs, materials, multimodal feedback and type.
