skills.rest
j172
j172COMMUNITY
Explore all skills by this author →
Website𝕏@j172GitHub

apple-design

Implement Apple-style fluid interfaces with springs, gestures, and translucency on the web.

Updated Jul 30, 2026
Search Tags:#typography#accessibility#animation#ui design#gestures#framer motion#spring physics
One-click install
npx skills add https://github.com/j172/bid --skill apple-design-j172
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-design
Source: https://github.com/j172/bid/tree/main/agent/skills/apple-design
Command: npx skills add https://github.com/j172/bid --skill apple-design-j172

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often feel stiff because animations are pre-scripted, ignore gesture velocity, and 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, requestAnimationFrame, and spring libraries like Motion and Framer Motion. ## Core Features & Use Cases - Gesture-driven motion: Implement 1:1 drag tracking with Pointer Events, velocity handoff into springs, momentum projection for flicks, and rubber-banding at boundaries. - 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 APIs. - Materials, typography, and accessibility: Build translucent layers with backdrop-filter, size-specific tracking and leading, 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 wire pointer tracking, project the flick landing point, and hand off release velocity to a spring so the motion has no visible seam. ## Quick Start Use the apple-design skill to review my bottom sheet drag interaction and make its animations interruptible with proper velocity handoff.

Frequently Asked Questions about apple-design

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

FAQPage Schema
How do I make web animations interruptible like iOS?▼

Always animate from the element's current on-screen presentation value rather than the target value, and never lock out input during transitions. Use spring animations instead of CSS transitions or keyframes, since springs re-target from the current value and velocity by default.

How do I hand off gesture velocity to a spring animation?▼

Track pointer position history during the drag, compute release velocity, and pass it as the spring's initial velocity. Framer Motion and Motion accept absolute px/s velocity directly; APIs expecting relative velocity need velocity divided by the remaining distance to target.

What spring parameters does Apple use for UI animations?▼

Apple uses damping ratio and response instead of mass/stiffness/damping. Defaults are damping 1.0 (critically damped, no overshoot) with response 0.3-0.4 seconds; momentum interactions like flicks use damping around 0.8 for slight bounce.

Should I use CSS transitions or springs for gesture-driven UI?▼

Use springs for anything gesture-driven, because CSS transitions and keyframes cannot be grabbed and reversed mid-flight without visible jumps. CSS transitions remain acceptable for simple non-interactive state changes like hover feedback.

How do I handle reduced motion for fluid animations?▼

Respond to the prefers-reduced-motion media query by replacing slides, springs, and parallax with short opacity cross-fades or static transitions. Also handle prefers-reduced-transparency by making translucent surfaces more solid and dropping backdrop blur.

Related Skills

Explore More Design & Creative Skills→
tiankong0101-bytetiankong0101-byte

frontend-design

Design user interfaces, wireframes, mockups, and prototypes for product experiences.

Community
Intermediate
AgentientAgentient
2

framer-motion-interactive-animation

Create and animate React UI elements with Framer Motion motion components.

Official
Intermediate
langgeniuslanggenius

60fps-animation

Converts janky CSS animations to compositor-only transform and opacity techniques.

Official
Intermediate
VoldemortGinVoldemortGin

swift-swiftui-first

Guide SwiftUI-first development with UIKit fallback strategies for Apple platforms.

Community
Intermediate