# Vercel React View Transitions

> Guía para implementar animaciones nativas y fluidas con la View Transition API de React (<ViewTransition>, addTransitionType y pseudo-elementos CSS de view transition), sin librerías de animación de terceros.

Fuente: https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-react-view-transitions
Markdown: https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-react-view-transitions.md

Repositorio: https://github.com/vercel-labs/agent-skills
Autor: vercel-labs
Licencia: MIT
Actualizado: hace 28 días
Coste de contexto: 166 tok instalada, 3.6k tok al activarse, 30.4k tok con todos los archivos del bundle
Bundle: 9 archivos, 119 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add vercel-labs/agent-skills --skill react-view-transitions --agent claude-code
# Cursor
npx -y skills add vercel-labs/agent-skills --skill react-view-transitions --agent cursor
# Codex
npx -y skills add vercel-labs/agent-skills --skill react-view-transitions --agent codex
# Gemini CLI
npx -y skills add vercel-labs/agent-skills --skill react-view-transitions --agent gemini
# Windsurf
npx -y skills add vercel-labs/agent-skills --skill react-view-transitions --agent windsurf
# Cline
npx -y skills add vercel-labs/agent-skills --skill react-view-transitions --agent cline
```

## Qué hace

- Guía la implementación de animaciones con la View Transition API de React (<ViewTransition>, addTransitionType, pseudo-elementos CSS)
- Define un orden de prioridad de patrones: shared element, Suspense reveal, list identity, state change, route change
- Explica reglas de colocación, triggers (enter/exit/update/share) y uso de default="none"
- Cubre integración con Next.js y accesibilidad (reduced motion)

## Cuándo usarla

- El usuario quiere añadir transiciones de página o animar cambios de ruta
- Se necesitan animaciones de elemento compartido, enter/exit de componentes o reordenamiento de listas
- Se requieren animaciones direccionales de navegación adelante/atrás
- El usuario menciona view transitions, startViewTransition, ViewTransition o transition types

## Qué la activa

- "Añade una transición de vista al hacer clic en un elemento de la lista para ir al detalle"
- "Quiero animar el cambio de ruta con un slide direccional adelante/atrás"
- "Implementa un shared element transition entre la miniatura y la imagen completa"
- "Cómo animo la aparición de contenido cuando se resuelve un Suspense"

## Antes de instalar

- Sin Next.js hay que instalar react@canary y react-dom@canary; en Next.js el App Router ya incluye React canary y no debe instalarse por separado.

## Archivos

- AGENTS.md — 58 KB
- README.md — 2 KB
- SKILL.md — 14 KB
- metadata.json — 852 B
- references/css-recipes.md — 8 KB
- references/implementation.md — 9 KB
- references/nextjs.md — 10 KB
- references/patterns.md — 12 KB
- references/troubleshooting.md — 5 KB

## SKILL.md

Reproducido tal cual desde vercel-labs/agent-skills bajo MIT. Esta sección es el documento original y está en inglés.

# 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** (page-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.

### Choosing Animation Style

| Context | Animation | Why |
|---------|-----------|-----|
| Hierarchical navigation (list → detail) | Type-keyed `nav-forward` / `nav-back` | Communicates spatial depth |
| Lateral navigation (tab-to-tab) | Bare `<ViewTransition>` (fade) or `default="none"` | No depth to communicate |
| Suspense reveal | `enter`/`exit` string props | Content arriving |
| Revalidation / background refresh | `default="none"` | Silent — no animation needed |

Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.

---

## Availability

- **Next.js:** Do **not** install `react@canary` — the App Router already bundles React canary internally. `ViewTransition` works out of the box. `npm ls react` may show a stable-looking version; this is expected.
- **Without Next.js:** Install `react@canary react-dom@canary` (`ViewTransition` is not in stable React).
- Browser support: Chromium 125+ (React needs the v2 object form of `startViewTransition`), Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.

---

## Implementation Workflow

When adding view transitions to an existing app, **follow [references/implementation.md](references/implementation.md) step by step.** Start with the audit — do not skip it. Use [references/css-recipes.md](references/css-recipes.md) for the applicable CSS and adapt it to the app.

---

## Core Concepts

### The `<ViewTransition>` Component

```jsx
import { ViewTransition } from 'react';

