What problem does it solve? Web interfaces often feel stiff and disconnected because animations are pre-scripted, gestures lack momentum, and motion 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 using Apple's exponential-decay formula to predict flick landing points. - Spring Animation Tuning: Apply Apple's damping ratio and response parameters (e.g., damping 1.0 for default UI, 0.8 for momentum interactions) mapped to Motion/Framer Motion bounce and duration values, with interruptible animations that start from the live presentation value. - Materials, Typography, and Accessibility: Build translucent layers with backdrop-filter, apply size-specific tracking and leading for typography, and honor prefers-reduced-motion, prefers-reduced-transparency, and prefers-contrast media queries. - Use Case: When building a bottom sheet that users can drag, flick, and re-grab mid-animation, use this Skill to wire pointer tracking, project the resting position from release velocity, and hand off velocity into a spring so the sheet lands naturally. ## Quick Start Ask the AI to build a draggable bottom sheet with spring physics, momentum projection, and rubber-banding at the edges following Apple design principles.
