The Dynamic Island's shell and its content are animated by two entirely different systems that happen to sit inside the same element: the shell's box model is driven by layout + explicit animate, and the content inside it is a nested AnimatePresence that doesn't know or care what shape it's sitting in.

There's no formula deriving a size from content — SIZES is a lookup table, and every shape the shell can take is one of exactly five entries.

Passing a size you haven't defined isn't possible — DynamicIslandSize is a union of these five keys, so the shell only ever animates between known, designed states, never an arbitrary in-between.

Changing size triggers one animate call across all three box properties at once.

stiffness: 520 is considerably stiffer than the morph dialog's 320 — the island snaps toward its target almost immediately and only overshoots by a touch, which is what makes it feel rubbery rather than soft. layout is set too, so if the island sits inside a flex or grid parent, siblings reflow smoothly around the resize instead of jumping. Tall and large aren't capsules anymore — their radius is much smaller than half the height — so the scene above springs the same three box properties the component does, rather than faking the morph with scale (which would warp the corners).

The shell's animate only touches the box. What's inside crossfades through its own, independent AnimatePresence.

presenceKey defaults to size, so simply switching shapes is enough to trigger a crossfade — but it's a separate prop precisely so you can keep the same size and still crossfade to new content (a timer ticking inside a tall island, say) by changing presenceKey on its own. mode="popLayout" means the exiting and entering views animate concurrently rather than waiting their turn, which is what makes it read as one view dissolving into the next instead of two sequential fades.

Two systems, cleanly separated: a five-preset shell spring for the box, and an independent crossfade for whatever you put inside it.