lab

Settle

02 · Sep 2026

A button that grows into the card that asks the question, and collapses back into itself when you answer. No sheet behind it, no backdrop, no close: the thing you pressed is the thing that grows, and the answer rides home in it. Three springs for the shape, transitions for everything that only fades.

0.36s
0.08
5px

One object

The grey card is not a sheet arriving from the edge of the screen. It is the button’s own bounds growing upward with the bottom edge pinned, and the red pill never leaves: it shrinks to the right half and changes its word to Confirm. The dialog reads as a continuation of the press, not an interruption of it, because nothing was replaced. If anything were, something could pop.

Revealed, not entered

Everything inside the card is anchored to its bottom and sits at its final position from the first frame. The rising edge uncovers it: description, then title, then the icon on its own delay. Cancel emerges from under the red pill rather than fading in beside it, blurred until it is clear, and slides back under on close. Out is faster than in, so the shape is never waiting on its contents.

Springs for the shape, transitions for the rest

Three numbers run on requestAnimationFrame: how open the card is, how far the pill has ceded the left half, and the height the current view wants. They are springs, parametrised the way Apple’s are, with a duration and a bounce. Everything that only fades is a CSS transition on a class. The split matters at the one moment a transition can’t handle: interrupt a spring halfway and it bends toward the new target carrying the speed it had. Slow it to quarter speed and cancel mid-open to see it.

The answer rides home

Every terminal action collapses the card and puts its result in the button: account deleted, link copied, paid. There is no toast anywhere in this study. The menu flow is why the engine is worth having: picking Delete note morphs the list into the warning without closing, the height retargets, the pill splits and turns red, and Back reverses only the split. A sheet cannot do that without a second sheet. In Pay, the wait lives on the object that caused it.