Apple Design

Apple Design translates interface principles drawn from Apple design talks into web interaction guidance. Its central model is continuous, controllable motion: respond immediately, start from the current on-screen value, inherit the user's velocity, project momentum, and allow a moving element to be grabbed or reversed. Springs provide behavior that can adapt to new input instead of replaying a fixed sequence.

The guidance begins with latency. Press feedback appears on pointer-down, while dragging remains visually connected to the pointer throughout the interaction. It calls for auditing unnecessary debounce delays, timers, transition waits, and tap delays. A supplied press-feedback example is:

.button:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

Direct manipulation respects the original grab offset and uses Pointer Events with setPointerCapture. A short position and timestamp history supports release-velocity calculation. Input stays available during transitions; a new gesture begins from the presentation value rather than the logical target, avoiding a jump. Reversals blend velocity, and two-dimensional movement uses independent springs for each axis.

Use this skill when adapting Apple-inspired interaction, depth, and typography principles to the web, especially drawers, sheets, draggable objects, floating chrome, and interfaces with tactile feedback. It treats motion and visual design as one activity and favors interactive prototypes over static-only specifications.

Do not turn every interaction into a bouncing effect. The default is a critically damped spring; modest overshoot belongs to momentum-bearing flicks or throws. Gesture-driven elements need a spring implementation that can retarget from the current value and velocity. Suggested values are design starting points, and project conventions, installed APIs, keyboard alternatives, and accessibility requirements take precedence.

Inputs are the interaction, its geometry, pointer history, intended targets, and the visual context. The skill supplies implementation principles and concrete examples for CSS, Pointer Events, frame-synchronized updates, and spring libraries.

Spring reasoning uses damping ratio for overshoot and response for how quickly motion approaches its target. Response is distinct from fixed duration. Default damping is 1.0; momentum interactions can use approximately 0.8, with source examples around 0.3-0.4 seconds response. Motion and Framer Motion receive a corresponding bounce-and-duration mapping. Velocity handoff uses the library's required units: some APIs normalize by remaining distance, while Motion accepts absolute pixels per second.

Momentum projection selects a snap point near the projected endpoint instead of simply choosing the nearest point at release. Momentum uses an exponential-decay projection, pairs the target with release velocity, and distinguishes it from a constant-deceleration formula. Symmetric entry and exit paths, trigger-anchored origins, and mirrored reversible easing maintain spatial consistency. Intermediate trajectories should hint at the final outcome, and rubber-band resistance softens boundaries.

Gesture details include hit padding, movement hysteresis, cancel-by-dragging-away, and recognizing possible gestures in parallel before choosing intent. Double-tap delays are reserved for interactions that actually need double taps. Frame-level guidance considers positional change and subtle stretch or blur for very fast movement, using transform and opacity for ordinary motion.

Materials communicate hierarchy through translucent floating surfaces, depth, shadows, and content scrolling beneath chrome. Modal tasks use a scrim; parallel panels preserve flow without one. Stacked sheets progressively push back and dim parent layers. Text contrast and weight support legibility over changing backgrounds, light translucent surfaces should not be stacked, and scroll-edge masks replace dividers only where chrome overlaps content. The guidance also discusses blur-and-scale material entrances and context-sensitive shadows.

Sound and haptics must have an obvious cause, align with the visual event, and be reserved for meaningful moments. Accessibility responds separately to reduced motion, reduced transparency, and increased contrast: gentler fades or static changes, more solid surfaces, and defined contrasting borders. Large moving backgrounds, oscillation, and brightness jumps receive special caution.

Typography couples size, weight, tracking, and leading, using tighter headings, readable body text, optical sizing, system fonts by default, and layout spacing that scales with user text preferences. The design framework covers purpose, agency, responsibility, familiarity, flexibility, simplicity, craft, and delight. It connects those principles to undo, contextual privacy, predictable placement, inclusive layouts, clear hierarchy, meaningful status and error feedback, wayfinding, nearby controls, and specific labels. Iteration includes real people in context and slow or frame-by-frame motion review.

The web translation covers CSS, Pointer Events, requestAnimationFrame, Motion or Framer Motion, backdrop-filter, and preference media queries. Audio-haptic examples discuss the Vibration API alongside visual feedback. All examples are illustrative and require validation in the target environment.