Page transitions

Page transitions

The site's real navigation motion, live and tunable — with the network and server conditions a visitor actually brings. Throttle the fetch, feel the dead time, tune the timing variables, copy them back.

How this page works

  • Every run in the frame goes through the production DirectionalTransition and the recipes in view-transition.css — the GUI live-overrides only the :root timing variables, and clears them when you leave.
  • The network and server sliders insert the real dead time a navigation spends before anything moves: Next.js fetches the RSC payload, then the transition plays. Production ships no loading UI, so that stillness is the actual experience — the timeline below the frame plots it.
  • A view transition freezes the whole document while it runs (browser behavior), this GUI included. That is also true in production.
  • The frame scrolls through its own Lenis instance, tuned like the site's, and transition snapshots are clipped to the window while you are here — nothing escapes the mock browser.
  • Copy writes the :root block for view-transition.css.

Where each technique fires in production

nav-forward
Mask reveal from the right edge, going deeper. Cards (title links and body clicks via useClickableCard), work/segment index cards, and pagination toward higher pages.
nav-back
Mask reveal from the left edge, going shallower. Pagination toward lower pages and back links.
nav-lateral
Top-down mask reveal, no spatial depth — the scroll-reveal wipe at page scale. The CMSLink default — header logo, takeover menu links, 404.
shared-element morph
A post card image and its detail hero carry the same view-transition-name (postImageVtName), so the browser interpolates between them over the move duration.
pinned chrome
site-header, site-footer and the global WebGL canvas are named groups with animation: none — they hold rock-steady through every swap.
untagged — hard cut
Browser back/forward, revalidations, search-as-you-type URL sync, and the menu hero handoff's push carry no type, and default: 'none' keeps them silent by design.