# Choreography and depth · Motion Rauno Freiberg’s [Designing Depth](https://rauno.me/craft/depth) (July 2024) starts with composition: distilling a three-dimensional world into a two-dimensional frame while keeping story and depth. ### Dirtying the frame Filmmakers call one answer “dirtying the frame”: props, out-of-focus foreground obstructions, or unconventional framing between camera and subject, because the pristine head-on shot carries less. In software this means 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: 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. The same instinct explains the **blurred backdrop** (Dimming or blurring the layer behind an overlay, which adds dimensionality by simulating the depth of field our eyes expect and signals that only the overlay is actionable.) behind an overlay, which Rauno reads as depth of field, the thing “our eyes have naturally evolved to expect.” It is also information: an iOS context menu without de-emphasis behind it would suggest the whole app grid is still interactive when only the menu is. ### The swipe-down, in four states **Choreography** (In my mind, choreography is deliberately orchestrating when something happens in a structured sequence. (Rauno Freiberg)) is “deliberately orchestrating when something happens in a structured sequence,” and he draws the parallel to dirtying the frame: both add layers to a narrative. 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. Rather than one keyframed animation, the gesture has four states: the Home Screen blurs; the Siri suggestions are revealed as another layer; the Search button becomes an input while the keyboard is partially revealed; on gesture end the keyboard pops up. The first row of apps and the suggestions share the same space, so the blur must land before the suggestions surface, and the reveal is deliberately delayed. The keyboard is held back, he assumes, so it does not compete with the suggestions, and the first feedback appears near the top, where the gesture originates. Tap the Search button instead and the choreography reverses: the input comes first, the suggestions after a very slight delay, because you prioritise the transition nearest the trigger “to promptly communicate that the interface understood you.” The staggering section, covered in 2.4, adds Control Centre’s rubber banding, where each row responds with a slightly staggered spring configuration. Source The four states, the Search-tap reversal, and the iPadOS Dock are all from Designing Depth; its image alt text enumerates the four states. ### 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 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,” reinforcing the metaphor of stacked layers. In Control Centre, another full-screen overlay, the Dock does not slide; it is blurred with the Home Screen, and the Home Bar surfaces above to show the overlay can be dismissed. The Dock moves only when it is layered above the surface you swiped for: the slide respects your intent. Read beside Emil Kowalski there is a tension worth naming. Emil’s [Train Your Judgement](https://emilkowal.ski/ui/train-your-judgement) calls a side panel that slides in and then trickles its items “two layers of entrance animation” and prefers the content simply there. Rauno’s examples are system gestures and first-contact moments. The test they share: if sequencing tells the user something, which layer is on top, where the gesture came from, what is still interactive, it is choreography. If it only makes the entrance longer, it is a layer to remove.