Choreography and depth

Rauno Freiberg’s Designing Depth (July 2024) is about composition before it is about motion. The hard problem in any visual medium, he writes, is distilling a three-dimensional world into a two-dimensional frame while keeping story and depth. Filmmakers call one of the answers “dirtying the frame”: putting props, foreground obstructions, or unconventional framing between the camera and the subject, because the pristine head-on shot carries less. Shoot through a window, obscure the frame with an out-of-focus foreground object, centre a subject and let the surroundings do the explaining. In software he translates this as adding ambient foreground and background objects. His example is a Vercel marketing visual that fell flat because the browser frame and the surfaces over it had no depth; the fix was to blur the inner background to lower it on the Z-axis, fade the container’s bottom edge so the boundary feels infinite, and add offset browser frames and out-of-focus objects, chosen so the layers themselves communicate an abundance of Preview Deployments rather than being decoration.

The same instinct explains a detail most people take for granted. Dimming the backdrop behind an overlay, a blurred backdrop, is common in products and operating systems, and Rauno reads it as depth of field, the thing “our eyes have naturally evolved to expect.” It is also information. An iOS Home Screen context menu without any de-emphasis on the layer behind it would feel awkward, and it would suggest the whole grid of apps is still interactive when only the menu is; tapping the backdrop closes it.

From there he moves to time. Choreography is “deliberately orchestrating when something happens in a structured sequence,” and he draws the parallel to dirtying the frame explicitly: both add layers to a narrative, the way you layer instruments for variety. In animation the instruments are time and artificial delay, used so the result feels true to nature, where you rarely see every leaf of a tree move at once. His production example is the iOS Home Screen swipe-down. A first recreation would trigger one keyframed animation on the swipe. Deconstructed, the gesture has four discrete states: the Home Screen blurs; the Siri suggestions are revealed as another layer; the Search entry button becomes an input while the keyboard is partially revealed; and on gesture end the keyboard pops up. The order is not arbitrary. The first row of apps and the Siri suggestions occupy the same space, so the Home Screen must be adequately blurred before the suggestions can surface cleanly; revealing them linearly would create an odd layering, so the reveal is deliberately delayed. The keyboard is held back, he assumes, so it does not compete cognitively with the suggestions the design may be nudging you toward. And because you are swiping down, the first feedback appears near the top of the screen where the gesture originates. On release the keyboard expands in coordination with your finger lifting.

Tap the Search button instead of swiping, and the choreography runs the other way: the Search entry becomes an input immediately, and the Siri suggestions follow after a very slight delay. Rauno’s reading is that you prioritise the transition nearest the trigger “to promptly communicate that the interface understood you.” That is the rule to carry: sequence follows the user’s attention and the point of contact, not a fixed top-to-bottom order. The staggering section of the essay, covered in 2.4, is the same principle applied to siblings, and it adds one more iOS example: Control Centre’s rubber banding, where each row responds with a slightly staggered spring configuration, so the overscroll feels organic rather than rigid.

The final section is motion as affordance. On iPadOS, swiping right on the Home Screen opens the Today View as a full-screen overlay, and the Dock slides out of view while keeping its opacity instead of blurring with the Home Screen. Rauno reads that as a message: the Dock “retains interactivity and can be brought back with a swipe gesture,” and Apple is reinforcing the metaphor of stacked layers. He then checks his own reading against Control Centre, another full-screen overlay, where the Dock does not slide at all; it is blurred along with the Home Screen and the Home Bar surfaces above it to show the overlay can be dismissed. The Dock moves only when it is layered above the surface you swiped for, which is evidence that the sliding is about respecting your intent, not about being cute.

Read beside Emil Kowalski, there is a tension worth naming. Emil’s Train Your Judgement calls a side panel that slides in and then trickles its items one by one “two layers of entrance animation” and prefers the version where the content is simply there; his skill file says stagger is decorative and must never block interaction. Rauno’s examples are system gestures and first-contact moments, where choreography carries information about layers and intent. The two agree on the test. If sequencing tells the user something, which layer is on top, where the gesture originated, what is still interactive, it is choreography. If it only makes the entrance longer, it is a layer you should remove.