View Transitions Hybrid

Try: Toggle layout. Uses document.startViewTransition + view-transition-name on the card.

Same-document morph

Vue Router can trigger navigations; the browser can animate the visual handoff when view transitions are enabled.

Want the page-to-page version? Try the cross-document demo.

Source

.card {
  view-transition-name: demo-card;
}
.card.wide { max-width: 100%; /* … */ }

document.getElementById("toggle").addEventListener("click", () => {
  const run = () => { card.classList.toggle("wide"); /* … */ };
  if (!document.startViewTransition) { run(); return; }
  document.startViewTransition(run);
});

Support: Same-document view transitions in Chromium; Safari 18+; evolving in Firefox. If nothing animates, the toggle still works.