Motion
Motion
Layout & presence
AnimatePresence for enter/exit, layoutId for shared-element morphs, Reorder for sortable lists, and layout animations when content changes size.
Presence rules
Always set a stable
key on exiting children. Prefer mode="wait" for tab copy swaps so exit completes before enter.Shared layout modal
Click a card — layoutId morphs tile → dialog.
Loading interactive preview…
Sliding pill tabs
layoutId underline/pill + AnimatePresence panel.
Loading interactive preview…
Reorder list
Drag handles reorder with layout animations.
Loading interactive preview…
Exit notifications
layout + AnimatePresence for stacking toasts/list rows.
Loading interactive preview…