Map Sheet

This is the sheet from the maps app on an iPhone: a pane of glass floating over the map, dragged between three heights. It isn't a panel that animates between states once you let go. Everything that changes - the gap to the screen edge, the corners, the glass getting more opaque, the map dimming, the buttons riding above it - is read from the sheet's position while your finger is still down, so it tracks the drag exactly and reverses with it.

The three heights are what the Human Interface Guidelines call detents1. Large fills the screen, medium is half of it, as the guidelines define it, and small shrinks the sheet to a pill around the search field. When you let go, the sheet goes to the detent nearest to where the flick would have landed, not to where your finger stopped. That landing point is the velocity projected with UIScrollView's deceleration rate, (v / 1000) * 0.998 / (1 - 0.998), the formula from the Designing Fluid Interfaces talk2. A short, fast flick can carry past the nearest detent, which is how the real one behaves and exactly what a nearest-to-the-finger rule gets wrong. Tapping the grabber cycles through the detents too, which the guidelines ask of it.

The geometry is interpolated in two legs. Between large and medium the gap to the edge grows from 0 to 9px, and the corner shrinks from 53px, the screen's own, to 44px, so the sheet's curve stays concentric with the screen's. Between medium and small the gap keeps growing to 22px, which lines the pill up with the outer edge of the map buttons, and the corner closes to half the pill's height. The corners are squircles, and a squircle at half the height of a pill pinches its ends, so the corner-shape eases from superellipse(2) to superellipse(1) on the same leg.

One thing I didn't expect: the sheet can't be scaled into place. Scaling would stretch the copy inside it, so the glass animates its real left, right and height and clips, while the content keeps a fixed width of calc(100cqw - 18px) and gets shifted back by exactly as much as the glass moved in. Nothing rewraps mid-drag, and the only thing that does take up the extra room is the search field row, which is a flex row and doesn't care. My first version also had the map and the sheet jump up inside the phone the moment the sheet was scrolled into view. overflow: hidden still lets the browser scroll an element to bring something inside it into view, and the sheet hanging below the phone gave it room to; overflow: clip doesn't.

The glass started out as a heavy frost, an 18px blur under a 30% white tint, and it looked like plastic. What makes it read as glass is light, not frost: an 8px blur, a bright rim along the top-left edge and a fainter one on the bottom-right where the light leaves, and a soft glow inside the edge that reads as the thickness of the material. I tried pushing the saturation to 2 to get the colour to bloom through, and it turned the beige map yellow, so it sits at 1.4. The cards inside the sheet are plain fills rather than more glass, since the guidelines keep Liquid Glass for the controls layer and out of the content3. What's missing is the refraction at the edges, where the real thing bends the map. A browser can only do that with an SVG filter in backdrop-filter, which only Chromium supports, against a sheet that changes size on every frame.

The map drags too, by 60px in any direction, with Motion's drag4 and a little elastic past the limit. It's a small thing, but a map that doesn't move under your finger reads as a picture of a map.

The grabber is a real button, so the keyboard and screen readers can move the sheet between detents without dragging anything. On a phone, a vertical swipe over the map still scrolls the page, since the phone is taller than most screens and trapping the scroll there would be worse than not panning. If you prefer reduced motion, the sheet jumps straight to its detent and the map stops where you let go of it instead of gliding.