What problem does it solve? Web interfaces often feel stiff and disconnected because animations are pre-scripted, gestures lack continuous feedback, and motion cannot be interrupted mid-flight. This Skill translates Apple's WWDC design guidance (Designing Fluid Interfaces, UI Typography, Audio-Haptic Experiences) into concrete web techniques using CSS, Pointer Events, requestAnimationFrame, and spring libraries like Motion/Framer Motion. ## Core Features & Use Cases - Gesture-Driven Motion: Implement 1:1 drag tracking with Pointer Events and setPointerCapture, velocity handoff into springs, and momentum projection using Apple's exponential-decay formula. - Spring Animation Guidance: Apply damping ratio and response parameters (e.g., damping 1.0 / response 0.4 for repositioning, 0.8 / 0.3 for sheets) mapped to Motion/Framer Motion bounce and duration APIs. - Materials, Typography & Accessibility: Build translucent layers with backdrop-filter, size-specific tracking and leading for type, and reduced-motion/reduced-transparency fallbacks. - Use Case: When building a bottom sheet that users can drag, flick, and re-grab mid-animation, use this Skill to track pointer velocity, project the resting position, and hand off release velocity to a spring so the gesture transitions into animation without a visible seam. ## Quick Start Review my draggable bottom sheet implementation and rewrite the animation to use interruptible springs with velocity handoff following Apple fluid interface principles.
