# Spatial consistency and fluid morphing · Invisible details Motion can tell you where something lives. Rauno Freiberg’s example in [Invisible Details of Interaction Design](https://rauno.me/craft/interaction-design) is the Dynamic Island. Tap it and the app slides out from under the Island to cover the screen. But if the Island is expanded, which says your intent is to receive more detail, the app launches from its icon if the icon is visible, and otherwise slides in from the right. ### Direction carries information Launching Spotify from its icon makes it clearer where the audio is playing from: with three music apps on one row, the motion ties the player to its source. Sliding in from the right says the app lives in the App Switcher, and right rather than left says it is now first on the stack. This is **spatial consistency** (Because it comes from and leaves in the same direction, it creates spatial consistency, making the swipe-down-to-dismiss gesture feel more intuitive.): the direction an element arrives from matches where it came from. The exception proves it. The Clock app always jumps out from the Island, even when expanded, because its timer module belongs to one app and there is nothing to disambiguate. Emil Kowalski gives the web version in [You Don’t Need Animations](https://emilkowal.ski/ui/you-dont-need-animations): Sonner’s toast enters from the direction it later leaves in, and that consistency makes swipe-down-to-dismiss feel intuitive. In code it is a mounted flag and a transition from below. > Figure. CSSEmil Kowalski, Building a Toast Component Source Spotify, the right-edge slide, and the Clock exception are from the Spatial Consistency section of the essay. The toast CSS is from Emil’s Building a Toast Component. ### Fluid morphing and the 10 point crop Swiping up morphs the full screen app into its icon, which Rauno calls **fluid morphing** (Swiping up morphs the full screen app into its icon; the icon is intentionally stretched from the bottom to fill the frame as it fluidly morphs its shape from a vertical rectangle to a uniform square.). The icon is intentionally stretched from the bottom to fill the frame as the shape goes from tall rectangle to square. That assumes icons follow Apple’s guidelines. The Bluesky icon ignores the safe zone, so its bottom roughly 10 points are cropped, duplicated, and stretched into a strange repeating image. A system motion decision leaks into every third-party asset. Figure 2 shows the principle on the web: a compose pill that either grows into a panel or is replaced by it. In Morph mode your eye never loses the element, the object permanence Rauno names as a reason to animate at all. In Cut mode the panel simply appears. > Figure 2. Morph versus cut. Click Compose. In Morph mode the pill grows into the panel, so your eye never loses the element. Switch to Cut and the panel simply appears. Slow motion shows what the spring is doing.Illustrative numbers ### Motion that says a layer still works A year later, in [Designing Depth](https://rauno.me/craft/depth) (July 2024), Rauno shows motion telling you what a surface still does. On iPadOS, swiping right on the Home Screen opens the Today View as a full screen overlay and the Dock slides out of view, not blurred but keeping its opacity, which says it retains interactivity and can be swiped back. Moving it respects your intent to use the surface you swiped for. His check that this is deliberate: Control Centre is also a full screen overlay, and there the Dock is blurred with the Home Screen while the Home Bar surfaces above as its own layer to indicate dismissability. Same Dock, two treatments, each matched to what you can do next, and the sliding one reinforces the stacked layers metaphor from the first section of this chapter. Before an element appears, decide where it is coming from and make the motion say so. A panel that lives inside a button grows from that button; a sheet that leaves downward arrives from below. An element that stays interactive while something covers it should behave like its own layer, by sliding or keeping its opacity, rather than blurring with the rest.