diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 2ad2aca..69f49dd 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
diff --git a/app/layout.tsx b/app/layout.tsx
index b085bfc..b5b00db 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,8 @@ import { ThemeProvider } from 'next-themes';
 import { Playfair_Display, LXGW_WenKai_TC } from 'next/font/google';
 import { JsonLd } from '@/components/json-ld';
 import { WebVitals } from '@/components/web-vitals';
+import { ViewTransitions } from 'next-view-transitions';
+import NextTopLoader from 'nextjs-toploader';
 
 const playfair = Playfair_Display({
   subsets: ['latin'],
@@ -98,19 +100,27 @@ export default function RootLayout({
   };
 
   return (
-    <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={`${playfair.variable} ${lxgwWenKai.variable}`}>
-      <head>
-        {/* Preconnect to Google Fonts for faster font loading */}
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-      </head>
-      <body>
-        <JsonLd data={websiteSchema} />
-        <JsonLd data={organizationSchema} />
-        <style
-          // Set CSS variables for accent colors (light + dark variants)
-          dangerouslySetInnerHTML={{
-            __html: `
+    <ViewTransitions>
+      <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={`${playfair.variable} ${lxgwWenKai.variable}`}>
+        <head>
+          {/* Preconnect to Google Fonts for faster font loading */}
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        </head>
+        <body>
+          <NextTopLoader
+            color={theme.accent}
+            height={3}
+            showSpinner={false}
+            speed={200}
+            shadow={`0 0 10px ${theme.accent}, 0 0 5px ${theme.accent}`}
+          />
+          <JsonLd data={websiteSchema} />
+          <JsonLd data={organizationSchema} />
+          <style
+            // Set CSS variables for accent colors (light + dark variants)
+            dangerouslySetInnerHTML={{
+              __html: `
               :root {
                 --color-accent: ${theme.accent};
                 --color-accent-soft: ${theme.accentSoft};
@@ -118,13 +128,14 @@ export default function RootLayout({
                 --color-accent-text-dark: ${theme.accentTextDark};
               }
             `
-          }}
-        />
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <LayoutShell>{children}</LayoutShell>
-        </ThemeProvider>
-        <WebVitals />
-      </body>
-    </html>
+            }}
+          />
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <LayoutShell>{children}</LayoutShell>
+          </ThemeProvider>
+          <WebVitals />
+        </body>
+      </html>
+    </ViewTransitions>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 6b1a767..5f86e2f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { getAllPostsSorted } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
 import { PostListItem } from '@/components/post-list-item';
diff --git a/app/pages/[slug]/page.tsx b/app/pages/[slug]/page.tsx
index 82a9c37..cdf8c45 100644
--- a/app/pages/[slug]/page.tsx
+++ b/app/pages/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
diff --git a/app/tags/page.tsx b/app/tags/page.tsx
index 92600ef..a8c8895 100644
--- a/app/tags/page.tsx
+++ b/app/tags/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import type { Metadata } from 'next';
 import { FiTag, FiTrendingUp } from 'react-icons/fi';
 import { getAllTagsWithCount } from '@/lib/posts';
diff --git a/app/template.tsx b/app/template.tsx
index 77ba947..e7e37a0 100644
--- a/app/template.tsx
+++ b/app/template.tsx
@@ -1,20 +1,35 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export default function Template({ children }: { children: React.ReactNode }) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mq.matches);
+    const handler = () => setPrefersReducedMotion(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
 
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
 
+    if (prefersReducedMotion) {
+      container.style.animation = 'none';
+      container.style.opacity = '1';
+      container.style.transform = 'none';
+      return;
+    }
+
     // Trigger animation on mount
     container.style.animation = 'none';
-    // Force reflow
     void container.offsetHeight;
-    container.style.animation = 'pageEnter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards';
-  }, [children]);
+    container.style.animation = 'pageEnter 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards';
+  }, [children, prefersReducedMotion]);
 
   return (
     <div ref={containerRef} className="page-transition">
diff --git a/components/nav-menu.tsx b/components/nav-menu.tsx
index 2547311..29d2fc8 100644
--- a/components/nav-menu.tsx
+++ b/components/nav-menu.tsx
@@ -19,7 +19,7 @@ import {
   FiChevronDown,
   FiChevronRight
 } from 'react-icons/fi';
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { usePathname } from 'next/navigation';
 
 export type IconKey =
diff --git a/components/post-card.tsx b/components/post-card.tsx
index f16e652..7ee6c39 100644
--- a/components/post-card.tsx
+++ b/components/post-card.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import type { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
diff --git a/components/post-list-item.tsx b/components/post-list-item.tsx
index e7758e6..aed569f 100644
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
diff --git a/components/post-storyline-nav.tsx b/components/post-storyline-nav.tsx
index d717ad5..8a12bb2 100644
--- a/components/post-storyline-nav.tsx
+++ b/components/post-storyline-nav.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { Post } from 'contentlayer2/generated';
 import { FiArrowLeft, FiArrowRight } from 'react-icons/fi';
 
diff --git a/components/repo-card.tsx b/components/repo-card.tsx
index 7e57369..458fdc6 100644
--- a/components/repo-card.tsx
+++ b/components/repo-card.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { FiExternalLink } from 'react-icons/fi';
 import type { RepoSummary } from '@/lib/github';
 import { getLanguageColor } from '@/lib/github-lang-colors';
diff --git a/components/right-sidebar.tsx b/components/right-sidebar.tsx
index b5ff9ee..8bdba0d 100644
--- a/components/right-sidebar.tsx
+++ b/components/right-sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
diff --git a/components/site-header.tsx b/components/site-header.tsx
index 6995adf..eabd14d 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ThemeToggle } from './theme-toggle';
diff --git a/package-lock.json b/package-lock.json
index 2e3341e..6a3220a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,8 @@
         "next": "^16.0.7",
         "next-contentlayer2": "^0.5.8",
         "next-themes": "^0.4.6",
+        "next-view-transitions": "^0.3.5",
+        "nextjs-toploader": "^3.9.17",
         "react": "^19.2.1",
         "react-dom": "^19.2.1",
         "react-icons": "^5.5.0",
@@ -7265,7 +7267,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -7723,7 +7724,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -9125,6 +9125,17 @@
         "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/next-view-transitions": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/next-view-transitions/-/next-view-transitions-0.3.5.tgz",
+      "integrity": "sha512-yP8OPNydLmKpmE94hLurLGEzPsUy1uyl9iSv8oxaC2JwhSXTD86SVwk1NMMQT7Ado4kMENDJ7fNBIXHy3GU/Lg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "next": ">=14.0.0",
+        "react": ">=18.2.0 || ^19.0.0",
+        "react-dom": ">=18.2.0 || ^19.0.0"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -9153,6 +9164,24 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-toploader": {
+      "version": "3.9.17",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-3.9.17.tgz",
+      "integrity": "sha512-9OF0KSSLtoSAuNg2LZ3aTl4hR9mBDj5L9s9DZiFCbMlXehyICGjkIz5dVGzuATU2bheJZoBdFgq9w07AKSuQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "funding": {
+        "url": "https://buymeacoffee.com/thesgj"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -9179,11 +9208,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9613,7 +9647,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -9719,7 +9752,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/readdirp": {
diff --git a/package.json b/package.json
index d941b8c..0df43ba 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "next": "^16.0.7",
     "next-contentlayer2": "^0.5.8",
     "next-themes": "^0.4.6",
+    "next-view-transitions": "^0.3.5",
+    "nextjs-toploader": "^3.9.17",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-icons": "^5.5.0",
diff --git a/styles/globals.css b/styles/globals.css
index b03e12f..90af87f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -122,11 +122,11 @@ body {
 @keyframes pageEnter {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(16px) scale(0.99);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
 }
 
@@ -134,6 +134,13 @@ body {
   opacity: 0;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .page-transition {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* Scroll reveal animations - CSS only */
 .scroll-reveal {
   opacity: 0;
