diff --git a/src/components/animate-in.tsx b/src/components/animate-in.tsx
index 1c703fb..f5fb962 100644
--- a/src/components/animate-in.tsx
+++ b/src/components/animate-in.tsx
@@ -25,8 +25,9 @@ export function AnimateIn({ children, delay = 0, threshold = 0.15 }: AnimateInPr
     const rect = el.getBoundingClientRect();
     const inView = rect.top < window.innerHeight && rect.bottom > 0;
     const isReload = (performance.getEntriesByType?.("navigation")?.[0] as PerformanceNavigationTiming)?.type === "reload";
+    const isSpaNav = !!(window as any).__astroNavigation;
 
-    if (inView && isReload) {
+    if (inView && (isReload || isSpaNav)) {
       setSkip(true);
       setVisible(true);
       return;
diff --git a/src/layouts/content.astro b/src/layouts/content.astro
index 3b974b2..0aeabf5 100644
--- a/src/layouts/content.astro
+++ b/src/layouts/content.astro
@@ -40,28 +40,51 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
       handleFocus={false}
     />
     <style>
-      ::view-transition-new(:root) {
-        animation: none;
-      }
+      ::view-transition-new(:root),
       ::view-transition-old(:root) {
         animation: none;
       }
+      #nav-mask {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        background: rgb(var(--color-background));
+        pointer-events: none;
+        opacity: 0;
+        transition: none;
+      }
+      #nav-mask.active {
+        opacity: 1;
+      }
     </style>
     <script is:inline set:html={THEME_LOADER_SCRIPT} />
     <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
-  
-<script>
-  document.addEventListener('astro:before-swap', (e) => {
-    // Instantly hide old page to prevent flash
-    document.documentElement.style.opacity = '0';
-  });
-  document.addEventListener('astro:after-swap', () => {
-    // Show new page immediately
-    document.documentElement.style.opacity = '1';
-  });
-</script>
+    <script is:inline>
+      (function() {
+        function getMask() {
+          var m = document.getElementById('nav-mask');
+          if (!m) {
+            m = document.createElement('div');
+            m.id = 'nav-mask';
+            document.documentElement.appendChild(m);
+          }
+          return m;
+        }
+        document.addEventListener('astro:before-preparation', function() {
+          getMask().classList.add('active');
+        });
+        document.addEventListener('astro:after-swap', function() {
+          var m = getMask();
+          setTimeout(function() { m.classList.remove('active'); }, 50);
+        });
+        document.addEventListener('astro:after-swap', function() {
+          window.__astroNavigation = true;
+        });
+      })();
+    </script>
   </head>
   <body class="bg-background text-foreground min-h-screen flex flex-col">
+    <div id="nav-mask"></div>
     <Header client:load />
     <main class="flex-1 flex flex-col">
       <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 pb-20 lg:pb-8 flex-1 relative z-10">
diff --git a/src/layouts/index.astro b/src/layouts/index.astro
index 7e9ca99..7bc87b5 100644
--- a/src/layouts/index.astro
+++ b/src/layouts/index.astro
@@ -39,28 +39,53 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
     <link rel="sitemap" href="/sitemap-index.xml" />
     <ClientRouter />
     <style>
-      ::view-transition-new(:root) {
-        animation: none;
-      }
+      ::view-transition-new(:root),
       ::view-transition-old(:root) {
         animation: none;
       }
+      #nav-mask {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        background: rgb(var(--color-background));
+        pointer-events: none;
+        opacity: 0;
+        transition: none;
+      }
+      #nav-mask.active {
+        opacity: 1;
+      }
     </style>
     <script is:inline set:html={THEME_LOADER_SCRIPT} />
     <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
-	
-<script>
-  document.addEventListener('astro:before-swap', (e) => {
-    // Instantly hide old page to prevent flash
-    document.documentElement.style.opacity = '0';
-  });
-  document.addEventListener('astro:after-swap', () => {
-    // Show new page immediately
-    document.documentElement.style.opacity = '1';
-  });
-</script>
-  </head>
+    <script is:inline>
+      (function() {
+        function getMask() {
+          var m = document.getElementById('nav-mask');
+          if (!m) {
+            m = document.createElement('div');
+            m.id = 'nav-mask';
+            document.documentElement.appendChild(m);
+          }
+          return m;
+        }
+        document.addEventListener('astro:before-preparation', function() {
+          getMask().classList.add('active');
+        });
+        document.addEventListener('astro:after-swap', function() {
+          var m = getMask();
+          // Wait for React to hydrate before revealing
+          setTimeout(function() { m.classList.remove('active'); }, 50);
+        });
+        // Mark SPA navigations so AnimateIn can detect them
+        document.addEventListener('astro:after-swap', function() {
+          window.__astroNavigation = true;
+        });
+      })();
+    </script>
+	</head>
   <body class="bg-background text-foreground overflow-hidden h-screen">
+    <div id="nav-mask"></div>
     <Header client:load transparent />
     <main>
       <Background layout="index" client:only="react" transition:persist />
diff --git a/src/layouts/resource.astro b/src/layouts/resource.astro
index 65e1c04..8cfff57 100644
--- a/src/layouts/resource.astro
+++ b/src/layouts/resource.astro
@@ -40,28 +40,51 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
       handleFocus={false}
     />
     <style>
-      ::view-transition-new(:root) {
-        animation: none;
-      }
+      ::view-transition-new(:root),
       ::view-transition-old(:root) {
         animation: none;
       }
+      #nav-mask {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        background: rgb(var(--color-background));
+        pointer-events: none;
+        opacity: 0;
+        transition: none;
+      }
+      #nav-mask.active {
+        opacity: 1;
+      }
     </style>
     <script is:inline set:html={THEME_LOADER_SCRIPT} />
     <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
-  
-<script>
-  document.addEventListener('astro:before-swap', (e) => {
-    // Instantly hide old page to prevent flash
-    document.documentElement.style.opacity = '0';
-  });
-  document.addEventListener('astro:after-swap', () => {
-    // Show new page immediately
-    document.documentElement.style.opacity = '1';
-  });
-</script>
+    <script is:inline>
+      (function() {
+        function getMask() {
+          var m = document.getElementById('nav-mask');
+          if (!m) {
+            m = document.createElement('div');
+            m.id = 'nav-mask';
+            document.documentElement.appendChild(m);
+          }
+          return m;
+        }
+        document.addEventListener('astro:before-preparation', function() {
+          getMask().classList.add('active');
+        });
+        document.addEventListener('astro:after-swap', function() {
+          var m = getMask();
+          setTimeout(function() { m.classList.remove('active'); }, 50);
+        });
+        document.addEventListener('astro:after-swap', function() {
+          window.__astroNavigation = true;
+        });
+      })();
+    </script>
   </head>
   <body class="bg-background text-foreground min-h-screen flex flex-col">
+    <div id="nav-mask"></div>
     <main class="flex-1 flex flex-col">
       <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 flex-1 relative z-10">
         <Background layout="content" position="right" client:only="react" transition:persist />
