View Transitions API Generator

The View Transitions API is a browser feature that animates between two states of the DOM without you writing any low-level animation code. You call document.startViewTransition(callback); the browser takes a screenshot of the page, runs your callback (which mutates the DOM), takes a second screenshot, and then cross-fades between them inside special ::view-transition-old() and ::view-transition-new() pseudo-elements. You can override the cross-fade with @keyframes to create slides, scales, or shared-element transitions. It shipped in Chrome 111 (March 2023), Safari 18 (September 2024), and is behind a flag in Firefox as of early 2026.

Same-document transitions (the kind this generator produces) work in Chrome 111+, Edge 111+, Opera 97+, and Safari 18+. Firefox supports them behind the layout.css.view-transitions.enabled preference but does not enable it by default. Cross-document transitions (between MPA navigations) are newer — Chrome 126+ and Safari 18+. Always wrap your call in `if ('startViewTransition' in document)` so unsupported browsers fall back to an instant DOM swap; the generator's banner uses exactly that detection.

SPA (single-page application) transitions use document.startViewTransition(callback) — the JavaScript API. You call it inside React/Vue/Svelte route handlers or anywhere you mutate state. MPA (multi-page application) transitions are CSS-only: you add @view-transition { navigation: auto; } to both the source and destination pages, and the browser animates same-origin navigations automatically. SPA transitions are more flexible (you can transition any state change, not just navigation) but require JavaScript; MPA transitions are zero-JS but only fire on full navigations within the same origin.

The simplest snippet is: `if (document.startViewTransition) { document.startViewTransition(() => { document.body.classList.toggle('dark'); }); } else { document.body.classList.toggle('dark'); }`. The else branch is the fallback for Firefox or older browsers — it just runs the mutation without animation. You can also chain the returned promises: `const t = document.startViewTransition(updateDom); await t.ready; // animations have begun; await t.finished; // they're done.` The ready promise is useful when you want to add JavaScript-driven Web Animations API tweaks on top of the snapshot pseudo-elements.

Each view-transition-name must be unique among visible elements in a single page snapshot. If two elements have the same name when document.startViewTransition() runs, the entire transition is skipped (and a warning is logged). This means you cannot apply view-transition-name: card to every card in a list — instead, generate a unique name per item like view-transition-name: card-${id}. For shared-element transitions across pages or routes, the same name on both the source and destination element tells the browser to morph between them; if either side is missing the name, the element falls back to the cross-fade group instead.

Always feature-detect with `if (document.startViewTransition)` and run your DOM mutation in the else branch without animation. For MPA-style transitions, the @view-transition rule is silently ignored by browsers that do not understand it. For visual fallbacks (e.g., still wanting some animation in Firefox), you can layer a CSS transition on the element itself — when the View Transitions API kicks in, the snapshot replaces the live element so your CSS transition does not double-animate; when it does not, your CSS transition still runs. This 'progressive enhancement two-layer' pattern is the most resilient strategy.

Yes. This generator runs entirely in your browser using vanilla CSS, the View Transitions API, and React state — no transition names, durations, easing curves, or generated code are ever sent to a server. The browser-support banner uses the local `'startViewTransition' in document` check, not a remote feature-detection service. There is no analytics tied to your input, and the page works offline once loaded, so you can paste internal route names, design-system class names, or unreleased component identifiers without leaving any trace.