skills.rest
m-de-graaff
m-de-graaffCOMMUNITY
Explore all skills by this author →
GitHub

apple-interface-patterns

Implements gesture-driven web UI with springs, velocity handoff, momentum projection, and translucent materials.

Updated Aug 3, 2026
Search Tags:#typography#accessibility#gestures#spring animation#backdrop-filter#ui motion#drag interaction
One-click install
npx skills add https://github.com/m-de-graaff/skills --skill apple-interface-patterns-m-de-graaff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-interface-patterns
Source: https://github.com/m-de-graaff/skills/tree/main/skills/apple-interface-patterns
Command: npx skills add https://github.com/m-de-graaff/skills --skill apple-interface-patterns-m-de-graaff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often feel laggy or disconnected because animations ignore the user's gesture velocity, lock out input mid-transition, or snap abruptly at boundaries. This Skill translates Apple's fluid interface principles (from WWDC's Designing Fluid Interfaces) into concrete web techniques so drag, swipe, sheets, and drawers feel physical and interruptible. ## Core Features & Use Cases - Gesture physics: 1:1 pointer tracking with grab offsets, velocity handoff into springs, momentum projection for flick landing points, and rubber-banding at edges. - Interruptible motion: spring parameters (damping ratio and response) that animate from the live on-screen value and blend velocity on reversal, replacing CSS transitions for gesture-driven motion. - Materials, typography, and accessibility: translucent layers via backdrop-filter, size-specific tracking and leading, and support for prefers-reduced-motion, reduced-transparency, and increased-contrast. - Use Case: You are building a bottom sheet that users can drag, flick, and re-grab mid-animation. This Skill gives you the spring parameters, the projection formula for flick landing, and the interruptibility rules to make it feel native. ## Quick Start Ask the AI to build a draggable bottom sheet with spring physics, velocity handoff, and rubber-banding using Apple-style interface patterns.

Frequently Asked Questions about apple-interface-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a draggable bottom sheet feel native on the web?▼

Track the pointer 1:1 with Pointer Events and setPointerCapture, respecting the grab offset. On release, pass the gesture velocity into a spring (damping ~0.8, response ~0.3) and project the landing point with the exponential-decay formula before snapping.

How do I interrupt a CSS animation mid-flight without a jump?▼

Avoid CSS transitions for gesture-driven motion since they cannot be grabbed and reversed. Use a spring that reads the element's live on-screen transform as its starting value and re-targets from the current velocity, which eliminates the visible jump on reversal.

What spring parameters should I use for UI animations?▼

Use damping ratio 1.0 and response 0.3-0.4 seconds as the default for moves and repositioning. Drop damping to about 0.8 only when the gesture carried momentum, such as a flick or throw, since overshoot on a simple fade-in feels wrong.

Can I use backdrop-filter for translucent floating toolbars?▼

Yes, backdrop-filter with blur and saturate creates the translucent material effect for floating chrome. Never stack a light translucent surface on another, and honor prefers-reduced-transparency by raising background opacity and dropping the blur.

Why does my drag animation feel laggy or disconnected?▼

Lag usually comes from responding on release instead of pointer-down, debounces on the input path, or a missing velocity handoff where dragging stops and animating starts. Feedback must update 1:1 with the pointer continuously during the gesture.

When should I not use spring animations?▼

Springs are wrong when the user prefers reduced motion; use cross-fades and drop overshoot under prefers-reduced-motion. They also add no value for static polish or non-gesture transitions where a simple baseline curve suffices.

Related Skills

Explore More Design & Creative Skills→
danielbere1973danielbere1973

find-animation-opportunities

Scan a codebase for UI moments that would benefit from motion and propose exact animation recipes.

Community
Intermediate
Adham7843Adham7843

react-spring-physics

Implement physics-based animations in React with React Spring and gesture recognition.

Community
Intermediate
VNFT-GROUPVNFT-GROUP

polish

Inspect web and mobile UI alignment, spacing, typography, and motion issues.

Official
Advanced
mengxi-reammengxi-ream
9.4k

apple-design

Implements Apple-style fluid interface design principles for web UI motion and interaction.

Community
Intermediate