skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

apple-design

Implements Apple-style fluid interfaces with spring animations, gesture tracking, and translucent materials on the web.

Updated May 5, 2026
Search Tags:#accessibility#css#animation#ui design#gestures#framer motion#spring physics
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill apple-design-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-design
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/apple-design
Command: npx skills add https://github.com/josippapez/ai-setup --skill apple-design-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often feel stiff because animations are pre-scripted, non-interruptible, and disconnected from user gestures. 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 and 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 tuning: Apply Apple's damping ratio and response parameters (e.g., damping 1.0 / response 0.4 for repositioning, 0.8 / 0.3 for sheets) mapped to Motion or Framer Motion spring APIs. - Materials, typography, and 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 draggable bottom sheet, use this Skill to track the pointer with grab-offset awareness, project the flick's resting position, hand off release velocity to a spring, and rubber-band past the boundaries. ## Quick Start Use the apple-design skill to build an interruptible draggable bottom sheet with spring physics and momentum projection in React with Motion.

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?▼

Use spring animations instead of CSS transitions or keyframes, since springs animate from the current on-screen value and can be re-targeted mid-flight. On interrupt, read the element's live transform and start the new animation from there, carrying velocity through the re-target to avoid a visible jump.

How do I implement momentum projection for a flick gesture?▼

Use Apple's exponential-decay formula: projected distance equals (velocity/1000) multiplied by decelerationRate divided by (1 minus decelerationRate), with decelerationRate around 0.998. Snap to the target nearest the projected endpoint, then hand off the release velocity to the spring.

What spring parameters does Apple use for UI animations?▼

Apple uses damping ratio and response instead of mass, stiffness, and damping. Defaults are damping 1.0 (no overshoot) with response 0.3-0.4 seconds; momentum-driven interactions like sheets use damping around 0.8. In Motion or Framer Motion, map these to the bounce and duration spring options.

Should I use CSS transitions or springs for drag interactions?▼

Use springs for anything gesture-driven. CSS transitions and keyframes cannot be grabbed and reversed mid-flight, while springs start from the current value and blend velocity on reversal, which is what makes an interaction feel continuous and physical.

How do I handle reduced motion for spring 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 prefers-contrast by adding defined borders.

How do I build translucent toolbar materials on the web?▼

Use backdrop-filter with blur and saturate plus a semi-transparent background, letting content scroll underneath. Match material weight to hierarchy, avoid stacking light translucent surfaces, and animate blur radius with scale on enter and exit so the surface reads as a real material.

Related Skills

Explore More Design & Creative Skills→
Jicate-SolutionsJicate-Solutions

ultra-ui-ux-designer

Generate UI/UX design specifications with wireframes, mockups, and design systems.

Official
Advanced
flitzrrrflitzrrr
4

ux-design

Conduct user interviews, create personas, and run usability tests.

Community
Intermediate
rattamnoonrattamnoon

polish

Polish UI alignment, spacing, and micro-details before shipping.

Community
Advanced
trungenglishtrungenglish
1

apple-design

Implements Apple-style fluid interfaces with spring animations, gesture tracking, and translucent materials for the web.

Community
Intermediate