fluid-interfaces

Fluid Interfaces

Source: Apple WWDC 2018 session 803, "Designing Fluid Interfaces" (Chan Karunamuni, Nathan de Vries, Marcos Alonso — Human Interface team, built the iPhone X gestural UI). Full transcript in references/transcript.md.

Core thesis: an interface feels fluid when it feels like an extension of the user's mind and body, not a computer being operated. This isn't about frame rate — a 60fps interface can still feel "off." It comes from matching the interface's behavior to how our bodies and minds actually move: continuously, redirectably, and in response to real physical momentum.

Use this skill to audit existing gesture/motion code (find file:line violations of the principles below) or to design new interactions from scratch.

The 8 core principles

1. Respond instantly. Any perceptible delay between touch and reaction breaks the illusion of directness. Audit every tap, press, and drag start for latency — not just swipes. Delays creep in via debounce timers, setTimeout, animation queues, or waiting for a gesture to fully end before giving feedback.

2. Allow constant redirection and interruption. Users should be able to change their mind mid-gesture without waiting for the current animation/gesture to finish. Detect direction changes via acceleration spikes, not velocity thresholds + timers — a sudden deceleration/reversal in finger motion is detectable faster than "wait until velocity drops below X for Y ms." If a new gesture can't interrupt an in-flight one, that's a violation.

3. Maintain spatial consistency. Objects should enter and exit the screen via symmetric, consistent paths (mimics real-world object permanence). If something enters from the right, it should exit to the right — not to the bottom. Broken symmetry (e.g. push-in from right, pop-out downward) reads as "sending it away" rather than "going back," and is disorienting.

4. Hint in the direction of the gesture. Intermediate/pressed states should visually grow toward the final state along the same trajectory (e.g. Control Center modules bulge toward the finger before popping open). This lets users predict the outcome before completing the gesture.