# react-view-transitions

> A Claude Code skill from Vercel Labs that implements smooth view transitions using React's View Transition API, with built-in Next.js integration patterns for app-router page changes.

**Use case**: Add smooth page-to-page or state-to-state animations using the View Transition API

**Canonical URL**: https://agentcookbooks.com/skills/react-view-transitions/

**Topics**: claude-code, skills, react, nextjs, animation

**Trigger phrases**: "add view transitions", "animate this page change", "smooth transitions for this React app"

**Source**: [Vercel Labs](https://github.com/vercel-labs/agent-skills/tree/main/react-view-transitions)

**License**: MIT

---

## What it does

`react-view-transitions` implements the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) in React, with patterns specific to Next.js's app router. The skill knows how to wire transitions into navigation, into shared elements between pages, and into state changes within a single page.

It produces a working integration — components, hooks, and the CSS for the transition states — not just a description of what's possible.

## When to use it

- Building a marketing site or product UI where page-to-page motion matters
- Migrating to Next.js app router and wanting smoother transitions than the default
- Implementing shared-element animations (think "tap a card, it expands into a detail page")
- Adding meaningful loading/state-change motion to existing components

When *not* to reach for it:

- Apps where motion isn't a priority — over-animating hurts more than it helps
- Codebases with strict accessibility constraints around motion (always pair with `prefers-reduced-motion`)
- Targets where browser support is critical and you can't degrade gracefully (older browsers don't support the API)

## Install

From the [Vercel Labs agent-skills repo](https://github.com/vercel-labs/agent-skills). Follow the SKILL.md install path.

The skill assumes a React 18+ project; Next.js app router is supported with extra integration patterns specific to it.

## What a session looks like

1. **You describe the transition you want** ("page-to-page fade with shared header" or "card-to-detail expansion").
2. **The skill picks the right pattern** — global page transition, shared-element, or in-page state transition — and writes the components.
3. **It includes the `prefers-reduced-motion` fallback** — accessibility isn't optional and the skill enforces it.
4. **Output is integration-ready code**: hooks, CSS, and the wrappers needed to apply transitions to existing routes or components.

The discipline: it implements the *spec*, not a JS animation library. View transitions are browser-native, so the result is performant and degrades gracefully where unsupported.

## Receipts

**Where it works well:**
- Page-to-page transitions in Next.js app router are notoriously fiddly to wire up; the skill produces a working integration faster than reading the docs
- Shared-element transitions (the same element animating across page changes) work cleanly when the skill scaffolds the names
- The `prefers-reduced-motion` enforcement removes one of the most common accessibility gaps

**Where it backfires:**
- Browser support: as of 2026, the API is solid in Chromium and Safari but still uneven elsewhere. Test in your target browsers
- Complex animations across many shared elements can produce visual jank if not orchestrated carefully — the skill doesn't always catch this
- Over-animation: easy to add transitions everywhere, hard to know when motion is actively hurting UX. The skill won't tell you when to stop

**Pattern that works:** add transitions to the highest-traffic flows first (landing → product → checkout) and only those. Animating internal admin tools rarely pays off.

## Source and attribution

From the [Vercel Labs agent-skills repository](https://github.com/vercel-labs/agent-skills/tree/main/react-view-transitions). Maintained by Vercel Labs.

License: MIT.