How it works
flushSync inside startViewTransition so React commits the DOM change synchronously; shared elements get matching view-transition-name.
View Transitions API
Gallery → detail morph using document.startViewTransition and view-transition-name.
★ showcaseView TransitionsCSS
Performance
The browser snapshots old/new states and animates them on the compositor. Zero JS animation libraries.
Accessibility & reduced motion
Unsupported browsers get an instant swap. Reduced mode disables it via @media (prefers-reduced-motion).
Export
transition={{ duration: 0.45, ease: [0.2, 0.8, 0.2, 1] }}