Skip to content

View Transitions gallery

Click a card - it morphs into the detail page's hero. That's a shared-element transition: the tile and the hero declare the same view-transition-name, and the browser animates position, size and paint between them. Everything else cross-fades.

The router side is one option (o.ViewTransitions = true) - it wraps each navigation's re-render in document.startViewTransition. The morph wiring is pure CSS (view-transition-name here and on the detail hero). The page glide you see on every navigation - forward on links, mirrored on Back - is Brouter's built-in default (o.ViewTransitionDefaultAnimations); override it with any unlayered ::view-transition-* rule in your CSS, or turn it off. Browsers without the API navigate identically, just without the animation.