What problem does it solve? Web interfaces often feel stiff and disconnected because animations are pre-scripted, non-interruptible, and ignore gesture velocity. This Skill translates Apple's fluid interface design principles from WWDC talks into concrete web techniques using CSS, Pointer Events, and spring libraries like Motion and Framer Motion. ## Core Features & Use Cases - Spring-Based Motion: Replace fixed-duration CSS transitions with interruptible springs using damping ratio and response parameters, including Apple's shipped values for drawers, rotations, and repositioning. - Gesture Engineering: Implement 1:1 drag tracking with Pointer Events and setPointerCapture, velocity handoff at release, momentum projection for flick landing points, and rubber-banding at boundaries. - 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 component, use this Skill to track the drag 1:1, project the flick's resting position with Apple's deceleration formula, hand off release velocity to a spring, and rubber-band past the top boundary. ## Quick Start Use the apple-design skill to review my bottom sheet component and make its drag, flick, and dismiss animations feel fluid and interruptible.
