vercel-react-view-transitions

Wrap each page component in a type-keyed ViewTransition and tag navigations with transitionTypes on next/link or addTransitionType inside startTransition. The App Router bundles React canary internally, so ViewTransition works without installing react@canary or enabling experimental flags.

Give two ViewTransition boundaries the same name prop on the source and target views; when one unmounts and the other mounts in the same transition, they morph. Names must be globally unique, and the target must be rendered at navigation time for the pair to form.

No, ViewTransition is not in stable React. Outside Next.js you must install react@canary and react-dom@canary. Browser support requires Chromium 125+, Firefox 144+, or Safari 18.2+, with graceful degradation elsewhere.

Common causes include using regular setState instead of startTransition, setting default="none" without an explicit share or enter prop, wrapping the ViewTransition inside a DOM node which suppresses enter/exit, or navigating with router.back() which carries no transition types.

Add a prefers-reduced-motion media query to your global stylesheet that sets animation-duration and animation-delay to 0s on all view-transition-old, view-transition-new, and view-transition-group pseudo-elements. The Skill's css-recipes reference provides the exact snippet.