vercel-react-view-transitions

Wrap page components in the React `<ViewTransition>` component and trigger updates with `startTransition`, `useDeferredValue`, or `Suspense`. Control animations with CSS classes targeting `::view-transition-old` and `::view-transition-new` pseudo-elements.

Enable `experimental.viewTransition` in next.config.js so `<Link>` navigations run inside `document.startViewTransition`. Use the `transitionTypes` prop on `<Link>` or `startTransition` with `addTransitionType` and `router.push()` for directional animations.

In Next.js App Router, no — React canary is bundled internally and ViewTransition works out of the box. Without Next.js, you must install `react@canary` and `react-dom@canary` since ViewTransition is not in stable React.

Common causes include placing the `<ViewTransition>` inside a DOM node instead of before it, putting it in a layout that persists across navigations, or triggering updates with regular `setState` instead of `startTransition`. Nested VTs inside a parent VT also never fire their own enter/exit.

`router.back()` and browser back/forward buttons fire synchronous `popstate` events, which are incompatible with `startViewTransition`. Use `router.push()` with an explicit URL inside `startTransition` to preserve the animation.

Give two `<ViewTransition>` components the same unique `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 `share` takes precedence over `enter`/`exit`.