vercel-react-view-transitions

Wrap each page component in a ViewTransition with type-keyed enter and exit props, and tag navigations using addTransitionType inside startTransition or the transitionTypes prop on next/link. Place the ViewTransition in page components, not layouts, since layouts persist across navigations.

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

In Next.js the App Router bundles React canary internally, so ViewTransition works out of the box without installing canary. Outside Next.js you must install react@canary and react-dom@canary because ViewTransition is not in stable React.

Common causes include using regular setState instead of startTransition, setting default="none" without explicit trigger props, wrapping the ViewTransition in a DOM node which suppresses enter/exit, or navigating without the required transition type for type-keyed animations.

React's ViewTransition requires Chromium 125 or later, Firefox 144 or later, or Safari 18.2 or later, since React needs the v2 object form of startViewTransition. Unsupported browsers skip animations gracefully with no errors.

Add a prefers-reduced-motion media query to your global stylesheet that sets animation-duration and animation-delay to zero on all view-transition pseudo-elements. The skill's css-recipes reference provides the exact reduced-motion CSS block to copy.