Most modal implementations crossfade between two completely separate elements. The card fades out, the modal fades in, and the user's spatial understanding of the interface breaks. Shared layout animations solve this by treating both states as the same element at different sizes and positions.
How it works
The card and the modal share a layoutId. When you click a card, Motion measures both layouts, computes the positional and dimensional delta, then animates from one to the other using FLIP transforms. The animation runs entirely on transform so it stays off the main thread. The image carries its own layoutId and the same spring config, so it tracks the container morph exactly with no gap or reflow.
Only the card shape and image participate in the layout animation. Text stays plain HTML in both states — the card overlays title and role on the image, while the modal body fades in as a single block after the morph starts. This avoids the skew and jostle you get when text elements carry their own layoutId across states with different font sizes. On close, the modal body fades out fast so it doesn't compete with the reverse morph.
Read more in the layout animations docs on motion.dev.