react-view-transitions

Name: react-view-transitions
Author: vercel-labs

29kstars2.6kforks

How to install react-view-transitions?

vercel-labs/agent-skills/react-view-transitions

$npx -y skills add vercel-labs/agent-skills --skill react-view-transitions

Installs into the current project.

Summary

Guide for implementing smooth, native-feeling animations using React's View Transition API (<ViewTransition> component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create s

Files · 1

View on GitHub

SKILL.md

1	# React View Transitions
2
3	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.
4
5	## When to Animate
6
7	Every `<ViewTransition>` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.
8
9	Implement all applicable patterns from this list, in this order:
10
11	\| Priority \| Pattern \| What it communicates \|
12	\|----------\|---------\|---------------------\|
13	\| 1 \| Shared element (`name`) \| "Same thing — going deeper" \|
14	\| 2 \| Suspense reveal \| "Data loaded" \|
15	\| 3 \| List identity (per-item `key`) \| "Same items, new arrangement" \|
16	\| 4 \| State change (`enter`/`exit`) \| "Something appeared/disappeared" \|
17	\| 5 \| Route change (layout-level) \| "Going to a new place" \|
18
19	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.
20
21	### Choosing Animation Style
22
23	\| Context \| Animation \| Why \|
24	\|---------\|-----------\|-----\|
25	\| Hierarchical navigation (list → detail) \| Type-keyed `nav-forward` / `nav-back` \| Communicates spatial depth \|
26	\| Lateral navigation (tab-to-tab) \| Bare `<ViewTransition>` (fade) or `default="none"` \| No depth to communicate \|
27	\| Suspense reveal \| `enter`/`exit` string props \| Content arriving \|
28	\| Revalidation / background refresh \| `default="none"` \| Silent — no animation needed \|
29
30	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.
31
32	---
33
34	## Availability
35
36	- 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.
37	- Without Next.js: Install `react@canary react-dom@canary` (`ViewTransition` is not in stable React).
38	- Browser support: Chromium 111+, Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.
39
40	---
41
42	## Implementation Workflow
43
44	When adding view transitions to an existing app, follow `references/implementation.md` step by step. Start with the audit — do not skip it. Copy the CSS recipes from `references/css-recipes.md` into the global stylesheet — do not write your own animation CSS.
45
46	---
47
48	## Core Concepts
49
50	### The `<ViewTransition>` Component
51
52	```jsx
53	import { ViewTransition } from 'react';
54
55	<ViewTransition>
56	<Component />
57	</ViewTransition>
58	```
59
60	React auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself.
61
62	### Animation Triggers
63
64	\| Trigger \| When it fires \|
65	\|---------\|--------------\|
66	\| enter \| `<ViewTransition>` first inserted during a Transition \|
67	\| exit \| `<ViewTransition>` first removed during a Transition \|
68	\| update \| DOM mutations inside a `<ViewTransition>`. With nested VTs, mutation applies to the innermost one \|
69	\| share \| Named VT unmounts and another with same `name` mounts in the same Transition \|
70
71	Only `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate.
72
73	### Critical Placement Rule
74
75	`<ViewTransition>` only activates enter/exit if it appears before any DOM nodes:
76
77	```jsx
78	// Works
79	<ViewTransition enter="auto" exit="auto">
80	<div>Content</div>
81	</ViewTransition>
82
83	// Broken — div wraps the VT, suppressing enter/exit
84	<div>
85	<ViewTransition enter="auto" exit="auto">
86	<div>Content</div>
87	</ViewTransition>
88	</div>
89	```
90
91	---
92
93	## Styling with View Transition Classes
94
95	### Props
96
97	Values: `"auto"` (browser cross-fade), `"none"` (disabled), `"class-name"` (custom CSS), or `{ [type]: value }` for type-specific animations.
98
99	```jsx
100	<ViewTransition default="none" enter="slide-in" exit="slide-out" share="morph" />
101	``

People who liked this also viewed

6 picks

Type

react-view-transitions

29kstars2.6kforks

View on GitHub

How to install react-view-transitions?

vercel-labs/agent-skills/react-view-transitions

$npx -y skills add vercel-labs/agent-skills --skill react-view-transitions

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# React View Transitions
2
3	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.
4
5	## When to Animate
6
7	Every `<ViewTransition>` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.
8
9	Implement all applicable patterns from this list, in this order:
10
11	\| Priority \| Pattern \| What it communicates \|
12	\|----------\|---------\|---------------------\|
13	\| 1 \| Shared element (`name`) \| "Same thing — going deeper" \|
14	\| 2 \| Suspense reveal \| "Data loaded" \|
15	\| 3 \| List identity (per-item `key`) \| "Same items, new arrangement" \|
16	\| 4 \| State change (`enter`/`exit`) \| "Something appeared/disappeared" \|
17	\| 5 \| Route change (layout-level) \| "Going to a new place" \|
18
19	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.
20
21	### Choosing Animation Style
22
23	\| Context \| Animation \| Why \|
24	\|---------\|-----------\|-----\|
25	\| Hierarchical navigation (list → detail) \| Type-keyed `nav-forward` / `nav-back` \| Communicates spatial depth \|
26	\| Lateral navigation (tab-to-tab) \| Bare `<ViewTransition>` (fade) or `default="none"` \| No depth to communicate \|
27	\| Suspense reveal \| `enter`/`exit` string props \| Content arriving \|
28	\| Revalidation / background refresh \| `default="none"` \| Silent — no animation needed \|
29
30	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.
31
32	---
33
34	## Availability
35
36	- 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.
37	- Without Next.js: Install `react@canary react-dom@canary` (`ViewTransition` is not in stable React).
38	- Browser support: Chromium 111+, Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.
39
40	---
41
42	## Implementation Workflow
43
44	When adding view transitions to an existing app, follow `references/implementation.md` step by step. Start with the audit — do not skip it. Copy the CSS recipes from `references/css-recipes.md` into the global stylesheet — do not write your own animation CSS.
45
46	---
47
48	## Core Concepts
49
50	### The `<ViewTransition>` Component
51
52	```jsx
53	import { ViewTransition } from 'react';
54
55	<ViewTransition>
56	<Component />
57	</ViewTransition>
58	```
59
60	React auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself.
61
62	### Animation Triggers
63
64	\| Trigger \| When it fires \|
65	\|---------\|--------------\|
66	\| enter \| `<ViewTransition>` first inserted during a Transition \|
67	\| exit \| `<ViewTransition>` first removed during a Transition \|
68	\| update \| DOM mutations inside a `<ViewTransition>`. With nested VTs, mutation applies to the innermost one \|
69	\| share \| Named VT unmounts and another with same `name` mounts in the same Transition \|
70
71	Only `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate.
72
73	### Critical Placement Rule
74
75	`<ViewTransition>` only activates enter/exit if it appears before any DOM nodes:
76
77	```jsx
78	// Works
79	<ViewTransition enter="auto" exit="auto">
80	<div>Content</div>
81	</ViewTransition>
82
83	// Broken — div wraps the VT, suppressing enter/exit
84	<div>
85	<ViewTransition enter="auto" exit="auto">
86	<div>Content</div>
87	</ViewTransition>
88	</div>
89	```
90
91	---
92
93	## Styling with View Transition Classes
94
95	### Props
96
97	Values: `"auto"` (browser cross-fade), `"none"` (disabled), `"class-name"` (custom CSS), or `{ [type]: value }` for type-specific animations.
98
99	```jsx
100	<ViewTransition default="none" enter="slide-in" exit="slide-out" share="morph" />
101	``

People who liked this also viewed

6 picks

Type