Motion
Real interfaces built on layout and layoutId, each with the same knobs: how a resized box is reconciled, the timing, and a crossfade for handoffs.
The knobs
Every demo carries the same rail. Size picks how a box that changed size is reconciled: scale corrects it with a transform, morph animates the real width and height, none lets it snap. Timing at default is what a bare layout gets; the others are the house layout, glide and settle transitions, the last one a spring. Crossfade sits on the layoutId demos: the node that held the id rides the same path and fades out as the new one fades in.
Alt , and Alt . step every animation on the page slower and faster through the Motion devtools, and Alt P freezes it.
File browser
layout on every card. Sorting reorders them; the view switch reflows every card into a new shape at once.
Inbox
layout on every row. Opening a message changes that row's height and moves every row under it.
$4,820.00 lands in the account ending 4412 on Friday. The breakdown by product is in your dashboard.
Segmented control
One pill with a layoutId, rendered inside whichever option is active. Each click unmounts it from one button and mounts it in another.
Kanban board
layout and layoutId together. A card that changes column remounts under a new parent while the cards around it close and open the gap.
To do
In progress
Done
Photo lightbox
The tile and the lightbox photo are different nodes sharing a layoutId. The scrim and the caption fade in on their own.
Dynamic island
Two nodes under one layoutId, keyed by state, so every toggle hands the box to different content with a different corner radius.