vercel-react-view-transitions

Wrap your page content in React's `<ViewTransition>` component and trigger navigation inside `startTransition`. Use `addTransitionType` to tag transitions with types like 'nav-forward' so CSS classes can apply directional slide animations.

Assign the same `name` prop to two `<ViewTransition>` components, one unmounting and one mounting in the same transition. React morphs between them automatically. Only one VT with a given name can be mounted at a time, so use unique names like `photo-${id}`.

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

The `<ViewTransition>` element must appear before any DOM nodes in its parent; wrapping it in a div suppresses enter/exit triggers. Also, only `startTransition`, `useDeferredValue`, or Suspense activate VTs, regular setState does not animate.

View transitions are supported in Chromium 111+, Firefox 144+, and Safari 18.2+. On unsupported browsers, React skips the animations gracefully, so the UI still updates without visual transitions.

`router.back()` and browser back/forward buttons use popstate, which is synchronous and incompatible with `startViewTransition`. Use `router.push()` with an explicit URL instead to trigger the transition.