From 03f40c4b860f5620cfaa6f4bca60fdc23a6de7ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Wed, 30 Sep 2026 23:29:00 -0400
Subject: [PATCH] =?UTF-8?q?T45c=20Site=20=C2=B7=20Home:=20a=20route=20chan?=
 =?UTF-8?q?ge=20ends=20the=20glide,=20full=20screen=20holds=20against=20th?=
 =?UTF-8?q?e=20wheel,=20each=20skip=20control=20focuses=20its=20own=20targ?=
 =?UTF-8?q?et?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/Live.tsx  |  9 +++++----
 frontend/src/Shell.tsx | 12 +++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Live.tsx b/frontend/src/Live.tsx
index 93bc545..abbc1da 100644
--- a/frontend/src/Live.tsx
+++ b/frontend/src/Live.tsx
@@ -14,6 +14,7 @@ export function Live({ page, story, title }: { page: string; story: string; titl
   const [state, setState] = useState<State>("starting");
   const [full, setFull] = useState(false);
   const [run, setRun] = useState(0);
+  const after = useRef<HTMLSpanElement>(null);
   // Each new frame opens in the current mode.
   const start = useMemo(() => mode(), [run]);
   const src = (t: string) => `/gallery/?page=${page}&story=${story}&theme=${t}`;
@@ -57,10 +58,10 @@ export function Live({ page, story, title }: { page: string; story: string; titl
 
   return (
     <>
-      <a className="skip-live" href="#after-live">
+      <button className="skip-live" onClick={() => after.current?.focus()}>
         Skip the live example
-      </a>
-      <div className={full ? "live full" : "live"}>
+      </button>
+      <div className={full ? "live full" : "live"} data-lenis-prevent={full || undefined}>
         <iframe key={run} ref={frame} title={`${title}, live`} src={src(start)} />
         {state !== "ready" && (
           <div className="live-state" role="status">
@@ -89,7 +90,7 @@ export function Live({ page, story, title }: { page: string; story: string; titl
           </button>
         </div>
       </div>
-      <span id="after-live" tabIndex={-1} />
+      <span ref={after} tabIndex={-1} />
     </>
   );
 }
diff --git a/frontend/src/Shell.tsx b/frontend/src/Shell.tsx
index 495d334..6495938 100644
--- a/frontend/src/Shell.tsx
+++ b/frontend/src/Shell.tsx
@@ -1,4 +1,4 @@
-import { Link, Outlet } from "@tanstack/react-router";
+import { Link, Outlet, useRouter } from "@tanstack/react-router";
 import Lenis from "lenis";
 import "lenis/dist/lenis.css";
 import { useEffect } from "react";
@@ -58,11 +58,17 @@ function Footer() {
 
 export function Shell() {
   const still = useStill();
+  const router = useRouter();
   useEffect(() => {
     if (still) return;
     const lenis = new Lenis({ autoRaf: true });
-    return () => lenis.destroy();
-  }, [still]);
+    // A glide in flight must not outlive its page.
+    const off = router.subscribe("onBeforeNavigate", () => lenis.scrollTo(lenis.animatedScroll, { immediate: true, force: true }));
+    return () => {
+      off();
+      lenis.destroy();
+    };
+  }, [still, router]);
   return (
     <>
       <a className="skip" href="#main">