No. 03

View Transitions: A Field Guide

You're already inside a View Transition — every navigation on this site is one. Here's the API behind it, the variants, and the traps, with a live lab to poke at.

Case study by Eega Somasekhara Reddy

  • View Transitions
  • CSS
  • React
  • Web APIs
Role
Design + Dev
Team
Solo
Timeframe
2025
View Transitions lab — cross-fade, clip reveal, and slide variants cycling on hover
01

You're Already In One

Every time you move between sections of this site, or open a case study, the browser isn't just swapping pages — it's running a View Transition. The slide, the circle reveal, the card that morphs into this page: all the same API.

This is a field guide, not a war story — what I learned wiring up this site, distilled into the variants and gotchas, with a live lab. The previews below are simulated (plain CSS/JS) so they stay contained; the real API code sits beside each one.
02

The Lab

Pick a variant, hit Run, and watch it play. Each tab pairs a simulated preview with the real View Transitions code that produces it.

Simulated preview
Page A
Page B
implementation.tsxpreview

The default. With no view-transition-name on anything, the browser snapshots the whole page as one image (root) and cross-fades old → new. Free — you get it just by wrapping the DOM change.

// the entire default transition
document.startViewTransition(() => {
  // swap the DOM however you like
  renderNewView();
});