The Dynamic Island's shell and its content are animated by two separate systems 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 is unaware of the shape it sits in.

SIZES is a lookup table rather than a formula deriving a size from content, and every shape the shell can take is one of exactly five entries.

You can't pass a size you haven't defined: DynamicIslandSize is a union of these five keys, so the shell only ever animates between known, designed states.

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

stiffness: 520 is much 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 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 switching shapes is enough to trigger a crossfade. It is a separate prop 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 separate systems: a five-preset shell spring for the box, and an independent crossfade for whatever you put inside it.