View Transitions for Static Sites, the Progressive-Enhancement Way

Single-page frameworks sell smooth transitions as a reason to ship a router and a runtime. The cross-document View Transitions API gives a static, multi-page site the same fades — no JavaScript, no framework.

Opt in from CSS

For same-origin navigations, one at-rule turns on the default cross-fade:

@view-transition { navigation: auto; }

That’s the whole opt-in. The browser snapshots the old page, loads the new one, and cross-fades between them.

Name the elements that should persist

Give a shared element the same view-transition-name on both pages and the browser morphs it across the navigation instead of fading it — perfect for a hero image that continues from a card into its detail page:

.post-hero { view-transition-name: hero; }

Respect reduced motion

Wrap the animation in a preference query so people who ask for less motion get an instant swap:

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
}

Why it fits a Hugo site

There’s no client router to install and nothing to hydrate. Browsers without support just navigate normally — the fade is a pure enhancement layered on top of links that already work.