What problem does it solve? Web interfaces often feel stiff and disconnected because animations are pre-scripted, gestures lack momentum, and transitions cannot be interrupted mid-flight. This Skill translates Apple's WWDC design guidance (Designing Fluid Interfaces, UI Typography, Principles of Great Design) into concrete web techniques using CSS, Pointer Events, requestAnimationFrame, and spring libraries like Motion and Framer Motion. ## Core Features & Use Cases - Gesture-Driven Motion: Implement 1:1 drag tracking with Pointer Events and setPointerCapture, velocity handoff from gesture to spring, and momentum projection to compute flick landing points. - Interruptible Spring Animations: Configure damping ratio and response parameters, animate from the live presentation value, and blend velocity on reversal to avoid visible jumps. - Materials, Typography & Accessibility: Build translucent layers with backdrop-filter, apply size-specific tracking and leading for typography, and honor prefers-reduced-motion, reduced-transparency, and contrast media queries. - Use Case: When building a bottom sheet or draggable card, use this Skill to wire pointer tracking, project the release velocity to the nearest snap point, and hand off velocity to a spring so the gesture flows seamlessly into the animation. ## Quick Start Use the apple-design skill to build a draggable bottom sheet with spring physics, momentum projection, and rubber-banding at the edges.
