A panel rises from the bottom to cover the page, then carries on off the top.
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.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.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.loading.tsx is revealed in its loading state. Animating the content in when it arrives is up to the page.--page-transition-* properties from page-transition.css in your styles to change the panel color, durations, distance or easing.display: contents can't be captured.