vercel-react-view-transitions

SKILL.md

Native browser animations for React UI state changes using the View Transition API.

Declare animations with <ViewTransition> component; trigger with startTransition, useDeferredValue, or Suspense; control styling via CSS classes and pseudo-elements

Supports five animation patterns in priority order: shared elements (morphing), Suspense reveals, list identity (reorder), state changes (enter/exit), and route changes

Use addTransitionType to apply context-aware animations (e.g., directional slides for hierarchical navigation, fades for lateral tabs)

Works in Next.js App Router out of the box; requires react@canary for standalone React; gracefully degrades on unsupported browsers (Chromium 111+, Firefox 144+, Safari 18.2+)

Includes step-by-step implementation workflow, CSS animation recipes, and patterns for shared elements, list reorder, Suspense reveals, and directional navigation

React View Transitions

Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully.

When to Animate

Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.

Implement all applicable patterns from this list, in this order:

Priority
Pattern
What it communicates

1
Shared element (name)
"Same thing — going deeper"

2
Suspense reveal
"Data loaded"

3
List identity (per-item key)
"Same items, new arrangement"

4
State change (enter/exit)
"Something appeared/disappeared"

5
Route change (layout-level)
"Going to a new place"

This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.