<ViewTransition>
  <Component />
</ViewTransition>
```

React auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself.

### Animation Triggers

| Trigger | When it fires |
|---------|--------------|
| **enter** | `<ViewTransition>` first inserted during a Transition |
| **exit** | `<ViewTransition>` first removed during a Transition |
| **update** | DOM mutations inside a `<ViewTransition>`, or the boundary itself changing size/position due to an immediate sibling. With nested VTs, mutation applies to the innermost one |
| **share** | Named VT unmounts and another with same `name` mounts in the same Transition |

Only `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate.

### Critical Placement Rule

`<ViewTransition>` only activates enter/exit if it appears **before any DOM nodes**:

```jsx
// Works
<ViewTransition enter="auto" exit="auto">
  <div>Content</div>
</ViewTransition>

// Broken — div wraps the VT, suppressing enter/exit
<div>
  <ViewTransition enter="auto" exit="auto">
    <div>Content</div>
  </ViewTransition>
</div>
```

---

## Styling with View Transition Classes

### Props

Values: `"auto"` (browser cross-fade), `"none"` (disabled), `"class-name"` (custom CSS), or `{ [type]: value }` for type-specific animations.

```jsx
<ViewTransition default="none" enter="slide-in" exit="slide-out" share="morph" />
```

If `default` is `"none"`, all triggers are off unless explicitly listed.

### CSS Pseudo-Elements

- `::view-transition-old(.class)` — outgoing snapshot
- `::view-transition-new(.class)` — incoming snapshot
- `::view-transition-group(.class)` — container
- `::view-transition-image-pair(.class)` — old + new pair

See [references/css-recipes.md](references/css-recipes.md) for ready-to-use animation recipes.

---

## Transition Types

Tag transitions with `addTransitionType` so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:

```jsx
startTransition(() => {
  addTransitionType('nav-forward');
  addTransitionType('select-item');
  router.push('/detail/1');
});
```

Pass an object to map types to CSS classes. Works on `enter`, `exit`, **and** `share`:

```jsx
<ViewTransition
  enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}
  exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}
  share={{ 'nav-forward': 'morph-forward', 'nav-back': 'morph-back', default: 'morph' }}
  default="none"
>
  <Page />
</ViewTransition>
```

`enter` and `exit` don't have to be symmetric. For example, fade in but slide out directionally:

```jsx
<ViewTransition
  enter={{ 'nav-forward': 'fade-in', 'nav-back': 'fade-in', default: 'none' }}
  exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
  default="none"
>
```

**TypeScript:** `ViewTransitionClassPerType` requires a `default` key in the object.

For apps with multiple pages, extract the type-keyed VT into a reusable wrapper:

```jsx
export function DirectionalTransition({ children }: { children: React.ReactNode }) {
  return (
    <ViewTransition
      enter={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
      exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
      default="none"
    >
      {children}
    </ViewTransition>
  );
}
```

### `router.back()` and Browser Back Button

`router.back()` and the browser's back/forward buttons carry **no transition types**, so type-keyed animations (directional slides) resolve to their `default` and don't play — untyped shared-element morphs still apply. For typed animations, use `router.push()` with an explicit URL.

### Types and Suspense

Types are available during navigation but **not** during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter/exit; use simple string props for Suspense reveals.

### Shared Element Readiness

A shared element transition can pair elements only when both the old and new views are rendered in the same Transition. If incoming content suspends, only its fallback exists for that update; the resolved content appears in a later Suspense transition and can be animated separately.

---

## Shared Element Transitions

Same `name` on two VTs — one unmounting, one mounting — creates a shared element morph:

```jsx
<ViewTransition name="hero-image">
  <img src="/thumb.jpg" onClick={() => startTransition(() => onSelect())} />
</ViewTransition>

// On the other view — same name
<ViewTransition name="hero-image">
  <img src="/full.jpg" />
</ViewTransition>
```

