Columns Transition

Pro

Bars rise one after another to cover the page, then carry on upward like blinds.

Usage

Set it up: Paste each file at the path shown. app/template.tsx plays the transition on every navigation of your app, and instrumentation-client.ts, next to your app folder, tells it which updates are navigations. If you already export onRouterTransitionStart, call ours from yours.
Another transition for one section: Add a template.tsx with a different transition to that folder, such as app/docs/template.tsx. Like layouts, the nearest one plays for the pages below it. Stack, Slide-over and Frame move the whole page, header included, so they go in the root template only.
Going back: Links tagged transitionTypes={["nav-back"]} play the transition in reverse. The browser's back and forward buttons swap pages instantly: React commits them at once so the browser can restore the scroll position.
While it plays: Clicks don't reach the page under the panel. A navigation started during a transition waits for it to end, then swaps without animating. Animations of view transitions inside your pages run under the panel.
Loading states: A page that shows loading.tsx is revealed in its loading state. Animating the content in when it arrives is up to the page.
Customize: Override the --page-transition-* properties from page-transition.css in your styles to change the panel color, durations, distance or easing.
Browsers and accessibility: Plays in Chrome and Edge 125+, Safari 18.2+ and Firefox 144+, and swaps pages instantly elsewhere. With reduced motion, pages cross-fade instead. A page whose root element uses display: contents can't be captured.