Dock
One toolbar, six shapes, no cuts. Search, menu, share and contact all live inside it, and interrupting a morph halfway bends it toward the new shape instead of starting over. Every control below works; none of them leave the page.
Why it springs
Change your mind halfway through a morph and the box should bend toward the new shape carrying the speed it already had. A CSS transition retargets, but it restarts its curve from a standstill, so you see a hitch at exactly the moment you decided something. A spring is stateful — it keeps its velocity across the change.
The best place to feel it is the contact face: copy the address and the panel folds down into a pill, and a second and a half later the pill opens back out into the toolbar. Copy again before it has finished and it turns around mid-air. The switch marked swap the spring for a tween does exactly that; flip it, mash the buttons, and the hitch shows up.
The toolbar leads
Contents wait 120ms before arriving. Without that pause the incoming panel paints at full size while the box is still travelling, and the larger content reads as already there before the box has revealed it. Drag lead to zero and the panel arrives before the box has made room for it.
The box itself is symmetric — growing and shrinking share one transition, because it is performing a morph, not an entrance. The contents are the asymmetric part: they leave in 180ms and take 260ms to arrive. Leaving should always be quicker than coming back.
The half row
Search reads the whole site, and four results are all the panel holds, so a fifth arrives as a half row cut off at the top of the list. That half row is a button like the others rather than a drawing of one — it can be picked where it sits, and the arrow keys walk the selection through every result, scrolling only once the selection would otherwise leave the panel.
The soft edge is a mask, and it shows up only on the side that still has something behind it: at the top while there is more above, at the bottom while there is more below, on neither when everything fits. Picking a result closes the dock and stays on this page, and so does every row in the menu. This is a workbench, and walking off it mid-experiment is the one thing the dock should never do.
Four pixels of blur
During a crossfade you are briefly looking at two things at once, and the eye is good enough to notice. A small blur on both the outgoing and incoming faces blends them into one object changing shape. Flip remove the content blur and the swap becomes two labels trading places.
Sizes are written down rather than measured, which is what makes the spring possible at all: a spring settles against a fixed number and cannot chase a target that is re-measured every frame. Even search, which grows with its results, only ever grows to a number it already knows.