react-view-transitions

name	React View Transitions
description	IMPLEMENT smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use for page transitions, route changes, shared element animations, enter/exit animations, list reorder, directional navigation. Browser support: Chromium 111+, Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers. Never call `document.startViewTransition` directly, use `<ViewTransition>` component.
license	MIT
metadata	{"author":"vercel","version":"2.0.0","last_updated":"2026-06-28T00:00:00.000Z"}
stacks	["React 19.2","Next.js 16 (App Router)"]
tags	["animations","view-transitions","react-19"]
related_skills	["responsive-layout-math","accessibility-audit-protocol","component-architecture-patterns","react-best-practices"]
category	react
version	2.0.0

React View Transitions

IDENTIFY: When to Activate

Activate when user wants to add:

• Page transitions between routes
• Shared element animations (element morphs between screens)
• List reorder animations
• Enter/exit animations for components appearing/disappearing
• Directional navigation (forward/back transitions)
• Or mentions: "view transitions", "startViewTransition", "ViewTransition", "animate between pages"

DECIDE: Animation Pattern Selection

For every transition opportunity, implement ALL applicable patterns, in this priority order:

Priority 1: Shared element, element appears on both source and destination pages
  → Use <ViewTransition name="unique-id" share="morph">
  → Communicates: "Same thing, going deeper"

Priority 2: Suspense reveal, content loads async
  → Use <ViewTransition enter="fade-in" default="none">
  → Communicates: "Data loaded"

Priority 3: List identity, items rearranged
  → Use <ViewTransition key={item.id}> per item
  → Communicates: "Same items, new arrangement"

Priority 4: State change, component enters/exits
  → Use <ViewTransition enter="slide-in" exit="slide-out">
  → Communicates: "Something appeared/disappeared"

Priority 5: Route change, navigating between pages
  → Use type-keyed ViewTransition with addTransitionType
  → Communicates: "Going to a new place"

ANIMATION STYLE SELECTION

Navigation Context	Animation	Why
Hierarchical (list → detail)	Directional: nav-forward / nav-back	Communicates spatial depth
Lateral (tab → tab)	Fade (default="none") or no animation	No depth to communicate
Suspense reveal	enter/exit string props	Content arriving
Background refresh	default="none"	Silent, no animation needed

EXECUTE: Implementation Workflow

Step 1: Audit Transition Opportunities

Identify ALL of these before writing code:

• Elements appearing on multiple pages (shared element candidates)
• Navigation paths (hierarchical vs lateral vs back)
• Suspense boundaries (content loading states)
• Lists that reorder
• Components that mount/unmount conditionally

Step 2: Setup