- Only one VT with a given `name` can be mounted at a time — use unique names (`photo-${id}`). Watch for reusable components: if a component with a named VT is rendered in both a modal/popover *and* a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.
- `share` takes precedence over `enter`/`exit`. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), `enter`/`exit` fires instead. Consider whether the element needs a fallback animation for those paths.
- Two ways a wired-up morph silently never fires: (1) `default="none"` with no explicit `share` prop — share resolves to none; (2) type-keyed `share` where the navigation never adds the type — a plain link click resolves the map's `default`. Every link that should morph must add the type (`transitionTypes` on `next/link`, or `addTransitionType`).
- Never use a fade-out exit on pages with shared morphs — use a directional slide instead.

---

## Common Patterns

### Enter/Exit

```jsx
{show && (
  <ViewTransition enter="fade-in" exit="fade-out"><Panel /></ViewTransition>
)}
```

### List Reorder

```jsx
{items.map(item => (
  <ViewTransition key={item.id}><ItemCard item={item} /></ViewTransition>
))}
```

Trigger inside `startTransition`. Avoid wrapper `<div>`s between list and VT.

### Layout Displacement Morph

Only content inside an activated boundary animates position — everything else teleports to its new layout spot. Wrap the sibling content below a growing/shrinking list in a bare `<ViewTransition>` so it glides instead of jumping. See [Layout Displacement Morph](references/patterns.md#layout-displacement-morph).

### Composing Shared Elements with List Identity

Shared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested `<ViewTransition>` boundaries:

```jsx
{items.map(item => (
  <ViewTransition key={item.id}>                                      {/* list identity */}
    <Link href={`/items/${item.id}`}>
      <ViewTransition name={`item-image-${item.id}`} share="morph">   {/* shared element */}
        <Image src={item.image} />
      </ViewTransition>
      <p>{item.name}</p>
    </Link>
  </ViewTransition>
))}
```

The outer VT handles list reorder/enter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.

### Force Re-Enter with `key`

```jsx
<ViewTransition key={searchParams.toString()} enter="slide-up" default="none">
  <ResultsGrid />
</ViewTransition>
```

**Caution:** If wrapping `<Suspense>`, changing `key` remounts the boundary and refetches.

### Suspense Fallback to Content

Simple cross-fade:
```jsx
<ViewTransition>
  <Suspense fallback={<Skeleton />}><Content /></Suspense>
</ViewTransition>
```

Directional reveal:
```jsx
<Suspense fallback={<ViewTransition exit="slide-down"><Skeleton /></ViewTransition>}>
  <ViewTransition enter="slide-up" default="none"><Content /></ViewTransition>
</Suspense>
```

For more patterns, see [references/patterns.md](references/patterns.md).

---

## How Multiple VTs Interact

Every VT matching the trigger fires simultaneously in a single `document.startViewTransition`. VTs in **different** transitions (navigation vs later Suspense resolve) don't compete.

### Use `default="none"` Deliberately

Without it, every VT fires the browser cross-fade on **every** transition — Suspense resolves, `useDeferredValue` updates, background revalidations. Use `default="none"` on named/shared elements and type-keyed page VTs.

But it also turns off `update` (layout/reflow morphs) and `share` (a named pair with no explicit `share` prop never morphs). Keyed list items and displaced siblings *want* update — leave them bare or set `update="auto"`.

### Two Patterns Coexist

**Pattern A — Directional slides:** Type-keyed VT on each page, fires during navigation.
**Pattern B — Suspense reveals:** Simple string props, fires when data loads (no type).

They coexist because they fire at different moments. `default="none"` on both prevents cross-interference. Always pair `enter` with `exit`. Place directional VTs in page components, not layouts.

### Nested VT Limitation

When a parent VT mounts/unmounts **as one unit** with nested VTs inside it, the nested ones do not fire their own enter/exit — only the outermost VT animates. (A child VT mounted inside a *persistent* parent VT fires enter/exit normally.) Per-item staggered animations during page navigation are not currently available in Next.js; see [troubleshooting](references/troubleshooting.md) for the upstream experimental status.

---

## Next.js Integration

For Next.js integration (`transitionTypes` on `next/link` and `useRouter`, App Router patterns, Server Components), see [references/nextjs.md](references/nextjs.md).

---

## Accessibility

Always add the reduced motion CSS from [references/css-recipes.md](references/css-recipes.md#reduced-motion) to your global stylesheet.

---

## Reference Files

- **[references/implementation.md](references/implementation.md)** — Step-by-step implementation workflow.
- **[references/patterns.md](references/patterns.md)** — Patterns, animation timing, and events API.
- **[references/troubleshooting.md](references/troubleshooting.md)** — Symptom-driven debugging and runtime limitations.
- **[references/css-recipes.md](references/css-recipes.md)** — Ready-to-use CSS animation recipes.
- **[references/nextjs.md](references/nextjs.md)** — Next.js App Router patterns and Server Component details.

## Full Compiled Document

For the complete guide with all reference files expanded: `AGENTS.md`

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [vercel-labs](https://skillsagentes.com/creators/vercel-labs.md) — 20 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Vercel Optimize](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-optimize.md): Para optimizar coste y rendimiento en proyectos Vercel desplegados (Next.js, SvelteKit, Nuxt, Astro limitado): recopila métricas, uso y config, investiga solo candidatos respaldados por métricas y produce recomendaciones verificadas.
- [Writing Guidelines](https://skillsagentes.com/skills/vercel-labs/agent-skills/writing-guidelines.md): Revisa documentos o prosa para verificar el cumplimiento de las Writing Guidelines; úsalo al pedir "review my docs", "check writing style" o "audit prose".
- [Vercel Cli With Tokens](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-cli-with-tokens.md): Despliega y gestiona proyectos en Vercel usando autenticación por token. Útil para usar Vercel CLI con access tokens en vez de login interactivo, p. ej. "deploy to vercel", "set up vercel".
- [Vercel React Best Practices](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-react-best-practices.md): Guía de optimización de rendimiento para React y Next.js de Vercel Engineering, con 70 reglas en 8 categorías priorizadas por impacto para refactorizar y generar código.
- [Deploy To Vercel](https://skillsagentes.com/skills/vercel-labs/agent-skills/deploy-to-vercel.md): Despliega aplicaciones y sitios web en Vercel. Úsalo cuando el usuario pida acciones de despliegue como 'deploy my app', 'push this live' o 'create a preview deployment'.

## Skills relacionadas

- [Skill Creator](https://skillsagentes.com/skills/anthropics/skills/skill-creator.md): Crea skills nuevos, modifica y mejora los existentes, y mide su rendimiento. Úsalo para crear un skill desde cero, editarlo, correr evals, o afinar su descripción para que dispare mejor.
- [Agent Development](https://skillsagentes.com/skills/anthropics/claude-code/agent-development.md): Úsala cuando el usuario pida "crear un agente", "añadir un agente", "escribir un subagente" o necesite guía sobre estructura, frontmatter, ejemplos, tools o colores de agentes en plugins de Claude Code.
- [Claude Opus 4 5 Migration](https://skillsagentes.com/skills/anthropics/claude-code/claude-opus-4-5-migration.md): Migra prompts y código desde Claude Sonnet 4.0, Sonnet 4.5 u Opus 4.1 hacia Opus 4.5, actualizando strings de modelo y ajustando prompts según diferencias de comportamiento conocidas. No migra Haiku 4.5.
- [Hook Development](https://skillsagentes.com/skills/anthropics/claude-code/hook-development.md): Guía completa para crear e implementar hooks de plugins de Claude Code, con énfasis en la API avanzada de hooks basados en prompt.
- [Ponytail Debt](https://skillsagentes.com/skills/dietrichgebert/ponytail/ponytail-debt.md): Recolecta los comentarios `ponytail:` del repo en un ledger de deuda técnica, para que los atajos y aplazamientos deliberados no se olviden. Reporte de una sola vez, no cambia nada.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)