From 2c48f5738455fa6cd5af4cf1165f6db1880bfb3c Mon Sep 17 00:00:00 2001 From: Magnus Madsen Date: Mon, 3 Aug 2026 16:49:54 +0200 Subject: [PATCH] feat: cross-fade page navigations with view transitions Opt same-origin navigations into browser-native cross-document view transitions so page loads cross-fade instead of flashing white. The navbar is snapshotted separately so it holds still during the fade, and the transition is disabled under prefers-reduced-motion. Browsers without support (e.g. Firefox) keep plain full-page loads. Co-Authored-By: Claude Fable 5 --- src/styles/global.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/styles/global.css b/src/styles/global.css index de42d9b..a485bdd 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,3 +1,16 @@ +/* Cross-fade same-origin navigations instead of flashing white. Browsers + without cross-document view transitions (e.g. Firefox) ignore this and + keep plain full-page loads. */ +@view-transition { + navigation: auto; +} + +@media (prefers-reduced-motion) { + @view-transition { + navigation: none; + } +} + body { font-family: 'Open Sans', sans-serif; overflow-y: scroll; @@ -30,6 +43,9 @@ p:last-child { .menu { margin-left: -15px; margin-right: -15px; + /* The navbar is identical on every page; naming it lifts it out of the + root cross-fade so it holds still during transitions. */ + view-transition-name: navbar; } .page {