@

Smooth scroll polish: Lenis + banner ease curve

- Lenis drives global window scroll with lerp 0.1. Instance lives
  on window and persists across SPA nav — the ClientRouter swaps
  DOM but the scroll container stays, so no teardown/recreate.
- Banner pre-pin travel bent from linear (sticky default) to
  smoothstep so it visibly slows on lift-off and on settle into
  pin. pinDist cached in a ResizeObserver so the scroll handler
  is reflow-free.
- CineBanner explicit a.play() in init: the autoplay HTML attr
  fires reliably on first load but not on SPA-rendered <video>;
  ClientRouter swaps after the parser's autoplay heuristic has
  run, leaving the new video paused on a blank frame.
@

Author: RuitingMa

package-lock.json

@@ -15,6 +15,7 @@
     "@astrojs/mdx": "^5.0.3",
     "astro": "^6.1.8",
     "d3-delaunay": "^6.0.4",
+    "lenis": "^1.3.23",
     "verovio": "^6.1.0"
   }
 }

package.json

@@ -91,6 +91,14 @@ const single = sources.length === 1;
         let active = a;
         let standby = b;
 
+        // The `autoplay` HTML attribute fires reliably on first load
+        // but not on SPA-rendered video — Astro's ClientRouter swaps
+        // DOM after the parser's autoplay heuristic has run, leaving
+        // the new <video> paused on a blank frame. Kick it off
+        // explicitly. Catch is for autoplay-policy rejections (rare
+        // here since the video is muted, but defensive).
+        a.play().catch(() => {});
+
         function swap() {
           standby.currentTime = 0;
           standby.play();

src/components/CineBanner.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/tokens.css';
+import 'lenis/dist/lenis.css';
 import { ClientRouter } from 'astro:transitions';
 
 interface Props {
@@ -83,6 +84,25 @@ const ogImage = image ? new URL(image, Astro.site).toString() : undefined;
     </div>
 
     <script>
+      // --- Global smooth scroll via Lenis ---
+      // One persistent instance lives on window. Lenis animates window
+      // scrollY via rAF — sticky/fixed positioning still works natively
+      // because the actual scroll position updates, just smoothly. The
+      // ClientRouter swaps DOM but doesn't replace the scroll container,
+      // so we don't tear down/recreate on navigation; the rAF loop just
+      // keeps running.
+      import Lenis from 'lenis';
+      const lw = window as unknown as { __lenisInstalled?: boolean };
+      if (!lw.__lenisInstalled) {
+        lw.__lenisInstalled = true;
+        const lenis = new Lenis({ lerp: 0.1 });
+        const raf = (time: number) => {
+          lenis.raf(time);
+          requestAnimationFrame(raf);
+        };
+        requestAnimationFrame(raf);
+      }
+
       // --- Space key → toggle stage pause ---
       // Canvas components listen for `stage:pause` and freeze their rAF loop.
       //

src/layouts/BaseLayout.astro

@@ -113,11 +113,101 @@ const BANNER_H = 120;
     }, { once: true });
   }
 
+  // Bend the banner's pre-pin travel from linear (sticky's default) to
+  // ease-in-out, so it visibly slows as it lifts off natural and again
+  // as it settles into pin. Lenis already smooths the scroll itself;
+  // this curve is applied on top so the *banner's* progress through its
+  // travel is non-linear regardless of input speed.
+  //
+  // Math: at scrollY S in [0, pinDist], smoothstep gives the eased
+  // progress p; the banner's eased viewport y is naturalY - p*pinDist,
+  // and sticky's actual is naturalY - S, so the delta we apply via
+  // translate is pinDist * (t - p) where t = S/pinDist. Outside the
+  // pre-pin range the delta is 0 (sticky alone is correct).
+  let bannerEaseCleanup: (() => void) | null = null;
+
+  function bannerEase() {
+    bannerEaseCleanup?.();
+    bannerEaseCleanup = null;
+
+    const banner = document.querySelector<HTMLElement>('.banner-wrap');
+    if (!banner) return;
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    const init = () => {
+      // Same .enter-class trick as before: animation-fill-mode: both
+      // would lock translateY(0) over our inline transform forever.
+      banner.classList.remove('enter');
+
+      let pinDist = 0;
+      let raf = 0;
+      let stopped = false;
+
+      const measure = () => {
+        const pinY = parseFloat(getComputedStyle(banner).top) || 0;
+        let natY = 0;
+        let el: HTMLElement | null = banner;
+        while (el) {
+          natY += el.offsetTop;
+          el = el.offsetParent as HTMLElement | null;
+        }
+        pinDist = Math.max(0, natY - pinY);
+      };
+
+      const apply = () => {
+        if (stopped) return;
+        const s = window.scrollY;
+        if (pinDist <= 0 || s <= 0 || s >= pinDist) {
+          banner.style.transform = '';
+        } else {
+          const t = s / pinDist;
+          const p = t * t * (3 - 2 * t);
+          banner.style.transform = `translate3d(0, ${pinDist * (t - p)}px, 0)`;
+        }
+        raf = 0;
+      };
+
+      const onScroll = () => {
+        if (!raf && !stopped) raf = requestAnimationFrame(apply);
+      };
+
+      measure();
+      apply();
+      window.addEventListener('scroll', onScroll, { passive: true });
+
+      // Layout shifts (font swap, header height change, breakpoint) move
+      // the natural and pin positions; recompute and re-apply.
+      const ro = new ResizeObserver(() => {
+        measure();
+        apply();
+      });
+      ro.observe(banner);
+      ro.observe(document.documentElement);
+
+      bannerEaseCleanup = () => {
+        stopped = true;
+        if (raf) cancelAnimationFrame(raf);
+        window.removeEventListener('scroll', onScroll);
+        ro.disconnect();
+        banner.style.transform = '';
+      };
+    };
+
+    const anim = banner.getAnimations?.()[0];
+    if (anim && anim.playState !== 'finished') {
+      anim.finished.then(init).catch(() => {});
+    } else {
+      init();
+    }
+  }
+
   attachHeat();
   trackHeaderHeight();
+  bannerEase();
   document.addEventListener('astro:page-load', () => {
     attachHeat();
     trackHeaderHeight();
+    bannerEase();
   });
 </script>