skills.rest
surfingalien
surfingalienCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-view-transitions

Implements native view transition animations in React and Next.js applications.

1|Updated May 6, 2026
Search Tags:#frontend#react#css#next.js#animation#view transitions#shared element
One-click install
npx skills add https://github.com/surfingalien/FinSurfing --skill vercel-react-view-transitions-surfingalien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-view-transitions
Source: https://github.com/surfingalien/FinSurfing/tree/main/Downloads/FinSurfing/.agents/skills/vercel-react-view-transitions
Command: npx skills add https://github.com/surfingalien/FinSurfing --skill vercel-react-view-transitions-surfingalien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding smooth, native-feeling animations between UI states in React is error-prone: developers must correctly coordinate <ViewTransition> placement, startTransition triggers, transition types, and CSS pseudo-elements, and small mistakes silently disable animations. ## Core Features & Use Cases - Step-by-step implementation workflow: Audit the app's navigation, isolate persistent elements, add directional page transitions, Suspense reveals, and shared element morphs in a defined order. - Ready-to-use CSS recipes: Copy-paste animations for fade, slide, directional navigation, shared element morph, text morph, scale, and reduced-motion support. - Next.js integration guidance: Covers experimental.viewTransition, the transitionTypes prop on next/link, loading.tsx Suspense boundaries, and same-route dynamic segment transitions. - Use Case: When building a photo gallery where tapping a thumbnail should morph the image into a detail page with a directional slide, this Skill provides the exact component structure, transition types, and CSS to implement it correctly. ## Quick Start Ask the agent to add view transitions to your React or Next.js app, starting with an audit of all links, Suspense boundaries, and shared visual elements.

Frequently Asked Questions about vercel-react-view-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add page transition animations in React?▼

Wrap page components in the `<ViewTransition>` component and trigger navigation inside `startTransition`. Use `addTransitionType` to tag direction (nav-forward/nav-back) and map types to CSS classes for directional slides.

How do I create shared element transitions between React views?▼

Give two `<ViewTransition>` components the same globally unique `name` prop on the source and target views. When one unmounts and the other mounts in the same transition, React morphs between them using the `share` trigger.

Does ViewTransition work with Next.js App Router?▼

Yes, the App Router bundles React canary internally so `<ViewTransition>` works out of the box. Enable `experimental.viewTransition` in next.config.js to animate `<Link>` navigations, and use the `transitionTypes` prop on links in Next.js 15+ canary or 16+.

Why is my React view transition not animating?▼

Common causes: the state update is not inside `startTransition`, a DOM node wraps the `<ViewTransition>` (suppressing enter/exit), or a parent layout VT blocks nested page VTs from firing. Also `router.back()` skips animations because popstate is synchronous.

Do I need to install react@canary to use ViewTransition?▼

Only outside Next.js — install `react@canary` and `react-dom@canary` since ViewTransition is not in stable React. In Next.js, do not install canary because the App Router already bundles it internally.

How do I handle reduced motion accessibility with view transitions?▼

Add a `prefers-reduced-motion: reduce` media query to your global stylesheet that sets `animation-duration: 0s` on `::view-transition-old`, `::view-transition-new`, and `::view-transition-group` pseudo-elements.

Related Skills

Explore More Software Engineering Skills→
MGriotMGriot

vercel-react-best-practices

Identify and apply React/Next.js performance optimizations to components, pages and data flows.

Community
Advanced
JhabbigJhabbig

interaction-design

Design UI interaction patterns with accessible timing and reduced-motion support.

Community
Advanced
moonwell-fimoonwell-fi

emil-design-engineering

Standardize accessible, touch-friendly, and performance-safe web UI design practices.

Official
Intermediate
wubq511wubq511
6

framer-motion-animator

Implement declarative web animations with Framer Motion and React.

Community
Intermediate