How it works
Card, image and title share layoutIds with their dialog counterparts. Motion measures both boxes (FLIP) and animates transform + scale-corrected border-radius.
Card → Fullscreen
Shared-element transition with layoutId: a grid card morphs into a full-screen dialog and back.
★ showcaseMotion
Performance
Layout animations are measured once per change, then run as transforms. Children use layout="position" to avoid scale distortion.
Accessibility & reduced motion
Real role="dialog" with focus trap, Esc to close, focus restored to the originating card, and body scroll lock.
Export
transition={{ type: 'spring', stiffness: 320, damping: 32, mass: 1 }}