What problem does it solve? Web interfaces often feel stiff because they rely on fixed-duration CSS transitions that ignore gesture velocity, cannot be interrupted mid-animation, and lack the physical feedback that makes interfaces feel responsive. This Skill translates Apple's WWDC design guidance (Designing Fluid Interfaces, UI Typography, Audio-Haptic design) into concrete web techniques using Pointer Events, requestAnimationFrame, spring libraries, and CSS. ## 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 Guidance: 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 or draggable card in a Next.js app, use this Skill to implement rubber-banding at boundaries, velocity-aware dismissal, and a critically damped spring settle so the sheet feels physical rather than scripted. ## Quick Start Use the apple-design skill to review my draggable bottom sheet component and make its animations interruptible with proper velocity handoff.
