skills.rest
beelabstudio
beelabstudioOFFICIAL
Explore all skills by this author →
GitHub

apple-design

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

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

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 WWDC design guidance (Designing Fluid Interfaces, UI Typography, Audio-Haptic design) 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 from gesture to spring, and momentum projection using Apple's exponential-decay formula. - Spring Animation Guidance: Apply damping ratio and response parameters (e.g., damping 1.0 for default UI, 0.8 for momentum interactions) mapped to Motion/Framer Motion bounce and duration values. - Materials, Typography & Accessibility: Build translucent layers with backdrop-filter, apply size-specific tracking and leading for typography, and handle prefers-reduced-motion, reduced-transparency, and high-contrast media queries. - Use Case: When building a bottom sheet that users can drag, flick, and re-grab mid-animation, use this Skill to implement rubber-banding at boundaries, project the flick's landing point, and hand off release velocity to the spring so the motion has no visible seam. ## Quick Start Use the apple-design skill to build a draggable bottom sheet with spring physics, momentum projection, and rubber-banding at the edges.

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, never the target value, and never lock 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 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 should I use in Framer Motion?▼

Default to a critically damped spring with no overshoot (bounce 0, duration around 0.4 seconds). Add slight bounce (around 0.2) only for momentum-driven interactions like flicks, matching Apple's damping 0.8 and response 0.3-0.4 guidance.

How do I handle reduced motion in gesture-driven UI?▼

Respond to the prefers-reduced-motion media query by replacing slides, springs, and parallax with short opacity cross-fades and removing elastic overshoot. Also handle prefers-reduced-transparency by making translucent surfaces solid and prefers-contrast by adding defined borders.

Why should I avoid CSS transitions for draggable elements?▼

CSS transitions and keyframes cannot be grabbed and reversed mid-flight, so interrupting them causes visible jumps or velocity discontinuities. Spring libraries animate from the live value and carry velocity through re-targeting, which is what interruption requires.

How do I build translucent toolbars like iOS on the web?▼

Use backdrop-filter with blur and saturation plus a semi-transparent background, letting content scroll underneath. Match material weight to hierarchy, never stack light translucent surfaces, and animate blur radius with scale on enter and exit.

Related Skills

Explore More Design & Creative Skills→
camilooscargbaptistacamilooscargbaptista
7

ux-review

Evaluate UI mockups for usability, accessibility, and interaction issues, producing prioritized recommendations.

Community
Intermediate
etylsarinetylsarin
59

browser-testing

Automate browser-based UI testing with Chrome DevTools MCP.

Community
Advanced
alexejluftalexejluft

building-accessibly

Enforce web accessibility standards including WCAG compliance and keyboard navigation.

Community
Intermediate
VoldemortGinVoldemortGin

swift-swiftui-first

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

Community
Intermediate