Each link below navigates with the turbo router and uses the browser's native View Transitions API to animate the page change. Try clicking around and using the browser's back button.
view-transitions layout opts in to both the turbo router (turbo-visit-control: enable) and view transitions (turbo-view-transition: same-origin). Both checks read from the page you are leaving, so navigating from the site home into here is a regular full page load; every link between the demo pages below will use turbo plus a view transition.
A gallery of cards. Clicking a card morphs the card's hero panel into the detail page hero using a shared
view-transition-name. Other content cross-fades.
A 3-step flow that slides forward on Next and slides back on Previous (or the browser back button), driven by the
data-turbo-visit-direction attribute the turbo router sets on <html>.
Replaces the default cross-fade with a subtle zoom animation. Useful for content-heavy pages where a horizontal slide would feel jarring.
view-transitions layout adds <meta name="turbo-view-transition" content="same-origin"> alongside the existing turbo meta.assets/less/pages/view-transitions.less.view-transition-name: vt-main-header with no animation, so it stays put while the content underneath morphs.prefers-reduced-motion: reduce rule zeros out the duration for users who opt out.