React View Transitions

React's <ViewTransition> component wraps the browser's native View Transitions API so you declare what animates; React triggers when via startTransition / useDeferredValue / Suspense. In Next.js App Router, route navigations are transitions, so it animates pages without a third-party motion library. Distributed as the official react-view-transitions agent skill.

The component lives in React (canary). The bookmark is the official react-view-transitions agent skill from vercel-labs/agent-skills (MIT) — a guide an agent installs to implement page transitions, shared-element morphs, directional nav, and Suspense reveals correctly. Source: X/@nextjs, 2026-04-02 Source: GitHub vercel-labs/agent-skills react-view-transitions, https://github.com/vercel-labs/agent-skills, 2026-06-12

What vs when

• What → wrap elements in <ViewTransition> (from react); matching name props across states morph an element between its old and new position/size.
• When → animations fire only on Transitions, Suspense, and useDeferredValue — not plain setState. Do not call document.startViewTransition manually; the component coordinates it. Source: GitHub vercel-labs/agent-skills, 2026-06-12 Source: Next.js guide "View transitions", https://nextjs.org/docs/app/guides/view-transitions, 2026-06-12

Next.js integration

// next.config.js
module.exports = { experimental: { viewTransition: true } }

import { ViewTransition } from "react"

• The App Router bundles React canary, so do not install react@canary yourself; <ViewTransition> works out of the box. (Without Next.js: react@canary react-dom@canary.)
• transitionTypes prop on next/link tags a navigation (e.g. "nav-forward"); requires experimental.viewTransition and Next.js 16+ (or canary). Fallback: startTransition(() => { addTransitionType("nav-forward"); router.push(href) }). Source: vercel-labs/agent-skills references/nextjs.md, 2026-06-12

Patterns

<ViewTransition> works in Server and Client Components; addTransitionType / startTransition for programmatic nav require Client Components. Browser support: Chromium 111+, Firefox 144+, Safari 18.2+ — graceful degradation elsewhere. Source: vercel-labs/agent-skills, 2026-06-12

Upstream Skill Guardrails

The 2026-07-06 source reread of Vercel's react-view-transitions skill adds four local guardrails:

• Use default="none" liberally so unrelated Suspense resolves, deferred updates, or background revalidations do not all cross-fade by accident.
• Pair enter and exit animations when using directional page transitions.
• Put directional page transitions in page components, not shared layouts, so route-specific transition types stay local.
• Add the reduced-motion CSS recipe to globals; view transitions are decorative unless the task explicitly depends on spatial continuity.

Nested view transitions still have a platform limitation: when an outer transition exits, nested enter/exit animations inside it do not independently fire. Do not promise per-item staggered page transitions unless the implementation proves it in the target browser. Source: vercel-labs/agent-skills react-view-transitions, commit f8a72b9603728bb92a217a879b7e62e43ad76c81, checked 2026-07-06

Artifact and version snapshot

The reviewed X video is a skills.sh distribution walkthrough, not just a motion demo: it opens vercel-labs/agent-skills, shows the package-level skill list, then drills into vercel-react-view-transitions. The local thumbnail records the package page as 8 skills and roughly 697.4K total installs; the contact-sheet review shows the vercel-react-view-transitions page with 147 installs. Treat this as an installable agent-skill source that needs source/registry verification before adoption. Source: local artifact wiki/assets/x-bookmarks/2039740163979698413/image-01.jpg; video reviewed from X/@nextjs, 2026-04-02

Current version snapshot, checked 2026-07-01:

• next: latest 16.2.10; preview 16.3.0-preview.5; canary 16.3.0-canary.73; registry modified 2026-07-01T20:13:19.688Z. Source: npm registry packument, 2026-07-01
• vercel-labs/agent-skills: git ls-remote returned HEAD f8a72b9603728bb92a217a879b7e62e43ad76c81 and no tags. Use the source commit, not the tweet date, as the skill-version anchor. Source: GitHub vercel-labs/agent-skills, 2026-07-01

Do Not Confuse With Next 16.3 Instant Navigations

Next.js 16.3 Instant Navigations are not only a ViewTransition feature. The current 16.3 Preview path is a rendering/prefetching system: enable Cache Components, choose Stream/Cache/Block for server awaits, enable Partial Prefetching, inspect reusable route shells, and use the instant() Playwright helper to prevent regressions. Use Next.js for that framework behavior; use this page when the task is specifically about declarative React view-transition animation or shared-element motion. Source: Next.js 16.3 Instant Navigations, 2026-06-25

Relationship to the CSS API

CSS View Transitions API documents the underlying platform API (document.startViewTransition, @view-transition, ::view-transition-* pseudo-elements, pageswap/pagereveal). This page is the React/Next.js binding: the <ViewTransition> component is the declarative wrapper, and route navigations auto-trigger it. Plumbing (@view-transition, keyframes) still belongs in globals.css per CSS UI Enforcement; gate decorative motion with prefers-reduced-motion. See Frontier Stack 2026 for stack placement.

---

Timeline

• 2026-07-01 | Deep-reviewed the X media artifact: repaired the local thumbnail, inspected the video contact sheet, resolved the skills.sh install page and Next guide links, and refreshed the Next/npm plus vercel-labs/agent-skills source snapshot. Source: X/@nextjs, 2026-04-02; skills.sh; npm registry; GitHub vercel-labs/agent-skills
• 2026-07-06 | Reread the upstream react-view-transitions skill at vercel-labs/agent-skills f8a72b9603728bb92a217a879b7e62e43ad76c81 and imported guardrails around default="none", paired enter/exit animations, page-level directional transitions, nested limitations, and reduced-motion CSS. Source: GitHub vercel-labs/agent-skills, 2026-07-06
• 2026-06-26 | Clarified that Next.js 16.3 Instant Navigations now route through Next.js and Cache Components / Partial Prefetching. This page remains the React <ViewTransition> animation route. Source: Next.js blog, 2026-06-25
• 2026-04-02 | Next.js shipped the react-view-transitions agent skill — add React <ViewTransition> animations to any React app, with native Next.js integration (animate across navigations, slide pages forward/back, smooth loading). @nextjs, 2,177 likes / 1,874 bookmarks; demo video. Source: X/@nextjs, 2026-04-02
• 2026-06-12 | Wiki page created from React/Next bookmark absorption; resolved the Next.js View Transitions guide + vercel-labs/agent-skills react-view-transitions SKILL. Source: Next.js docs + vercel-labs/agent-skills, 2026-06-12