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 fluid interface design principles from WWDC talks into concrete web techniques using CSS, Pointer Events, and spring libraries. ## Core Features & Use Cases - Spring-Based Motion: Apply damping ratio and response parameters to build interruptible, velocity-aware animations with Motion or Framer Motion. - Gesture Engineering: Implement 1:1 drag tracking with Pointer Events, velocity handoff at release, momentum projection for flicks, and rubber-banding at boundaries. - Materials, Typography & Accessibility: Build translucent layers with backdrop-filter, apply size-specific tracking and leading, and honor prefers-reduced-motion and prefers-reduced-transparency. - Use Case: When building a bottom sheet or draggable card, use this Skill to track the pointer with capture, project the flick landing point with Apple's deceleration formula, and hand off release velocity to a spring so the gesture flows seamlessly into the animation. ## Quick Start Use the apple-design skill to review my draggable bottom sheet component and make its motion feel fluid and interruptible.
