skills.rest
eyenalxai
eyenalxaiCOMMUNITY
Explore all skills by this author →
GitHub

apple-design

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

Updated Sep 5, 2023
Search Tags:#accessibility#css#animation#ui design#gestures#framer motion#spring physics
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill apple-design-eyenalxai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-design
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/apple-design
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill apple-design-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often feel stiff and disconnected because animations are pre-scripted, gestures lack momentum, and transitions 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 like Motion and Framer Motion. ## Core Features & Use Cases - Gesture-Driven Motion: Implement 1:1 drag tracking with Pointer Events, velocity handoff to springs, momentum projection for flicks, and rubber-banding at boundaries. - Interruptible Spring Animations: Configure damping ratio and response parameters, animate from live presentation values, and blend velocity on gesture reversal to avoid discontinuities. - Materials, Typography & Accessibility: Build translucent layers with backdrop-filter, apply size-specific tracking and leading for typography, and honor prefers-reduced-motion and prefers-reduced-transparency. - Use Case: When building a bottom sheet or draggable card, use this Skill to make the sheet track the finger 1:1, project its resting position from release velocity, and settle with a critically damped spring that can be grabbed and reversed at any moment. ## Quick Start Use the apple-design skill to review my draggable bottom sheet component 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?▼

Use spring animations instead of CSS transitions or keyframes, since springs animate from the current on-screen value by default. On interruption, 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 to implement momentum scrolling projection for a bottom sheet?▼

Use Apple's projection formula: projected distance equals (velocity/1000) times decelerationRate divided by (1 minus decelerationRate), with decelerationRate around 0.998. Add this to the current position, snap to the nearest target, then hand off the release velocity to the spring.

What spring damping and response values does Apple use?▼

Apple uses damping 1.0 (critically damped, no overshoot) with response 0.4 for repositioning, damping 0.8 with response 0.4 for rotation, and damping 0.8 with response 0.3 for drawers and sheets. Reserve bounce for interactions where the gesture carried momentum.

Can I use CSS transitions for gesture-driven animations?▼

No, CSS transitions and keyframes cannot be smoothly grabbed and reversed mid-flight, so avoid them for anything gesture-driven. Use a spring library like Motion or Framer Motion that re-targets from the current value and velocity.

How do I handle prefers-reduced-motion for spring animations?▼

Replace slides, springs, and parallax with short opacity cross-fades or static transitions when prefers-reduced-motion is set, and drop elastic overshoot. Also respond to prefers-reduced-transparency by making translucent surfaces solid and removing blur.

Why does my drag animation jump when the user reverses direction?▼

The jump happens when the new animation starts from the logical target value instead of the live presentation value, or when velocity is hard-cut at reversal. Read the on-screen transform at interruption and use a spring that blends velocity through the re-target.

Related Skills

Explore More Design & Creative Skills→
jayteealaojayteealao

design-distill

Identify and strip nonessential elements from user interface designs.

Community
Advanced
flitzrrrflitzrrr
4

usability

Evaluate user interfaces against Nielsen heuristics and ISO 9241 principles.

Community
Intermediate
curtislmartincurtislmartin

swiftui-performance-audit

Audit SwiftUI view runtime performance and identify root causes of slow rendering.

Community
Advanced
VoldemortGinVoldemortGin

swift-swiftui-first

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

Community
Intermediate