diff --git a/apps/club/src/app/_components/club-content-page.tsx b/apps/club/src/app/_components/club-content-page.tsx
index c0b87fba0..b29c6b60e 100644
--- a/apps/club/src/app/_components/club-content-page.tsx
+++ b/apps/club/src/app/_components/club-content-page.tsx
@@ -69,7 +69,9 @@ function ContentButton({ href, label, variant = "gold" }: ContentLink) {
           {content}
         </a>
       ) : (
-        <Link href={href}>{content}</Link>
+        <Link href={href} prefetch={false}>
+          {content}
+        </Link>
       )}
     </Button>
   );
diff --git a/apps/club/src/app/_components/club-motion-runtime.tsx b/apps/club/src/app/_components/club-motion-runtime.tsx
index 5cdbb320d..c20df2570 100644
--- a/apps/club/src/app/_components/club-motion-runtime.tsx
+++ b/apps/club/src/app/_components/club-motion-runtime.tsx
@@ -9,6 +9,26 @@ const HISTORY_TIMELINE_SELECTOR = "[data-history-timeline]";
 const HISTORY_MARKER_SELECTOR = "[data-history-marker]";
 const TILT_SELECTOR = "[data-tilt]";
 
+interface DriftState {
+  element: HTMLElement;
+  documentTop: number;
+  height: number;
+  depth: number;
+}
+
+interface HeroState {
+  element: HTMLElement;
+  documentTop: number;
+  height: number;
+}
+
+interface TimelineState {
+  element: HTMLElement;
+  markers: HTMLElement[];
+  documentTop: number;
+  height: number;
+}
+
 function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
 }
