The instinct is to grab a node and fly it from the thumbnail into the dialog.
That is not how I think about shared layout.
You render two elements in two states and give them the same layoutId. Motion measures the layout change and animates the visual difference with transforms. Conceptually, it is close to FLIP: first state, last state, then the delta disappears over time.
The identity is the id, not the DOM instance.
If you keep thinking "this div travels," you will fight the API and eventually ship a crossfade wearing a spring.
One id per story
A layoutId is global unless you namespace it with LayoutGroup.
That matters.
If two unrelated components accidentally reuse the same id, Motion can treat them as part of the same shared-layout story. If the old and new elements are intentionally on screen together, Motion can crossfade them. That is a feature. Accidental identity is the bug.
So name the relationship, not the shape.
project-card-42 is a story.
dot is an invitation to regret.
Multiple shared transitions at once are fine. Give each one a stable identity or scope repeated components with a LayoutGroup id.
Geometry has to survive the morph
Position and size are only half the trick.
A 160px card can become a full dialog and still feel like one object, but the geometry around it has to cooperate. Border radius and shadows are common places where scale distortion exposes the illusion.
When Motion needs to correct a radius during layout animation, provide that value through a style or animation prop so the engine can account for it. If the corner snaps while the body morphs, the object looks like it changed species halfway through.
The animation did not fail. The identity did.
Presence is not the enemy
AnimatePresence and shared layout are allowed to work together. Motion's own shared-layout examples use them together.
The question is what should leave.
If the identity itself needs to return to its origin, Presence can keep the outgoing node around long enough for that transition to happen. If decorations should fade separately, give those decorations their own keys and exits.
Do not make every property perform the same job.
Layout carries continuity.
Opacity carries appearance.
A divider, arrow, or wash can disappear without asking the object itself to dissolve.
Use identity when identity matters
Shared layout is not free in attention, complexity, or bundle surface.
Use it when the relationship is the point: a card becomes a detail view, an image becomes a lightbox, two items exchange place.
A command tab you hit all day does not automatically need a pill that chases you.
Frequency is still a design input.
You are not moving one element.
You are telling two elements they belong to the same story.