@@ -26,6 +46,58 @@ export default function ClubMotionRuntime() {
 
     const observedElements = new WeakSet<Element>();
     const revealElements = new Set<Element>();
+    let driftElements: DriftState[] = [];
+    let heroElements: HeroState[] = [];
+    let timelines: TimelineState[] = [];
+    let scrollableHeight = 0;
+
+    function getDocumentTop(element: HTMLElement) {
+      let documentTop = 0;
+      let offsetElement: HTMLElement | null = element;
+
+      while (offsetElement) {
+        documentTop += offsetElement.offsetTop;
+        offsetElement = offsetElement.offsetParent as HTMLElement | null;
+      }
+
+      return documentTop;
+    }
+
+    function refreshDocumentMetrics() {
+      scrollableHeight = Math.max(
+        document.documentElement.scrollHeight - window.innerHeight,
+        0,
+      );
+    }
+
+    function refreshScrollTargets() {
+      refreshDocumentMetrics();
+      driftElements = Array.from(
+        document.querySelectorAll<HTMLElement>(DRIFT_SELECTOR),
+      ).map((element) => ({
+        element,
+        documentTop: getDocumentTop(element),
+        height: Math.max(element.offsetHeight, 1),
+        depth: Number(element.dataset.scrollDrift ?? 12),
+      }));
+      heroElements = Array.from(
+        document.querySelectorAll<HTMLElement>(HERO_SELECTOR),
+      ).map((element) => ({
+        element,
+        documentTop: getDocumentTop(element),
+        height: Math.max(element.offsetHeight, 1),
+      }));
+      timelines = Array.from(
+        document.querySelectorAll<HTMLElement>(HISTORY_TIMELINE_SELECTOR),
+      ).map((timeline) => ({
+        element: timeline,
+        markers: Array.from(
+          timeline.querySelectorAll<HTMLElement>(HISTORY_MARKER_SELECTOR),
+        ),
+        documentTop: getDocumentTop(timeline),
+        height: Math.max(timeline.offsetHeight, 1),
+      }));
+    }
 
     function revealElement(element: Element) {
       element.classList.add("is-visible");
@@ -47,12 +119,6 @@ export default function ClubMotionRuntime() {
       },
     );
 
-    function isInsideRevealRange(element: Element) {
-      const rect = element.getBoundingClientRect();
-
-      return rect.top < window.innerHeight * 1.05 && rect.bottom > 0;
-    }
-
     function observeElement(element: Element) {
       if (observedElements.has(element)) return;
 
@@ -60,22 +126,9 @@ export default function ClubMotionRuntime() {
       element.classList.add("is-motion-observed");
       revealElements.add(element);
 
-      if (isInsideRevealRange(element)) {
-        revealElement(element);
-        return;
-      }
-
       revealObserver.observe(element);
     }
 
-    function revealVisibleElements() {
-      for (const element of [...revealElements]) {
-        if (isInsideRevealRange(element)) {
-          revealElement(element);
-        }
-      }
-    }
-
     function observeTree(rootNode: ParentNode) {
       if (rootNode instanceof Element && rootNode.matches(REVEAL_SELECTOR)) {
         observeElement(rootNode);
@@ -87,18 +140,29 @@ export default function ClubMotionRuntime() {
     }
 
     observeTree(document);
+    refreshScrollTargets();
     root.dataset.motion = "ready";
 
     const mutationObserver = new MutationObserver((mutations) => {
+      let shouldRefreshScrollTargets = false;
+
       for (const mutation of mutations) {
+        if (mutation.removedNodes.length > 0) {
+          shouldRefreshScrollTargets = true;
+        }
+
         for (const node of mutation.addedNodes) {
           if (node instanceof Element) {
             observeTree(node);
+            shouldRefreshScrollTargets = true;
           }
         }
       }
 
-      revealVisibleElements();
+      if (shouldRefreshScrollTargets) {
+        refreshScrollTargets();
+        syncTiltListeners();
+      }
     });
 
     mutationObserver.observe(document.body, {
@@ -107,13 +171,11 @@ export default function ClubMotionRuntime() {
     });
 
     let scrollFrameId: number | null = null;
+    let resizeRefreshFrameId: number | null = null;
 
     function updateScrollMotion() {
       scrollFrameId = null;
-      revealVisibleElements();
 
-      const scrollableHeight =
-        document.documentElement.scrollHeight - window.innerHeight;
       const scrollProgress =
         scrollableHeight > 0 ? window.scrollY / scrollableHeight : 1;
 
@@ -123,74 +185,87 @@ export default function ClubMotionRuntime() {
       );
 
       const viewportCenter = window.innerHeight / 2;
+      const scrollY = window.scrollY;
 
-      document
-        .querySelectorAll<HTMLElement>(DRIFT_SELECTOR)
-        .forEach((element) => {
-          const rect = element.getBoundingClientRect();
-          const elementCenter = rect.top + rect.height / 2;
-          const depth = Number(element.dataset.scrollDrift ?? 12);
-          const normalizedDistance = clamp(
-            (viewportCenter - elementCenter) / viewportCenter,
-            -1,
-            1,
-          );
+      for (const drift of driftElements) {
+        const top = drift.documentTop - scrollY;
+        const bottom = top + drift.height;
 
-          element.style.setProperty(
-            "--club-scroll-drift",
-            `${(normalizedDistance * depth).toFixed(2)}px`,
-          );
-        });
+        if (bottom < -200 || top > window.innerHeight + 200) {
+          continue;
+        }
 
-      document.querySelectorAll<HTMLElement>(HERO_SELECTOR).forEach((hero) => {
-        const rect = hero.getBoundingClientRect();
-        const heroHeight = Math.max(rect.height, 1);
-        const heroProgress = clamp(-rect.top / heroHeight, 0, 1);
+        const elementCenter = top + drift.height / 2;
+        const normalizedDistance = clamp(
+          (viewportCenter - elementCenter) / viewportCenter,
+          -1,
+          1,
+        );
+
+        drift.element.style.setProperty(
+          "--club-scroll-drift",
+          `${(normalizedDistance * drift.depth).toFixed(2)}px`,
+        );
+      }
 
-        hero.style.setProperty("--club-hero-progress", heroProgress.toFixed(3));
-      });
+      for (const hero of heroElements) {
+        const top = hero.documentTop - scrollY;
+        const bottom = top + hero.height;
 
-      document
-        .querySelectorAll<HTMLElement>(HISTORY_TIMELINE_SELECTOR)
-        .forEach((timeline) => {
-          const viewportAnchor = window.innerHeight * 0.5;
-          const timelineHeight = Math.max(timeline.offsetHeight, 1);
-          const viewportAnchorDocument = window.scrollY + viewportAnchor;
-          let timelineDocumentTop = 0;
-          let offsetElement: HTMLElement | null = timeline;
-
-          while (offsetElement) {
-            timelineDocumentTop += offsetElement.offsetTop;
-            offsetElement = offsetElement.offsetParent as HTMLElement | null;
-          }
+        if (bottom < 0 || top > window.innerHeight) {
+          continue;
+        }
 
-          const scrubberY = clamp(
-            viewportAnchorDocument - timelineDocumentTop,
-            0,
-            timelineHeight,
-          );
-          const timelineProgress = scrubberY / timelineHeight;
+        const heroProgress = clamp(-top / hero.height, 0, 1);
 
-          timeline.style.setProperty(
-            "--history-timeline-progress",
-            timelineProgress.toFixed(4),
-          );
-          timeline.style.setProperty(
-            "--history-timeline-scrubber-y",
-            `${scrubberY.toFixed(2)}px`,
-          );
+        hero.element.style.setProperty(
+          "--club-hero-progress",
+          heroProgress.toFixed(3),
+        );
+      }
+
+      for (const timeline of timelines) {
+        const viewportAnchor = window.innerHeight * 0.5;
+        const viewportAnchorDocument = scrollY + viewportAnchor;
+
+        if (
+          viewportAnchorDocument < timeline.documentTop - window.innerHeight ||
+          viewportAnchorDocument >
+            timeline.documentTop + timeline.height + window.innerHeight
+        ) {
+          continue;
+        }
 
-          timeline
-            .querySelectorAll<HTMLElement>(HISTORY_MARKER_SELECTOR)
-            .forEach((marker) => {
-              const markerProgress = Number(marker.dataset.historyMarker ?? 0);
-
-              marker.classList.toggle(
-                "is-history-marker-active",
-                timelineProgress + 0.018 >= markerProgress,
-              );
-            });
-        });
+        const progressY = clamp(
+          viewportAnchorDocument - timeline.documentTop,
+          0,
+          timeline.height,
+        );
+        const scrubberY = clamp(
+          progressY,
+          21,
+          Math.max(timeline.height - 21, 21),
+        );
+        const timelineProgress = progressY / timeline.height;
+
+        timeline.element.style.setProperty(
+          "--history-timeline-progress",
+          timelineProgress.toFixed(4),
+        );
+        timeline.element.style.setProperty(
+          "--history-timeline-scrubber-y",
+          `${scrubberY.toFixed(2)}px`,
+        );
+
+        for (const marker of timeline.markers) {
+          const markerProgress = Number(marker.dataset.historyMarker ?? 0);
+
+          marker.classList.toggle(
+            "is-history-marker-active",
+            timelineProgress + 0.018 >= markerProgress,
+          );
+        }
+      }
     }
 
     function scheduleScrollMotion() {
@@ -199,7 +274,18 @@ export default function ClubMotionRuntime() {
       scrollFrameId = window.requestAnimationFrame(updateScrollMotion);
     }
 
+    function scheduleScrollTargetRefresh() {
+      if (resizeRefreshFrameId !== null) return;
+
+      resizeRefreshFrameId = window.requestAnimationFrame(() => {
+        resizeRefreshFrameId = null;
+        refreshScrollTargets();
+        scheduleScrollMotion();
+      });
+    }
+
     let tiltFrameId: number | null = null;
+    let tiltListenersAttached = false;
     let pendingTilt: {
       element: HTMLElement;
       x: number;
@@ -256,28 +342,68 @@ export default function ClubMotionRuntime() {
       target.style.removeProperty("--tilt-glow-y");
     }
 
+    function attachTiltListeners() {
+      if (tiltListenersAttached) return;
+
+      window.addEventListener("pointermove", handlePointerMove, {
+        passive: true,
+      });
+      window.addEventListener("pointerout", handlePointerOut);
+      tiltListenersAttached = true;
+    }
+
+    function detachTiltListeners() {
+      if (!tiltListenersAttached) return;
+
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerout", handlePointerOut);
+      tiltListenersAttached = false;
+      pendingTilt = null;
+
+      if (tiltFrameId !== null) {
+        window.cancelAnimationFrame(tiltFrameId);
+        tiltFrameId = null;
+      }
+    }
+
+    function syncTiltListeners() {
+      if (document.querySelector(TILT_SELECTOR)) {
+        attachTiltListeners();
+      } else {
+        detachTiltListeners();
+      }
+    }
+
     window.addEventListener("scroll", scheduleScrollMotion, { passive: true });
-    window.addEventListener("resize", scheduleScrollMotion);
-    window.addEventListener("pointermove", handlePointerMove, {
-      passive: true,
-    });
-    window.addEventListener("pointerout", handlePointerOut);
+    function handleResize() {
+      refreshScrollTargets();
+      scheduleScrollMotion();
+    }
+
+    window.addEventListener("resize", handleResize);
+    const resizeObserver =
+      "ResizeObserver" in window
+        ? new ResizeObserver(scheduleScrollTargetRefresh)
+        : null;
+    resizeObserver?.observe(document.documentElement);
+    resizeObserver?.observe(document.body);
+    syncTiltListeners();
     scheduleScrollMotion();
 
     return () => {
       revealObserver.disconnect();
       mutationObserver.disconnect();
+      resizeObserver?.disconnect();
       window.removeEventListener("scroll", scheduleScrollMotion);
-      window.removeEventListener("resize", scheduleScrollMotion);
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("pointerout", handlePointerOut);
+      window.removeEventListener("resize", handleResize);
+      detachTiltListeners();
 
       if (scrollFrameId !== null) {
         window.cancelAnimationFrame(scrollFrameId);
       }
 
-      if (tiltFrameId !== null) {
-        window.cancelAnimationFrame(tiltFrameId);
+      if (resizeRefreshFrameId !== null) {
+        window.cancelAnimationFrame(resizeRefreshFrameId);
       }
     };
   }, []);
diff --git a/apps/club/src/app/_components/footer.tsx b/apps/club/src/app/_components/footer.tsx
index 14ccc268d..a46612ff8 100644
--- a/apps/club/src/app/_components/footer.tsx
+++ b/apps/club/src/app/_components/footer.tsx
@@ -59,7 +59,11 @@ function FooterAnchor({
     );
   }
 
-  return <Link href={href}>{children}</Link>;
+  return (
+    <Link href={href} prefetch={false}>
+      {children}
+    </Link>
+  );
 }
 
 function FooterSocialLinks({
@@ -141,6 +145,7 @@ export default function Footer({ bladeUrl }: { bladeUrl: string }) {
                 <li key={link.href}>
                   <Link
                     href={link.href}
+                    prefetch={false}
                     className="transition-colors hover:text-white"
                   >
                     {link.label}
diff --git a/apps/club/src/app/_components/home-community-carousel.tsx b/apps/club/src/app/_components/home-community-carousel.tsx
index 80705faa3..9963d2ddd 100644
--- a/apps/club/src/app/_components/home-community-carousel.tsx
+++ b/apps/club/src/app/_components/home-community-carousel.tsx
@@ -93,7 +93,6 @@ function Polaroid({ slide }: { slide: CommunitySlide }) {
             src={slide.image}
             alt={slide.imageAlt}
             fill
-            priority
             sizes="(min-width: 1024px) 27rem, (min-width: 768px) 42vw, 84vw"
             className="object-cover grayscale transition duration-300"
             style={{ objectPosition: slide.imagePosition ?? "center" }}
diff --git a/apps/club/src/app/_components/home-events.tsx b/apps/club/src/app/_components/home-events.tsx
index 0d8d1f69f..ce6cc10b7 100644
--- a/apps/club/src/app/_components/home-events.tsx
+++ b/apps/club/src/app/_components/home-events.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 
@@ -95,11 +95,45 @@ export function HomeEvents({
   bladeUrl: string;
   eventLimit?: number;
 }) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const [events, setEvents] = useState<PublicClubEvent[]>([]);
   const [status, setStatus] = useState<EventsStatus>("loading");
+  const [shouldLoadEvents, setShouldLoadEvents] = useState(false);
   const safeEventLimit = getSafeEventLimit(eventLimit);
 
   useEffect(() => {
+    const container = containerRef.current;
+
+    if (!container || shouldLoadEvents) return;
+
+    if (!("IntersectionObserver" in window)) {
+      const fallbackId = globalThis.setTimeout(() => {
+        setShouldLoadEvents(true);
+      }, 0);
+
+      return () => globalThis.clearTimeout(fallbackId);
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+
+        setShouldLoadEvents(true);
+        observer.disconnect();
+      },
+      {
+        rootMargin: "700px 0px",
+      },
+    );
+
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, [shouldLoadEvents]);
+
+  useEffect(() => {
+    if (!shouldLoadEvents) return;
+
     const abortController = new AbortController();
 
     async function loadEvents() {
@@ -125,7 +159,7 @@ export function HomeEvents({
     void loadEvents();
 
     return () => abortController.abort();
-  }, [bladeUrl, safeEventLimit]);
+  }, [bladeUrl, safeEventLimit, shouldLoadEvents]);
 
   const homeEvents = useMemo(
     () => events.slice(0, safeEventLimit),
@@ -133,7 +167,7 @@ export function HomeEvents({
   );
 
   return (
-    <>
+    <div ref={containerRef}>
       {status === "loading" ? (
         <LoadingRows eventLimit={safeEventLimit} />
       ) : homeEvents.length > 0 ? (
@@ -158,12 +192,12 @@ export function HomeEvents({
           size="lg"
           className="club-button bg-white text-black shadow-[4px_4px_0_var(--club-gold)]"
         >
-          <Link href={allEventsHref}>
+          <Link href={allEventsHref} prefetch={false}>
             {allEventsLabel}
             <ExternalArrow />
           </Link>
         </Button>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/apps/club/src/app/_components/navbar.tsx b/apps/club/src/app/_components/navbar.tsx
index 7d5f78181..b60a436ee 100644
--- a/apps/club/src/app/_components/navbar.tsx
+++ b/apps/club/src/app/_components/navbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { MotionStyle, MotionValue, Transition } from "framer-motion";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -11,7 +11,6 @@ import {
   useMotionValue,
   useMotionValueEvent,
   useReducedMotion,
-  useScroll,
   useSpring,
   useTransform,
 } from "framer-motion";
@@ -66,6 +65,7 @@ function NavLink({
   return (
     <Link
       href={item.href}
+      prefetch={false}
       aria-current={isActive ? "page" : undefined}
       className={cn("club-nav-link", isActive && "club-nav-link-active")}
       onClick={() => onSelect?.(item.href)}
@@ -124,8 +124,8 @@ export default function Navbar({ bladeUrl }: { bladeUrl: string }) {
   const pathname = usePathname();
   const [isMobileOpen, setIsMobileOpen] = useState(false);
   const [isClickDisabled, setIsClickDisabled] = useState(false);
+  const previousScrollY = useRef(0);
   const prefersReducedMotion = useReducedMotion();
-  const { scrollY } = useScroll();
   const rawNavFadeProgress = useMotionValue(0);
   const navFadeProgress = useSpring(
     rawNavFadeProgress,
@@ -164,21 +164,48 @@ export default function Navbar({ bladeUrl }: { bladeUrl: string }) {
     ? { duration: 0 }
     : { duration: 0.18, ease: "easeOut" };
 
-  useMotionValueEvent(scrollY, "change", (currentScrollY) => {
-    const previousScrollY = scrollY.getPrevious() ?? currentScrollY;
-    const scrollDelta = currentScrollY - previousScrollY;
+  useEffect(() => {
+    let animationFrameId: number | null = null;
+
+    function updateNavFade() {
+      animationFrameId = null;
+      const currentScrollY = window.scrollY;
+      const scrollDelta = currentScrollY - previousScrollY.current;
+      previousScrollY.current = currentScrollY;
+
+      if (currentScrollY <= 4 || scrollDelta < -1) {
+        rawNavFadeProgress.set(0);
+        return;
+      }
 
-    if (currentScrollY <= 4 || scrollDelta < -1) {
-      rawNavFadeProgress.set(0);
-      return;
+      if (scrollDelta > 1) {
+        rawNavFadeProgress.set(
+          Math.min(
+            1,
+            rawNavFadeProgress.get() + scrollDelta / NAV_FADE_DISTANCE,
+          ),
+        );
+      }
     }
 
-    if (scrollDelta > 1) {
-      rawNavFadeProgress.set(
-        Math.min(1, rawNavFadeProgress.get() + scrollDelta / NAV_FADE_DISTANCE),
-      );
+    function scheduleNavFade() {
+      if (animationFrameId !== null) return;
+
+      animationFrameId = window.requestAnimationFrame(updateNavFade);
     }
-  });
+
+    previousScrollY.current = window.scrollY;
+    scheduleNavFade();
+    window.addEventListener("scroll", scheduleNavFade, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", scheduleNavFade);
+
+      if (animationFrameId !== null) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, [rawNavFadeProgress]);
 
   useMotionValueEvent(navOpacity, "change", (opacity) => {
     const shouldDisableClicks = opacity <= 0.5;
@@ -212,6 +239,7 @@ export default function Navbar({ bladeUrl }: { bladeUrl: string }) {
       <nav className="relative mx-auto flex h-20 w-full max-w-[1440px] items-center justify-between gap-4 px-5 md:px-8 lg:grid lg:grid-cols-[1fr_auto_1fr] lg:gap-6 lg:px-8 xl:px-10">
         <Link
           href="/"
+          prefetch={false}
           className="flex shrink-0 items-center justify-self-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--club-gold)] lg:-ml-1 xl:-ml-2"
           aria-label="Knight Hacks home"
         >
diff --git a/apps/club/src/app/_components/redirect.tsx b/apps/club/src/app/_components/redirect.tsx
index 23b19fe76..106cf6db8 100644
--- a/apps/club/src/app/_components/redirect.tsx
+++ b/apps/club/src/app/_components/redirect.tsx
@@ -21,7 +21,11 @@ export function Redirect({ label, target }: { label: string; target: string }) {
                 Continue
               </a>
             ) : (
-              <Link href={target} className="text-[var(--club-gold)] underline">
+              <Link
+                href={target}
+                prefetch={false}
+                className="text-[var(--club-gold)] underline"
+              >
                 Continue
               </Link>
             )}
diff --git a/apps/club/src/app/about/page.tsx b/apps/club/src/app/about/page.tsx
index 296ebe735..b6cc5bd3a 100644
--- a/apps/club/src/app/about/page.tsx
+++ b/apps/club/src/app/about/page.tsx
@@ -87,7 +87,9 @@ function AboutButton({
           {content}
         </a>
       ) : (
-        <Link href={href}>{content}</Link>
+        <Link href={href} prefetch={false}>
+          {content}
+        </Link>
       )}
     </Button>
   );
diff --git a/apps/club/src/app/events/events-client.tsx b/apps/club/src/app/events/events-client.tsx
index 660103eff..cd24135fb 100644
--- a/apps/club/src/app/events/events-client.tsx
+++ b/apps/club/src/app/events/events-client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   ArrowUpRight,
   ChevronLeft,
@@ -469,8 +469,10 @@ export function EventsClient({
   bladeUrl: string;
   eventLimit: number;
 }) {
+  const eventsSectionRef = useRef<HTMLElement>(null);
   const [events, setEvents] = useState<PublicClubEvent[]>([]);
   const [status, setStatus] = useState<EventsStatus>("loading");
+  const [shouldLoadEvents, setShouldLoadEvents] = useState(false);
   const [activeFilter, setActiveFilter] = useState<FilterKey>("all");
   const [calendarMonth, setCalendarMonth] =
     useState<MonthCursor>(getCurrentMonth);
@@ -478,6 +480,38 @@ export function EventsClient({
   const [page, setPage] = useState(1);
 
   useEffect(() => {
+    const eventsSection = eventsSectionRef.current;
+
+    if (!eventsSection || shouldLoadEvents) return;
+
+    if (!("IntersectionObserver" in window)) {
+      const fallbackId = globalThis.setTimeout(() => {
+        setShouldLoadEvents(true);
+      }, 0);
+
+      return () => globalThis.clearTimeout(fallbackId);
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+
+        setShouldLoadEvents(true);
+        observer.disconnect();
+      },
+      {
+        rootMargin: "0px",
+      },
+    );
+
+    observer.observe(eventsSection);
+
+    return () => observer.disconnect();
+  }, [shouldLoadEvents]);
+
+  useEffect(() => {
+    if (!shouldLoadEvents) return;
+
     const abortController = new AbortController();
 
     async function loadEvents() {
@@ -511,7 +545,7 @@ export function EventsClient({
     void loadEvents();
 
     return () => abortController.abort();
-  }, [bladeUrl, eventLimit]);
+  }, [bladeUrl, eventLimit, shouldLoadEvents]);
 
   const filteredEvents = useMemo(
     () => events.filter((event) => eventMatchesFilter(event, activeFilter)),
@@ -555,7 +589,10 @@ export function EventsClient({
   );
 
   return (
-    <section className="club-post-hero-section relative px-6 pb-28 md:px-10 lg:px-24">
+    <section
+      ref={eventsSectionRef}
+      className="club-post-hero-section relative px-6 pb-28 md:px-10 lg:px-24"
+    >
       <div className="mx-auto max-w-[1040px]">
         <h2
           className="text-center text-4xl font-black uppercase leading-none text-white [text-shadow:4px_4px_0_rgba(0,0,0,0.5)] md:text-5xl"
diff --git a/apps/club/src/app/globals.css b/apps/club/src/app/globals.css
index 22465ce45..7bdfd8178 100644
--- a/apps/club/src/app/globals.css
+++ b/apps/club/src/app/globals.css
@@ -114,8 +114,9 @@ body {
   );
   box-shadow: 0 0 18px rgba(255, 182, 43, 0.48);
   pointer-events: none;
-  transform: scaleX(var(--club-scroll-progress, 0));
+  transform: translateZ(0) scaleX(var(--club-scroll-progress, 0));
   transform-origin: left;
+  will-change: transform;
 }
 
 .club-home-bg {
@@ -1655,12 +1656,8 @@ html[data-motion="ready"] .club-page-hero [data-hero-content] {
     0 0 22px rgba(255, 123, 137, 0.12);
 }
 
-.club-history-timeline-fill,
-.club-history-timeline-scrubber,
 .club-history-timeline-marker {
   transition:
-    height 140ms linear,
-    top 90ms linear,
     background-color 180ms ease,
     border-color 180ms ease,
     box-shadow 180ms ease,
@@ -1669,6 +1666,7 @@ html[data-motion="ready"] .club-page-hero [data-hero-content] {
 
 .club-history-timeline-fill {
   bottom: auto;
+  height: 100%;
   width: 6px;
   border-radius: 999px;
   background: linear-gradient(180deg, #f4ca41 0%, #ff7b89 52%, #7dd3fc 100%);
@@ -1676,6 +1674,8 @@ html[data-motion="ready"] .club-page-hero [data-hero-content] {
     0 0 0 1px rgba(255, 255, 255, 0.54),
     0 0 20px rgba(255, 123, 137, 0.34),
     0 0 42px rgba(244, 202, 65, 0.1);
+  transform-origin: top center;
+  will-change: transform;
 }
 
 .club-history-timeline-marker {
@@ -1704,11 +1704,12 @@ html[data-motion="ready"] .club-page-hero [data-hero-content] {
 
 .club-history-timeline-scrubber {
   position: absolute;
+  top: 0;
   left: 50%;
   z-index: 24;
   width: 30px;
   height: 42px;
-  transform: translate(-50%, -50%);
+  will-change: transform;
 }
 
 .club-history-timeline-scrubber::before {
@@ -2154,7 +2155,7 @@ html[data-motion="ready"] [data-stagger].is-visible > .club-team-card:hover {
 
 html[data-motion="ready"] [data-scroll-drift]:not([data-reveal]) {
   transform: translate3d(0, var(--club-scroll-drift, 0px), 0);
-  transition: transform 120ms linear;
+  transition: none;
   will-change: transform;
 }
 
diff --git a/apps/club/src/app/hackathons/hackathon-history.tsx b/apps/club/src/app/hackathons/hackathon-history.tsx
index ed79828d3..f57956f2d 100644
--- a/apps/club/src/app/hackathons/hackathon-history.tsx
+++ b/apps/club/src/app/hackathons/hackathon-history.tsx
@@ -534,13 +534,15 @@ function Timeline({ rows }: { rows: readonly TimelineRow[] }) {
       <div
         className="club-history-timeline-fill"
         style={{
-          height: "calc(var(--history-timeline-progress, 0) * 100%)",
+          transform:
+            "translateX(-50%) scaleY(var(--history-timeline-progress, 0))",
         }}
       />
       <div
         className="club-history-timeline-scrubber"
         style={{
-          top: "clamp(21px, var(--history-timeline-scrubber-y, 0px), calc(100% - 21px))",
+          transform:
+            "translate3d(-50%, var(--history-timeline-scrubber-y, 21px), 0) translateY(-50%)",
         }}
       />
       {rows.map((row) => {
diff --git a/apps/club/src/app/layout.tsx b/apps/club/src/app/layout.tsx
index 9dad41852..69f4e32de 100644
--- a/apps/club/src/app/layout.tsx
+++ b/apps/club/src/app/layout.tsx
@@ -6,6 +6,7 @@ import ClubMotionRuntime from "./_components/club-motion-runtime";
 import Footer from "./_components/footer";
 import JsonLd from "./_components/json-ld";
 import Navbar from "./_components/navbar";
+import { CLUB_ASSET_BASE_URL } from "./_lib/assets";
 import {
   OG_IMAGE_ALT,
   OG_IMAGE_HEIGHT,
@@ -28,6 +29,7 @@ const montserrat = Montserrat({
 });
 
 const bladeUrl = env.BLADE_URL;
+const clubAssetOrigin = new URL(CLUB_ASSET_BASE_URL).origin;
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
@@ -99,6 +101,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <link rel="preconnect" href={clubAssetOrigin} />
+      </head>
       <body className={`${montserrat.variable} antialiased`}>
         <ClubMotionRuntime />
         <div className="club-home-bg flex min-h-screen flex-col">
diff --git a/apps/club/src/app/not-found.tsx b/apps/club/src/app/not-found.tsx
index 7d7c227a9..4891904a5 100644
--- a/apps/club/src/app/not-found.tsx
+++ b/apps/club/src/app/not-found.tsx
@@ -30,7 +30,9 @@ export default function NotFound() {
           size="lg"
           className="club-button mt-7 min-h-[3.35rem] bg-[var(--club-gold)] text-black shadow-[4px_4px_0_#ffffff]"
         >
-          <Link href="/">Go home</Link>
+          <Link href="/" prefetch={false}>
+            Go home
+          </Link>
         </Button>
       </div>
     </main>
diff --git a/apps/club/src/app/sponsors/sponsors-client.tsx b/apps/club/src/app/sponsors/sponsors-client.tsx
index b62068e88..40a8fbc70 100644
--- a/apps/club/src/app/sponsors/sponsors-client.tsx
+++ b/apps/club/src/app/sponsors/sponsors-client.tsx
@@ -261,7 +261,6 @@ function SponsorHighlight({
                 src={selectedSlide.imageSrc}
                 alt={selectedSlide.alt}
                 fill
-                priority={selectedIndex === 0}
                 sizes="(min-width: 1024px) 30rem, (min-width: 768px) 42vw, 88vw"
                 className="object-cover transition duration-300"
               />
diff --git a/apps/club/src/app/teams/teams-client.tsx b/apps/club/src/app/teams/teams-client.tsx
index c69998724..6f3303eeb 100644
--- a/apps/club/src/app/teams/teams-client.tsx
+++ b/apps/club/src/app/teams/teams-client.tsx
@@ -171,10 +171,12 @@ function EmptyTeam({ label, status }: { label: string; status: RosterStatus }) {
 }
 
 export default function TeamsClient({ bladeUrl }: { bladeUrl: string }) {
+  const rosterSectionRef = useRef<HTMLElement>(null);
   const pendingScrollPosition = useRef<{ x: number; y: number } | null>(null);
   const prefersReducedMotion = useReducedMotion();
   const [roster, setRoster] = useState<TeamRoster>(() => createEmptyRoster());
   const [status, setStatus] = useState<RosterStatus>("loading");
+  const [shouldLoadRoster, setShouldLoadRoster] = useState(false);
   const [activeTeam, setActiveTeam] = useState<TeamSlug>(
     TEAM_DEFINITIONS[0].slug,
   );
@@ -215,12 +217,46 @@ export default function TeamsClient({ bladeUrl }: { bladeUrl: string }) {
 
     pendingScrollPosition.current = null;
     window.scrollTo(scrollPosition.x, scrollPosition.y);
-    window.requestAnimationFrame(() => {
+    const animationFrameId = window.requestAnimationFrame(() => {
       window.scrollTo(scrollPosition.x, scrollPosition.y);
     });
+
+    return () => window.cancelAnimationFrame(animationFrameId);
   }, [activeTeam]);
 
   useEffect(() => {
+    const rosterSection = rosterSectionRef.current;
+
+    if (!rosterSection || shouldLoadRoster) return;
+
+    if (!("IntersectionObserver" in window)) {
+      const fallbackId = globalThis.setTimeout(() => {
+        setShouldLoadRoster(true);
+      }, 0);
+
+      return () => globalThis.clearTimeout(fallbackId);
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+
+        setShouldLoadRoster(true);
+        observer.disconnect();
+      },
+      {
+        rootMargin: "0px",
+      },
+    );
+
+    observer.observe(rosterSection);
+
+    return () => observer.disconnect();
+  }, [shouldLoadRoster]);
+
+  useEffect(() => {
+    if (!shouldLoadRoster) return;
+
     const abortController = new AbortController();
 
     async function loadRoster() {
@@ -240,7 +276,7 @@ export default function TeamsClient({ bladeUrl }: { bladeUrl: string }) {
     void loadRoster();
 
     return () => abortController.abort();
-  }, [bladeUrl]);
+  }, [bladeUrl, shouldLoadRoster]);
 
   function selectTeam(team: TeamSlug) {
     if (team === activeTeam) return;
@@ -330,6 +366,7 @@ export default function TeamsClient({ bladeUrl }: { bladeUrl: string }) {
       <div className="club-teams-hero-transition" aria-hidden="true" />
 
       <section
+        ref={rosterSectionRef}
         className="club-teams-post-section container pb-10 md:pb-12"
         aria-labelledby="team-members"
       >