From 7e41670948f409bdff83fa76aabbee96ab2e2767 Mon Sep 17 00:00:00 2001
From: Alaeddin <15094821+BSalaeddin@users.noreply.github.com>
Date: Sat, 12 Sep 2026 04:04:39 +0100
Subject: [PATCH 1/3] perf(landing): paint the hero copy from the server HTML
 and defer the decorative scene

---
 apps/landing/src/app/globals.css              |  62 ++++
 .../src/components/HomepageHero/index.tsx     | 268 +++++++-----------
 .../src/components/TextAnimation/BlurText.tsx | 132 ---------
 .../components/TextAnimation/RisingWords.tsx  |  54 ++++
 .../components/UploaderScene/DragGhost.tsx    |   6 +
 .../UploaderScene/MockDriveBrowser.tsx        |   8 +-
 .../components/UploaderScene/MockUploader.tsx |  11 +-
 .../components/UploaderScene/scene-media.ts   |  34 +++
 8 files changed, 268 insertions(+), 307 deletions(-)
 delete mode 100644 apps/landing/src/components/TextAnimation/BlurText.tsx
 create mode 100644 apps/landing/src/components/TextAnimation/RisingWords.tsx

diff --git a/apps/landing/src/app/globals.css b/apps/landing/src/app/globals.css
index 050d57a57..59f4f2f75 100644
--- a/apps/landing/src/app/globals.css
+++ b/apps/landing/src/app/globals.css
@@ -26,6 +26,68 @@
 html {
     scroll-behavior: smooth;
 }
+
+/* ── Hero entrance — CSS only, never JS ───────────────────────────
+   The hero copy (badge, H1, subtitle, CTAs, install box) used to enter
+   through framer-motion `initial="hidden"`, which means the SERVER HTML
+   ships it at opacity 0 and it only becomes visible once hydration has
+   finished. On a throttled phone that was 92% of a 10.5 s LCP, all of it
+   "render delay" — the text was in the HTML the whole time, just painted
+   transparent. A CSS animation runs off the server HTML instead, so the
+   first paint already carries the copy.
+   Stagger with an inline `--hero-delay`; keep every delay short, because
+   the element is invisible until its delay elapses (fill-mode `both`) and
+   the subtitle is the LCP element. */
+@keyframes hero-rise {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 18px, 0);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+/* Transform-only twin, for the H1 and the subtitle. An element at opacity 0
+   has not painted, so fading in the LCP text pushes LCP out by the fade's
+   delay AND duration — measured at ~+1.9 s on throttled mobile even though the
+   text was in the server HTML the whole time. These elements are therefore
+   painted at full opacity from the first frame and only slide into place. */
+@keyframes hero-lift {
+    from {
+        transform: translate3d(0, 12px, 0);
+    }
+    to {
+        transform: none;
+    }
+}
+
+.hero-rise {
+    animation: hero-rise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation-delay: var(--hero-delay, 0s);
+}
+
+.hero-lift {
+    animation: hero-lift 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation-delay: var(--hero-delay, 0s);
+}
+
+/* Per-word variant for the H1 (the old BlurText). Words are plain text nodes
+   either way — this only slides them in. */
+.hero-word {
+    display: inline-block;
+    animation: hero-lift 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation-delay: var(--hero-delay, 0s);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .hero-rise,
+    .hero-lift,
+    .hero-word {
+        animation: none;
+    }
+}
 body {
     background: var(--bg-base);
     color: var(--fg-base);
diff --git a/apps/landing/src/components/HomepageHero/index.tsx b/apps/landing/src/components/HomepageHero/index.tsx
index ad56cb2e7..892bed6d9 100644
--- a/apps/landing/src/components/HomepageHero/index.tsx
+++ b/apps/landing/src/components/HomepageHero/index.tsx
@@ -12,14 +12,40 @@ import {
     ChevronDown,
 } from 'lucide-react'
 import { motion, AnimatePresence, useInView } from 'framer-motion'
+import dynamic from 'next/dynamic'
 import GradientText from '@/components/TextAnimation/GradientText'
-import BlurText from '@/components/TextAnimation/BlurText'
+import RisingWords from '@/components/TextAnimation/RisingWords'
 import FrameworkSnippets from '@/components/FrameworkSnippets'
 import FrameworkStrip from '@/components/FrameworkStrip'
-import { HeroSession } from '@/components/UploaderScene'
 import { FRAMEWORKS, type FrameworkId } from '@/lib/frameworks'
 import { useCopyToClipboard } from '@/lib/use-copy-to-clipboard'
 
+// The hero visual is decorative (aria-hidden) and expensive: the scene engine,
+// a pile of react-icons, and eleven <img> tags that React 19 hoists into
+// `<link rel="preload" as="image">` at the very top of the document, ahead of
+// the CSS the hero COPY needs. None of it is indexable, so it loads client-side
+// only, behind the same viewport gate the scene already used for its timeline.
+// The placeholder reserves the box so nothing shifts when it arrives.
+const HeroSession = dynamic(
+    () => import('@/components/UploaderScene/HeroSession'),
+    {
+        ssr: false,
+        loading: () => <HeroVisualPlaceholder />,
+    },
+)
+
+// Matches HeroSession's own root box (mx-auto, max-w-[440px]) and its measured
+// height — 735px at a 412px viewport, 743px at desktop — so mounting the real
+// scene is a zero-shift swap.
+function HeroVisualPlaceholder() {
+    return (
+        <div
+            aria-hidden="true"
+            className="mx-auto min-h-[740px] w-full max-w-[440px]"
+        />
+    )
+}
+
 export default function HeroSection({
     framework,
 }: Readonly<{ framework?: FrameworkId }> = {}) {
@@ -36,6 +62,12 @@ export default function HeroSection({
     // HeroSession — we just pass the gate down.
     const visualRef = useRef(null)
     const visualActive = useInView(visualRef, { amount: 0.2 })
+    // …and a one-way latch on top of it, so the scene's chunk is fetched only
+    // once the box has actually been on screen, and stays mounted after that.
+    const [visualMounted, setVisualMounted] = useState(false)
+    useEffect(() => {
+        if (visualActive) setVisualMounted(true)
+    }, [visualActive])
 
     const pkg = fw?.pkg ?? '@useupup/react'
     const packageManagers = useMemo(
@@ -92,111 +124,16 @@ export default function HeroSection({
 
     const easeCurve: [number, number, number, number] = [0.25, 0.46, 0.45, 0.94]
 
-    // Animation variants — y/opacity/scale only (no x-slides; the section is
-    // overflow-hidden and clips horizontal entrances at narrow viewports).
-    const containerVariants = {
-        hidden: { opacity: 0 },
-        visible: {
-            opacity: 1,
-            transition: {
-                staggerChildren: 0.15,
-                delayChildren: 0.2,
-            },
-        },
-    }
-
-    const itemVariants = {
-        hidden: { opacity: 0, y: 30, scale: 0.95 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-            transition: {
-                duration: 0.7,
-                ease: easeCurve,
-            },
-        },
-    }
-
-    const badgeVariants = {
-        hidden: { opacity: 0, y: -20, scale: 0.8 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-            transition: {
-                duration: 0.6,
-                ease: easeCurve,
-            },
-        },
-    }
-
-    const headingVariants = {
-        hidden: { opacity: 0, y: 40 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            transition: {
-                duration: 0.8,
-                ease: easeCurve,
-                delay: 0.2,
-            },
-        },
-    }
-
-    const subtitleVariants = {
-        hidden: { opacity: 0, y: 30 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            transition: {
-                duration: 0.7,
-                ease: easeCurve,
-                delay: 0.4,
-            },
-        },
-    }
-
-    const buttonVariants = {
-        hidden: { opacity: 0, y: 20, scale: 0.95 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-            transition: {
-                duration: 0.6,
-                ease: easeCurve,
-            },
-        },
-    }
-
-    const installBoxVariants = {
-        hidden: { opacity: 0, y: 30, scale: 0.9 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-            transition: {
-                duration: 0.7,
-                ease: easeCurve,
-                delay: 0.8,
-            },
-        },
-    }
-
-    const visualVariants = {
-        hidden: { opacity: 0, y: 40, scale: 0.96 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-            transition: {
-                duration: 0.9,
-                ease: easeCurve,
-                delay: 0.3,
-            },
-        },
-    }
+    // The hero copy's entrance is CSS (`.hero-rise` / `.hero-word` in
+    // globals.css), staggered by an inline `--hero-delay`. It used to be a
+    // framer-motion `initial="hidden"` variant tree, which is why the server
+    // HTML shipped the H1, subtitle, CTAs and install box at opacity 0 — on a
+    // throttled phone the LCP text waited for hydration before it painted at
+    // all. Delays stay short and the subtitle (the LCP element) is close to
+    // first paint. Only whileHover/whileTap motion survives here, and only on
+    // elements with no `initial`, so nothing starts invisible again.
+    const rise = (seconds: number) =>
+        ({ '--hero-delay': `${seconds}s` }) as React.CSSProperties
 
     return (
         <section className="relative mt-28 overflow-hidden px-6 pt-12 pb-16">
@@ -206,34 +143,30 @@ export default function HeroSection({
                     right under the fold copy. */}
                 <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
                     {/* LEFT — copy, CTAs, install box */}
-                    <motion.div
-                        className="flex flex-col items-center text-center lg:items-start lg:text-left"
-                        variants={containerVariants}
-                        initial="hidden"
-                        animate="visible"
-                    >
+                    <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
                         {/* Badge — hairline pill (the one border recipe). */}
-                        <motion.div
-                            className="mb-6 inline-flex items-center gap-2.5 rounded-full border border-black/5 px-4 py-2 text-sm font-medium text-gray-600 dark:border-white/10 dark:text-gray-300"
-                            variants={badgeVariants}
+                        <div
+                            className="hero-rise mb-6 inline-flex items-center gap-2.5 rounded-full border border-black/5 px-4 py-2 text-sm font-medium text-gray-600 dark:border-white/10 dark:text-gray-300"
+                            style={rise(0)}
                         >
                             <span className="h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400" />
                             <span>Open source · One core, six frameworks</span>
-                        </motion.div>
+                        </div>
 
                         {/* Main Heading */}
-                        <motion.h1
-                            className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1]"
-                            variants={headingVariants}
-                        >
-                            <BlurText
+                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1]">
+                            <RisingWords
                                 text="One File Uploader,"
-                                delay={150}
-                                animateBy="words"
-                                direction="top"
+                                startDelay={50}
+                                stagger={50}
                                 className="text-gray-900 dark:text-white justify-center lg:justify-start"
                             />
 
+                            {/* No entrance class here: GradientText's root is a
+                                flex block with its own infinite gradient
+                                animation, and wrapping it in an animated inline
+                                span would drop the transform silently. It
+                                simply paints with the server HTML. */}
                             <span className="relative">
                                 <GradientText
                                     colors={[
@@ -250,14 +183,17 @@ export default function HeroSection({
                                     {fw?.name ?? 'Every Framework'}
                                 </GradientText>
                             </span>
-                        </motion.h1>
+                        </h1>
 
                         {/* Subtitle — tightened; every claim carries over verbatim
                             (drag-and-drop, headless core, native UI, cloud drives,
                             camera, screen capture, secure S3 server-mode). */}
-                        <motion.p
-                            className="text-base sm:text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed max-w-xl"
-                            variants={subtitleVariants}
+                        {/* `hero-lift`, not `hero-rise`: this paragraph is the
+                            page's LCP element, and an opacity fade would delay
+                            its paint by the whole animation. */}
+                        <p
+                            className="hero-lift text-base sm:text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed max-w-xl"
+                            style={rise(0.15)}
                         >
                             A drag-and-drop file uploader with a headless core
                             and native UI for{' '}
@@ -267,16 +203,16 @@ export default function HeroSection({
                             </span>
                             . Cloud drives, camera, screen capture, and secure
                             server-mode uploads to any S3-compatible storage.
-                        </motion.p>
+                        </p>
 
                         {/* CTA Buttons */}
-                        <motion.div
-                            className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center mb-8"
-                            variants={itemVariants}
-                            transition={{ delay: 0.6 }}
+                        <div
+                            className="hero-rise flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center mb-8"
+                            style={rise(0.3)}
                         >
+                            {/* whileHover/whileTap only — no `initial`, so these
+                                never render at opacity 0. */}
                             <motion.div
-                                variants={buttonVariants}
                                 whileHover={{ scale: 1.05, y: -2 }}
                                 whileTap={{ scale: 0.95 }}
                             >
@@ -291,10 +227,8 @@ export default function HeroSection({
                             </motion.div>
 
                             <motion.div
-                                variants={buttonVariants}
                                 whileHover={{ scale: 1.05, y: -2 }}
                                 whileTap={{ scale: 0.95 }}
-                                transition={{ delay: 0.1 }}
                             >
                                 <a
                                     href="https://github.com/DevinoSolutions/upup"
@@ -307,13 +241,13 @@ export default function HeroSection({
                                     <ExternalLink className="w-4 h-4" />
                                 </a>
                             </motion.div>
-                        </motion.div>
+                        </div>
 
                         {/* Install Command with Package Manager Select — the page's
                             ONE install surface. Behaviour is unchanged. */}
-                        <motion.div
-                            className="w-full max-w-lg mx-auto lg:mx-0"
-                            variants={installBoxVariants}
+                        <div
+                            className="hero-rise w-full max-w-lg mx-auto lg:mx-0"
+                            style={rise(0.45)}
                         >
                             {/* Flat hairline surface — the page's ONE install
                                 surface. No overflow-hidden so the absolute z-50
@@ -321,27 +255,16 @@ export default function HeroSection({
                             <div className="rounded-2xl border border-black/5 bg-[var(--bg-base)] dark:border-white/10">
                                 <div className="relative rounded-2xl p-4">
                                     <div className="flex items-center justify-between">
-                                        <motion.code
-                                            className="text-sm font-mono text-gray-700 dark:text-gray-300 select-all flex-1 mr-4 truncate"
-                                            initial={{ opacity: 0 }}
-                                            animate={{ opacity: 1 }}
-                                            transition={{
-                                                delay: 1,
-                                                duration: 0.5,
-                                            }}
-                                        >
+                                        {/* Plain nodes: these used to fade in
+                                            from opacity 0 a full second after
+                                            hydration, which meant the install
+                                            command itself was invisible in the
+                                            server HTML. */}
+                                        <code className="text-sm font-mono text-gray-700 dark:text-gray-300 select-all flex-1 mr-4 truncate">
                                             {currentCommand}
-                                        </motion.code>
+                                        </code>
 
-                                        <motion.div
-                                            className="flex items-center gap-2"
-                                            initial={{ opacity: 0 }}
-                                            animate={{ opacity: 1 }}
-                                            transition={{
-                                                delay: 1.1,
-                                                duration: 0.5,
-                                            }}
-                                        >
+                                        <div className="flex items-center gap-2">
                                             {/* Copy Button */}
                                             <motion.button
                                                 onClick={handleCopy}
@@ -524,25 +447,24 @@ export default function HeroSection({
                                                     )}
                                                 </AnimatePresence>
                                             </div>
-                                        </motion.div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </motion.div>
-                    </motion.div>
+                        </div>
+                    </div>
 
                     {/* RIGHT — the live-usage animation as the hero's visual
                         anchor. Decorative, so it carries no copy; the left
-                        column holds all the info. */}
-                    <motion.div
-                        ref={visualRef}
-                        className="relative"
-                        variants={visualVariants}
-                        initial="hidden"
-                        animate="visible"
-                    >
-                        <HeroSession active={visualActive} />
-                    </motion.div>
+                        column holds all the info. Client-only and mounted the
+                        first time the box reaches the viewport. */}
+                    <div ref={visualRef} className="relative">
+                        {visualMounted ? (
+                            <HeroSession active={visualActive} />
+                        ) : (
+                            <HeroVisualPlaceholder />
+                        )}
+                    </div>
                 </div>
 
                 {/* Full-width below the grid: framework strip, then the
diff --git a/apps/landing/src/components/TextAnimation/BlurText.tsx b/apps/landing/src/components/TextAnimation/BlurText.tsx
deleted file mode 100644
index b6825fb0e..000000000
--- a/apps/landing/src/components/TextAnimation/BlurText.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { motion, Transition } from "framer-motion";
-import { useEffect, useRef, useState, useMemo } from "react";
-
-type BlurTextProps = {
-    text?: string;
-    delay?: number;
-    className?: string;
-    animateBy?: "words" | "letters";
-    direction?: "top" | "bottom";
-    threshold?: number;
-    rootMargin?: string;
-    animationFrom?: Record<string, string | number>;
-    animationTo?: Array<Record<string, string | number>>;
-    easing?: (t: number) => number;
-    onAnimationComplete?: () => void;
-    stepDuration?: number;
-};
-
-const buildKeyframes = (
-    from: Record<string, string | number>,
-    steps: Array<Record<string, string | number>>
-): Record<string, Array<string | number>> => {
-    const keys = new Set<string>([
-        ...Object.keys(from),
-        ...steps.flatMap((s) => Object.keys(s)),
-    ]);
-
-    const keyframes: Record<string, Array<string | number>> = {};
-    keys.forEach((k) => {
-        keyframes[k] = [from[k], ...steps.map((s) => s[k])];
-    });
-    return keyframes;
-};
-
-const BlurText: React.FC<BlurTextProps> = ({
-                                               text = "",
-                                               delay = 200,
-                                               className = "",
-                                               animateBy = "words",
-                                               direction = "top",
-                                               threshold = 0.1,
-                                               rootMargin = "0px",
-                                               animationFrom,
-                                               animationTo,
-                                               easing = (t) => t,
-                                               onAnimationComplete,
-                                               stepDuration = 0.35,
-                                           }) => {
-    const elements = animateBy === "words" ? text.split(" ") : text.split("");
-    const [inView, setInView] = useState(false);
-    const ref = useRef<HTMLParagraphElement>(null);
-
-    useEffect(() => {
-        if (!ref.current) return;
-        const observer = new IntersectionObserver(
-            ([entry]) => {
-                if (entry.isIntersecting) {
-                    setInView(true);
-                    observer.unobserve(ref.current as Element);
-                }
-            },
-            { threshold, rootMargin }
-        );
-        observer.observe(ref.current);
-        return () => observer.disconnect();
-    }, [threshold, rootMargin]);
-
-    const defaultFrom = useMemo(
-        () =>
-            direction === "top"
-                ? { filter: "blur(10px)", opacity: 0, y: -50 }
-                : { filter: "blur(10px)", opacity: 0, y: 50 },
-        [direction]
-    );
-
-    const defaultTo = useMemo(
-        () => [
-            {
-                filter: "blur(5px)",
-                opacity: 0.5,
-                y: direction === "top" ? 5 : -5,
-            },
-            { filter: "blur(0px)", opacity: 1, y: 0 },
-        ],
-        [direction]
-    );
-
-    const fromSnapshot = animationFrom ?? defaultFrom;
-    const toSnapshots = animationTo ?? defaultTo;
-
-    const stepCount = toSnapshots.length + 1;
-    const totalDuration = stepDuration * (stepCount - 1);
-    const times = Array.from({ length: stepCount }, (_, i) =>
-        stepCount === 1 ? 0 : i / (stepCount - 1)
-    );
-
-    return (
-        <p ref={ref} className={`blur-text ${className} flex flex-wrap`}>
-            {elements.map((segment, index) => {
-                const animateKeyframes = buildKeyframes(fromSnapshot, toSnapshots);
-
-                const spanTransition: Transition = {
-                    duration: totalDuration,
-                    times,
-                    delay: (index * delay) / 1000,
-                };
-                (spanTransition as any).ease = easing;
-
-                return (
-                    <motion.span
-                        key={index}
-                        initial={fromSnapshot}
-                        animate={inView ? animateKeyframes : fromSnapshot}
-                        transition={spanTransition}
-                        onAnimationComplete={
-                            index === elements.length - 1 ? onAnimationComplete : undefined
-                        }
-                        style={{
-                            display: "inline-block",
-                            willChange: "transform, filter, opacity",
-                        }}
-                    >
-                        {segment === " " ? "\u00A0" : segment}
-                        {animateBy === "words" && index < elements.length - 1 && "\u00A0"}
-                    </motion.span>
-                );
-            })}
-        </p>
-    );
-};
-
-export default BlurText;
diff --git a/apps/landing/src/components/TextAnimation/RisingWords.tsx b/apps/landing/src/components/TextAnimation/RisingWords.tsx
new file mode 100644
index 000000000..376513bc8
--- /dev/null
+++ b/apps/landing/src/components/TextAnimation/RisingWords.tsx
@@ -0,0 +1,54 @@
+import type { CSSProperties } from 'react'
+
+// RisingWords — the hero H1's per-word entrance.
+//
+// This replaces the old framer-motion `BlurText`, which rendered every word as
+// a `motion.span` with an inline `opacity: 0` initial style behind an
+// IntersectionObserver. That put the H1 — server-rendered, indexable text — at
+// zero opacity in the HTML until framer had hydrated and the observer had
+// fired, which on a throttled phone is seconds of pure render delay.
+//
+// Here the words are plain text nodes in the server HTML; a CSS keyframe
+// (`.hero-word` in app/globals.css, with a per-word `--hero-delay`) animates
+// them in. No framer, no observer, no `will-change`, and
+// `prefers-reduced-motion: reduce` turns the animation off in the same
+// stylesheet. The inter-word gap is a non-breaking space inside each word's
+// span, exactly as before: the wrapper is a flex row, so a normal trailing
+// space would collapse away between flex items.
+
+export default function RisingWords({
+    text,
+    className = '',
+    /** Per-word stagger, in milliseconds. */
+    stagger = 60,
+    /** Delay before the first word, in milliseconds. */
+    startDelay = 0,
+}: Readonly<{
+    text: string
+    className?: string
+    stagger?: number
+    startDelay?: number
+}>) {
+    const words = text.split(' ')
+
+    return (
+        <span className={`flex flex-wrap ${className}`}>
+            {words.map((word, index) => (
+                <span
+                    // A headline repeats words, so the index has to be part of
+                    // the key.
+                    key={`${word}-${index}`}
+                    className="hero-word"
+                    style={
+                        {
+                            '--hero-delay': `${startDelay + index * stagger}ms`,
+                        } as CSSProperties
+                    }
+                >
+                    {word}
+                    {index < words.length - 1 && '\u00A0'}
+                </span>
+            ))}
+        </span>
+    )
+}
diff --git a/apps/landing/src/components/UploaderScene/DragGhost.tsx b/apps/landing/src/components/UploaderScene/DragGhost.tsx
index 007611b6d..e94d20cf8 100644
--- a/apps/landing/src/components/UploaderScene/DragGhost.tsx
+++ b/apps/landing/src/components/UploaderScene/DragGhost.tsx
@@ -2,6 +2,7 @@
 
 import { AnimatePresence, motion } from 'framer-motion'
 import { FaRegFolderOpen } from 'react-icons/fa'
+import { sceneImageSize } from './scene-media'
 
 // ─────────────────────────────────────────────────────────────────────────────
 // DragGhost — the "thing being dragged" the timeline glides across the panel: the
@@ -116,6 +117,11 @@ export default function DragGhost({
                                                     <img
                                                         src={thumb}
                                                         alt=""
+                                                        {...sceneImageSize(
+                                                            thumb,
+                                                        )}
+                                                        loading="lazy"
+                                                        decoding="async"
                                                         className="absolute inset-0 h-full w-full object-cover"
                                                     />
                                                 )}
diff --git a/apps/landing/src/components/UploaderScene/MockDriveBrowser.tsx b/apps/landing/src/components/UploaderScene/MockDriveBrowser.tsx
index 4e052aa16..60c61a7cb 100644
--- a/apps/landing/src/components/UploaderScene/MockDriveBrowser.tsx
+++ b/apps/landing/src/components/UploaderScene/MockDriveBrowser.tsx
@@ -4,7 +4,7 @@ import type { CSSProperties } from 'react'
 import { useEffect, useRef } from 'react'
 import { motion } from 'framer-motion'
 import { FaCheck, FaFolderOpen, FaPlay } from 'react-icons/fa'
-import { SCENE_MEDIA } from './scene-media'
+import { SCENE_MEDIA, sceneImageSize } from './scene-media'
 import type { DriveProvider, DriveThumb } from './types'
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -49,6 +49,9 @@ export default function MockDriveBrowser({
                     <img
                         src={SCENE_MEDIA.photos.portrait}
                         alt=""
+                        {...sceneImageSize(SCENE_MEDIA.photos.portrait)}
+                        loading="lazy"
+                        decoding="async"
                         className="h-5 w-5 rounded-full object-cover ring-1 ring-white/20"
                     />
                     <span className="text-[11px] font-medium text-sky-300">
@@ -173,6 +176,9 @@ function ThumbMedia({ thumb, reduce }: { thumb: DriveThumb; reduce: boolean }) {
         <img
             src={thumb.src}
             alt=""
+            {...sceneImageSize(thumb.src)}
+            loading="lazy"
+            decoding="async"
             className="absolute inset-0 h-full w-full object-cover"
         />
     )
diff --git a/apps/landing/src/components/UploaderScene/MockUploader.tsx b/apps/landing/src/components/UploaderScene/MockUploader.tsx
index b926a6ae5..0a65595b1 100644
--- a/apps/landing/src/components/UploaderScene/MockUploader.tsx
+++ b/apps/landing/src/components/UploaderScene/MockUploader.tsx
@@ -14,7 +14,7 @@ import {
 } from 'react-icons/fa'
 import { SiGoogledrive, SiDropbox, SiBox } from 'react-icons/si'
 import { GrOnedrive } from 'react-icons/gr'
-import { SCENE_MEDIA } from './scene-media'
+import { SCENE_MEDIA, sceneImageSize } from './scene-media'
 import type { QueueFile, QueueStage, SourceDef } from './types'
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -255,6 +255,9 @@ export default function MockUploader({
                     <img
                         src={SCENE_MEDIA.logos.upup}
                         alt=""
+                        {...sceneImageSize(SCENE_MEDIA.logos.upup)}
+                        loading="lazy"
+                        decoding="async"
                         className="h-4 w-auto"
                     />
                     <span className="flex items-center gap-1.5 text-[11px] text-gray-500">
@@ -262,6 +265,9 @@ export default function MockUploader({
                         <img
                             src={SCENE_MEDIA.logos.devino}
                             alt=""
+                            {...sceneImageSize(SCENE_MEDIA.logos.devino)}
+                            loading="lazy"
+                            decoding="async"
                             className="h-3.5 w-auto"
                         />
                     </span>
@@ -428,6 +434,9 @@ function FileThumb({ file }: { file: QueueFile }) {
             <img
                 src={file.thumb}
                 alt=""
+                {...sceneImageSize(file.thumb)}
+                loading="lazy"
+                decoding="async"
                 className="absolute inset-0 h-full w-full object-cover"
             />
             <span className="absolute inset-0 bg-gradient-to-t from-black/25 to-white/10" />
diff --git a/apps/landing/src/components/UploaderScene/scene-media.ts b/apps/landing/src/components/UploaderScene/scene-media.ts
index ef9f25837..73e84c258 100644
--- a/apps/landing/src/components/UploaderScene/scene-media.ts
+++ b/apps/landing/src/components/UploaderScene/scene-media.ts
@@ -35,3 +35,37 @@ export const SCENE_MEDIA = {
         devino: '/devino.png',
     },
 } as const
+
+// Every stock photo in the kit was exported at this size; the two video poster
+// frames are 16:9 and the two logos are their own shapes.
+const DEFAULT_PHOTO_SIZE = { width: 400, height: 300 } as const
+
+const IMAGE_SIZES: Readonly<
+    Record<string, { readonly width: number; readonly height: number }>
+> = {
+    [SCENE_MEDIA.videos.beachWaves.poster]: { width: 640, height: 360 },
+    [SCENE_MEDIA.videos.screenShare.poster]: { width: 640, height: 360 },
+    [SCENE_MEDIA.logos.upup]: { width: 3200, height: 679 },
+    [SCENE_MEDIA.logos.devino]: { width: 1905, height: 580 },
+}
+
+/**
+ * Intrinsic pixel dimensions for a scene asset, so every scene `<img>` can
+ * carry `width`/`height`. Two reasons they are not optional:
+ *
+ *   - Lighthouse flags width/height-less images as a layout-shift risk on every
+ *     page a scene renders on.
+ *   - React 19 hoists an eagerly-loaded `<img>` into a `<link rel="preload"
+ *     as="image">` at the top of the document. Eleven decorative scene photos
+ *     were therefore being preloaded ahead of the CSS and fonts the hero COPY
+ *     needs; pairing these attributes with `loading="lazy"` stops that.
+ *
+ * The scene images are all `object-cover` inside absolutely-positioned boxes,
+ * so the attributes never change layout — they only describe the file.
+ */
+export function sceneImageSize(src: string | undefined): {
+    readonly width: number
+    readonly height: number
+} {
+    return (src && IMAGE_SIZES[src]) || DEFAULT_PHOTO_SIZE
+}

From 7b37913f3efe16e2b59fe479970ae4e6406cc791 Mon Sep 17 00:00:00 2001
From: Alaeddin <15094821+BSalaeddin@users.noreply.github.com>
Date: Sat, 12 Sep 2026 04:16:00 +0100
Subject: [PATCH 2/3] perf(landing): load the live demo, StackBlitz editor,
 feature scenes and analytics on demand

---
 apps/e2e-test/landing/thumbs-flow.spec.ts     |   7 +
 apps/landing/src/app/[framework]/page.tsx     |   4 +-
 apps/landing/src/app/layout.tsx               |   6 +-
 apps/landing/src/app/page.tsx                 |   4 +-
 .../components/DeferredInteractiveExample.tsx |  76 ++++++++++
 .../src/components/FeatureShowcase/index.tsx  |  57 ++++++--
 .../StackBlitzDemoSection/index.tsx           | 135 +++++++++++-------
 apps/landing/src/components/providers.tsx     |  15 +-
 8 files changed, 230 insertions(+), 74 deletions(-)
 create mode 100644 apps/landing/src/components/DeferredInteractiveExample.tsx

diff --git a/apps/e2e-test/landing/thumbs-flow.spec.ts b/apps/e2e-test/landing/thumbs-flow.spec.ts
index ada1b3840..fbea39467 100644
--- a/apps/e2e-test/landing/thumbs-flow.spec.ts
+++ b/apps/e2e-test/landing/thumbs-flow.spec.ts
@@ -168,6 +168,13 @@ test.describe('Ask AI thumbs feedback', () => {
             )
             .toBe(true)
 
+        // The demo section is client-only and mounts the first time it comes
+        // within ~400px of the viewport (it is the heaviest thing on the page,
+        // and on a phone it costs seconds of main-thread time nobody who never
+        // scrolls to it should pay). Scroll it into view so the Ask-AI panel
+        // below actually exists.
+        await page.locator('#demo').scrollIntoViewIfNeeded()
+
         // Ask one short question and wait for the assistant's completed turn.
         const panel = page.locator('.upup-ie-ai-panel')
         const input = panel.locator('#upup-ai-message')
diff --git a/apps/landing/src/app/[framework]/page.tsx b/apps/landing/src/app/[framework]/page.tsx
index 000eb7825..57b244d07 100644
--- a/apps/landing/src/app/[framework]/page.tsx
+++ b/apps/landing/src/app/[framework]/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import '@useupup/interactive-example/styles'
-import { InteractiveExampleClient } from '@/components/InteractiveExampleClient'
+import DeferredInteractiveExample from '@/components/DeferredInteractiveExample'
 import { interactiveExampleEnvProps } from '@/lib/interactive-example-props'
 import { FRAMEWORK_IDS, getFramework } from '@/lib/frameworks'
 import StructuredData from '@/components/StructuredData'
@@ -73,7 +73,7 @@ export default async function FrameworkPage({
             />
             <HeroSection framework={fw.id} />
             <Section id="demo">
-                <InteractiveExampleClient
+                <DeferredInteractiveExample
                     {...interactiveExampleEnvProps(
                         fw.hasImageEditor
                             ? undefined
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index bd1bfaac8..7583c6c82 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -154,9 +154,13 @@ export default function RootLayout({
                 </Script>
                 {process.env.NODE_ENV === 'production' && (
                     <>
+                        {/* lazyOnload: Hotjar is session-recording, never
+                            needed for the page to work, and on a throttled
+                            phone its loader competed with hydration for the
+                            main thread. */}
                         <Script
                             defer
-                            strategy="afterInteractive"
+                            strategy="lazyOnload"
                             dangerouslySetInnerHTML={{
                                 __html: `
                               (function(h,o,t,j,a,r){
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index 8fdf78b71..073e6cf83 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -1,5 +1,5 @@
 import '@useupup/interactive-example/styles'
-import { InteractiveExampleClient } from '@/components/InteractiveExampleClient'
+import DeferredInteractiveExample from '@/components/DeferredInteractiveExample'
 import { interactiveExampleEnvProps } from '@/lib/interactive-example-props'
 import HomepageFeatures from '@/components/HomepageFeatures'
 import FeedbackSection from '@/components/FeedbackSection'
@@ -26,7 +26,7 @@ export default function Home() {
             <StructuredData />
             <HeroSection />
             <Section id="demo">
-                <InteractiveExampleClient {...interactiveExampleEnvProps()} />
+                <DeferredInteractiveExample {...interactiveExampleEnvProps()} />
             </Section>
             <HomepageFeatures />
             <StackBlitzDemoSection />
diff --git a/apps/landing/src/components/DeferredInteractiveExample.tsx b/apps/landing/src/components/DeferredInteractiveExample.tsx
new file mode 100644
index 000000000..2133a127c
--- /dev/null
+++ b/apps/landing/src/components/DeferredInteractiveExample.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
+import type { InteractiveExampleProps } from '@useupup/interactive-example'
+
+// The live uploader demo is the single heaviest thing on the marketing pages:
+// `@useupup/interactive-example` drags in @useupup/react, @useupup/core,
+// @mastra/client-js and pako, and all of it used to sit in the initial chunk set
+// of `/` and every `/[framework]/` page even though the section starts below the
+// fold. It carries no indexable copy (the surrounding section headings are
+// server-rendered), so it loads client-side only, and only once the visitor is
+// near it.
+const InteractiveExampleClient = dynamic(
+    () =>
+        import('@/components/InteractiveExampleClient').then(
+            m => m.InteractiveExampleClient,
+        ),
+    { ssr: false, loading: () => <DemoPlaceholder /> },
+)
+
+// Reserves the demo's box so mounting it does not shift the page.
+function DemoPlaceholder() {
+    return <div className="min-h-[520px] w-full" aria-hidden="true" />
+}
+
+/**
+ * Viewport gate around the demo: mount it the first time it comes within 800px
+ * of the viewport, and keep it mounted afterwards. An IntersectionObserver is
+ * used directly rather than framer's `useInView` so this file pulls in no
+ * animation runtime of its own.
+ *
+ * The lead distance is deliberately generous. The mounted demo is much taller
+ * than the reserved placeholder (1564px vs 520px at a 412px viewport), so the
+ * growth has to happen while the section is still off-screen — otherwise every
+ * visitor scrolling toward it would watch the page below jump.
+ */
+export default function DeferredInteractiveExample(
+    props: InteractiveExampleProps,
+) {
+    const ref = useRef<HTMLDivElement | null>(null)
+    const [mounted, setMounted] = useState(false)
+
+    useEffect(() => {
+        if (mounted) return
+        const el = ref.current
+        if (!el) return
+        // No IntersectionObserver (very old browser, or a test shim): render
+        // the demo rather than hide it.
+        if (typeof IntersectionObserver === 'undefined') {
+            setMounted(true)
+            return
+        }
+        const observer = new IntersectionObserver(
+            entries => {
+                if (entries.some(entry => entry.isIntersecting)) {
+                    setMounted(true)
+                    observer.disconnect()
+                }
+            },
+            { rootMargin: '800px' },
+        )
+        observer.observe(el)
+        return () => observer.disconnect()
+    }, [mounted])
+
+    return (
+        <div ref={ref}>
+            {mounted ? (
+                <InteractiveExampleClient {...props} />
+            ) : (
+                <DemoPlaceholder />
+            )}
+        </div>
+    )
+}
diff --git a/apps/landing/src/components/FeatureShowcase/index.tsx b/apps/landing/src/components/FeatureShowcase/index.tsx
index 6649276b9..d4bcf8b8c 100644
--- a/apps/landing/src/components/FeatureShowcase/index.tsx
+++ b/apps/landing/src/components/FeatureShowcase/index.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useInView } from 'framer-motion'
+import dynamic from 'next/dynamic'
 import {
     FaUpload,
     FaGlobe,
@@ -19,14 +20,36 @@ import {
 import Card from '@/components/ui/Card'
 import { H3_HEADING } from '@/components/ui/SectionHeading'
 import { ICON_CHIP } from '@/components/ui/recipes'
-import {
-    FrameworksScene,
-    DriveScene,
-    EditorScene,
-    ResumeScene,
-    PipelineScene,
-} from '@/components/UploaderScene'
-import { ServerModeVignette } from './vignettes'
+
+// The row visuals are decorative (their column is aria-hidden) and expensive:
+// five UploaderScene mocks plus a diagram, each with its own framer timeline,
+// react-icons and <img> tags that React hoists into document-head image
+// preloads. The row TEXT is indexable and stays server-rendered; only the
+// visuals load client-side, and only once their row is near the viewport.
+const FrameworksScene = dynamic(
+    () => import('@/components/UploaderScene/FrameworksScene'),
+    { ssr: false },
+)
+const DriveScene = dynamic(
+    () => import('@/components/UploaderScene/DriveScene'),
+    { ssr: false },
+)
+const EditorScene = dynamic(
+    () => import('@/components/UploaderScene/EditorScene'),
+    { ssr: false },
+)
+const ResumeScene = dynamic(
+    () => import('@/components/UploaderScene/ResumeScene'),
+    { ssr: false },
+)
+const PipelineScene = dynamic(
+    () => import('@/components/UploaderScene/PipelineScene'),
+    { ssr: false },
+)
+const ServerModeVignette = dynamic(
+    () => import('./vignettes').then(m => m.ServerModeVignette),
+    { ssr: false },
+)
 
 interface HeroRow {
     icon: React.ReactNode
@@ -130,6 +153,17 @@ function FeatureRow({ row, index }: { row: HeroRow; index: number }) {
     // Non-`once` viewport gate so scenes only animate while on-screen (perf,
     // not an entrance animation — rows themselves render static).
     const active = useInView(ref, { amount: 0.2 })
+    // A SECOND, deliberately earlier observer decides when the visual mounts:
+    // a scene renders taller than the card's reserved min-height, so mounting
+    // it on `active` (20% visible) would resize a card the visitor is already
+    // looking at. At 600px of lead the growth happens off-screen — no visible
+    // shift, and the scene is ready by the time the row scrolls in. `once`
+    // keeps it mounted, so scrolling back never re-downloads the chunk.
+    const near = useInView(ref, { once: true, margin: '600px' })
+    const [visualMounted, setVisualMounted] = useState(false)
+    useEffect(() => {
+        if (near) setVisualMounted(true)
+    }, [near])
     const flipped = index % 2 === 1
     const { Visual } = row
 
@@ -166,8 +200,11 @@ function FeatureRow({ row, index }: { row: HeroRow; index: number }) {
                 aria-hidden="true"
                 className={`order-1 ${flipped ? 'lg:order-1' : 'lg:order-2'}`}
             >
+                {/* min-h keeps the card's box reserved while the visual is
+                    still deferred; the early mount above is what keeps the
+                    resize itself off-screen. */}
                 <Card className="flex min-h-[320px] items-center justify-center p-5 sm:p-6">
-                    <Visual active={active} />
+                    {visualMounted && <Visual active={active} />}
                 </Card>
             </div>
         </div>
diff --git a/apps/landing/src/components/StackBlitzDemoSection/index.tsx b/apps/landing/src/components/StackBlitzDemoSection/index.tsx
index e02832505..5cf80b11b 100644
--- a/apps/landing/src/components/StackBlitzDemoSection/index.tsx
+++ b/apps/landing/src/components/StackBlitzDemoSection/index.tsx
@@ -2,11 +2,13 @@
 'use client'
 
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence, useInView } from 'framer-motion'
 import { Code, ExternalLink, Maximize2, Minimize2 } from 'lucide-react'
 import { FaExclamationTriangle } from 'react-icons/fa'
 import { SiStackblitz } from 'react-icons/si'
-import sdk, { type Project } from '@stackblitz/sdk'
+// Type-only: the SDK itself (~4.2 MB of staticblitz client + monaco once the
+// embed runs) is imported dynamically, so it never reaches the initial bundle.
+import { type Project } from '@stackblitz/sdk'
 import Link from 'next/link'
 import Section from '@/components/ui/Section'
 import SectionHeading, { GRADIENT_TEXT } from '@/components/ui/SectionHeading'
@@ -159,9 +161,19 @@ function EditorLoadingOverlay() {
     )
 }
 
+// One module-level loader so the SDK is fetched at most once per page, whether
+// the embed effect or the "Open in StackBlitz" button asks for it first.
+const loadStackBlitzSdk = () => import('@stackblitz/sdk').then(m => m.default)
+
 export default function StackBlitzDemoSection() {
     const containerRef = useRef<HTMLDivElement | null>(null)
+    const gateRef = useRef<HTMLDivElement | null>(null)
     const cancelButtonRef = useRef<HTMLButtonElement | null>(null)
+    // The embed used to run on mount, on every homepage and framework-page
+    // load, pulling megabytes of third-party JS for a section most visitors
+    // never scroll to. It now waits until the editor card is within ~300px of
+    // the viewport; `once` keeps it embedded from then on.
+    const nearViewport = useInView(gateRef, { once: true, margin: '300px' })
     const warningTitleId = useId()
     const [isFullscreen, setIsFullscreen] = useState(false)
     const [isLoading, setIsLoading] = useState(false)
@@ -170,10 +182,12 @@ export default function StackBlitzDemoSection() {
     const [pendingFullscreenState, setPendingFullscreenState] = useState(false)
 
     const openInStackBlitz = () => {
-        sdk.openProject(stackblitzProject, {
-            openFile: OPEN_FILE,
-            newWindow: true,
-        })
+        void loadStackBlitzSdk().then(sdk =>
+            sdk.openProject(stackblitzProject, {
+                openFile: OPEN_FILE,
+                newWindow: true,
+            }),
+        )
     }
 
     // lock body scroll while full screen is active
@@ -190,11 +204,15 @@ export default function StackBlitzDemoSection() {
         }
     }, [isFullscreen])
 
-    // embed once, on mount and handle fullscreen transitions
+    // Embed once the section is near the viewport, and re-embed across
+    // fullscreen transitions.
     useEffect(() => {
+        if (!nearViewport) return
+
         // Fallback timer for the pathological case where embedProject never
         // resolves; declared in effect scope so the cleanup below can clear it.
         let fallbackTimer: ReturnType<typeof setTimeout> | undefined
+        let cancelled = false
 
         // Add a small delay to ensure DOM is ready, especially for fullscreen container
         const timeoutId = setTimeout(
@@ -214,63 +232,67 @@ export default function StackBlitzDemoSection() {
                     setIsLoading(true)
                     setEmbedFailed(false)
 
-                    try {
-                        // Editor-only view: WebContainer preview needs the page
-                        // to be cross-origin isolated (COOP/COEP), which we do
-                        // NOT set globally because it breaks the drive OAuth
-                        // popups in the live demo. So the embed shows the real
-                        // (credible) source; "Open in StackBlitz" runs it live
-                        // on stackblitz.com, which is isolated.
-                        // The SDK replaces targetContainer with its iframe, so
-                        // hold the parent to find the frame afterwards.
-                        const embedParent = targetContainer.parentElement
-                        sdk.embedProject(targetContainer, stackblitzProject, {
-                            openFile: OPEN_FILE,
-                            view: 'editor',
-                            theme: 'dark',
-                            hideNavigation: true,
-                            hideDevTools: true,
+                    // Editor-only view: WebContainer preview needs the page
+                    // to be cross-origin isolated (COOP/COEP), which we do
+                    // NOT set globally because it breaks the drive OAuth
+                    // popups in the live demo. So the embed shows the real
+                    // (credible) source; "Open in StackBlitz" runs it live
+                    // on stackblitz.com, which is isolated.
+                    // The SDK replaces targetContainer with its iframe, so
+                    // hold the parent to find the frame afterwards.
+                    const embedParent = targetContainer.parentElement
+                    void loadStackBlitzSdk()
+                        .then(sdk => {
+                            if (cancelled) return
+                            return (
+                                sdk
+                                    .embedProject(
+                                        targetContainer,
+                                        stackblitzProject,
+                                        {
+                                            openFile: OPEN_FILE,
+                                            view: 'editor',
+                                            theme: 'dark',
+                                            hideNavigation: true,
+                                            hideDevTools: true,
+                                        },
+                                    )
+                                    // Dismiss the loader when the editor is
+                                    // actually ready, not on a fixed timer.
+                                    .then(() => {
+                                        // The SDK's iframe ships without a title;
+                                        // screen readers need one.
+                                        const frame =
+                                            embedParent?.querySelector(
+                                                'iframe:not([title])',
+                                            )
+                                        frame?.setAttribute(
+                                            'title',
+                                            'StackBlitz code editor — upup React example',
+                                        )
+                                        setIsLoading(false)
+                                    })
+                            )
                         })
-                            // Dismiss the loader when the editor is actually
-                            // ready, not on a fixed timer.
-                            .then(() => {
-                                // The SDK's iframe ships without a title;
-                                // screen readers need one.
-                                const frame = embedParent?.querySelector(
-                                    'iframe:not([title])',
-                                )
-                                frame?.setAttribute(
-                                    'title',
-                                    'StackBlitz code editor — upup React example',
-                                )
-                                setIsLoading(false)
-                            })
-                            .catch(error => {
-                                console.error('StackBlitz embed failed:', error)
-                                setIsLoading(false)
-                                setEmbedFailed(true)
-                            })
-
-                        // Safety net: never leave the loader up indefinitely.
-                        fallbackTimer = setTimeout(
-                            () => setIsLoading(false),
-                            15000,
-                        )
-                    } catch (error) {
-                        console.error('StackBlitz embed error:', error)
-                        setIsLoading(false)
-                        setEmbedFailed(true)
-                    }
+                        .catch(error => {
+                            console.error('StackBlitz embed failed:', error)
+                            setIsLoading(false)
+                            setEmbedFailed(true)
+                        })
+
+                    // Safety net: never leave the loader up indefinitely.
+                    fallbackTimer = setTimeout(() => setIsLoading(false), 15000)
                 }
             },
             isFullscreen ? 100 : 0,
         ) // Delay for fullscreen to ensure DOM is ready
 
         return () => {
+            cancelled = true
             clearTimeout(timeoutId)
             if (fallbackTimer) clearTimeout(fallbackTimer)
         }
-    }, [isFullscreen])
+    }, [isFullscreen, nearViewport])
 
     const toggleFullScreen = () => {
         const newState = !isFullscreen
@@ -323,7 +345,10 @@ export default function StackBlitzDemoSection() {
 
                 {/* Regular container when not fullscreen */}
                 {!isFullscreen && (
-                    <div className="relative overflow-hidden rounded-3xl border border-black/5 bg-[var(--bg-base)] dark:border-white/10">
+                    <div
+                        ref={gateRef}
+                        className="relative overflow-hidden rounded-3xl border border-black/5 bg-[var(--bg-base)] dark:border-white/10"
+                    >
                         <EditorWindowBar
                             variant="inline"
                             onOpenInStackBlitz={openInStackBlitz}
diff --git a/apps/landing/src/components/providers.tsx b/apps/landing/src/components/providers.tsx
index 6f911fa24..3b0954550 100644
--- a/apps/landing/src/components/providers.tsx
+++ b/apps/landing/src/components/providers.tsx
@@ -10,7 +10,9 @@ export function Providers({ children }: { children: ReactNode }) {
         if (!gtag.GA_TRACKING_ID) return
 
         const handleRouteChange = (event: Event) => {
-            const url = (event as CustomEvent<string>).detail || window.location.pathname
+            const url =
+                (event as CustomEvent<string>).detail ||
+                window.location.pathname
             gtag.pageView(url)
         }
 
@@ -25,11 +27,16 @@ export function Providers({ children }: { children: ReactNode }) {
         <>
             {gtag.GA_TRACKING_ID && (
                 <>
+                    {/* lazyOnload on BOTH halves — the loader and its config
+                        script must share a strategy, or the config can run
+                        before gtag.js exists. Analytics is never on the
+                        critical path; afterInteractive put ~90 KB of
+                        third-party JS in front of hydration on mobile. */}
                     <Script
-                        strategy="afterInteractive"
+                        strategy="lazyOnload"
                         src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
                     />
-                    <Script id="gtag-init" strategy="afterInteractive">
+                    <Script id="gtag-init" strategy="lazyOnload">
                         {`
                     window.dataLayer = window.dataLayer || [];
                     function gtag(){dataLayer.push(arguments);}
@@ -42,4 +49,4 @@ export function Providers({ children }: { children: ReactNode }) {
             {children}
         </>
     )
-}
\ No newline at end of file
+}

From 3c7b4661fd27f8d923141d2e01b34d67f2c835ed Mon Sep 17 00:00:00 2001
From: Alaeddin <15094821+BSalaeddin@users.noreply.github.com>
Date: Sat, 12 Sep 2026 04:19:46 +0100
Subject: [PATCH 3/3] ci(landing): add a warn-only nightly mobile Lighthouse
 performance ratchet

---
 .github/workflows/nightly.yml        | 18 +++++--
 .gitignore                           |  1 +
 CLAUDE.md                            | 11 +++-
 apps/landing/lighthouserc.cjs        |  8 +--
 apps/landing/lighthouserc.mobile.cjs | 76 ++++++++++++++++++++++++++++
 apps/landing/package.json            |  1 +
 6 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 apps/landing/lighthouserc.mobile.cjs

diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index c853e2ef8..3a5372e1b 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -360,7 +360,7 @@ jobs:
               run: pnpm --filter @useupup/e2e-test test:e2e:drive-sandbox
 
     Lighthouse:
-        name: Lighthouse (landing SEO + Best Practices)
+        name: Lighthouse (landing SEO + Best Practices + mobile perf ratchet)
         runs-on: ubuntu-latest
         steps:
             - name: Checkout the repository
@@ -384,17 +384,27 @@ jobs:
             # lhci boots `next start` itself and asserts per lighthouserc.cjs:
             # SEO=100 everywhere; Best Practices 100 on docs pages, ratcheted
             # on home/framework pages (third-party embed cookies). A11y is NOT
-            # asserted here — the axe ratchet above owns it; perf is excluded
-            # (noisy on shared runners; size-limit owns bundle weight).
+            # asserted here — the axe ratchet above owns it. Performance is not
+            # asserted in THIS config either; it has its own mobile run below.
             - name: Lighthouse audit + assertions (SEO / Best Practices)
               run: pnpm --filter @useupup/landing run lighthouse
 
+            # Mobile performance, on its own port and its own config, asserted
+            # at WARN level only: the score is genuinely noisy on a shared
+            # runner, so this is a visible ratchet in the log and the uploaded
+            # report rather than a gate. (`continue-on-error` is banned by the
+            # test-quality guard and unnecessary — warn assertions never fail.)
+            - name: Lighthouse mobile performance ratchet (warn-only)
+              run: pnpm --filter @useupup/landing run lighthouse:mobile
+
             - name: Upload Lighthouse reports
               if: always()
               uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
               with:
                   name: nightly-lighthouse-reports
-                  path: apps/landing/.lighthouseci-reports/
+                  path: |
+                      apps/landing/.lighthouseci-reports/
+                      apps/landing/.lighthouseci-mobile-reports/
                   if-no-files-found: warn
                   retention-days: 14
 
diff --git a/.gitignore b/.gitignore
index a13d9b2ad..9056a7098 100644
--- a/.gitignore
+++ b/.gitignore
@@ -68,3 +68,4 @@ apps/e2e-test/screenshots/
 # filesystem report output uploaded as a CI artifact
 .lighthouseci/
 apps/landing/.lighthouseci-reports/
+apps/landing/.lighthouseci-mobile-reports/
diff --git a/CLAUDE.md b/CLAUDE.md
index 091a8f520..7ec773529 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -617,8 +617,15 @@ DrivePlugin`. All three popup providers now persist a token-expiry key and refre
   SEO=100 on every audited page and Best Practices 100 on docs pages /
   ratcheted ~0.74 on home+framework pages whose StackBlitz embed + ads tag set
   third-party cookies; a11y is deliberately NOT asserted — the axe ratchet
-  owns it, Lighthouse's a11y audits are axe-core anyway — and perf is excluded
-  as CI-runner noise; size-limit owns bundle weight), static `build:storybook`
+  owns it, Lighthouse's a11y audits are axe-core anyway; perf is not asserted
+  in THIS config. Performance is no longer skipped outright: a second step in
+  the same job runs `pnpm --filter @useupup/landing run lighthouse:mobile`
+  (config `apps/landing/lighthouserc.mobile.cjs`: mobile emulation, its own
+  port 4464 so both configs run back to back, median of 5) and asserts
+  `categories:performance` at **warn** level — a visible ratchet in the log and
+  the uploaded report, never a red night, since the score really is noisy on a
+  shared runner and `continue-on-error` is banned by the test-quality guard;
+  size-limit still owns bundle weight), static `build:storybook`
   for all six frameworks, `smoke:packages`, the mastra LLM evals (only when the
   `OPENROUTER_API_KEY` Actions secret exists — absent, the job goes green with
   a loud skip notice, never silently), and the **Drive-Sandbox** job — the live
diff --git a/apps/landing/lighthouserc.cjs b/apps/landing/lighthouserc.cjs
index 1b28bf615..f7048aaa3 100644
--- a/apps/landing/lighthouserc.cjs
+++ b/apps/landing/lighthouserc.cjs
@@ -1,8 +1,10 @@
 // Nightly Lighthouse gate for the public site — SEO + Best Practices ONLY.
 // Accessibility is deliberately not asserted here (the nightly axe ratchet in
-// `pnpm run e2e:a11y` owns it — Lighthouse's a11y audits are axe-core anyway),
-// and Performance is excluded (score is unusably noisy on shared CI runners;
-// bundle weight is already gated by size-limit).
+// `pnpm run e2e:a11y` owns it — Lighthouse's a11y audits are axe-core anyway).
+// Performance is not asserted in THIS config: it runs alongside, mobile-only
+// and warn-only, from `lighthouserc.mobile.cjs` (the score is noisy on shared
+// CI runners, so it is a visible ratchet rather than a gate; bundle weight
+// stays gated by size-limit).
 //
 // Run locally after building:
 //   pnpm exec turbo run build --filter=@useupup/landing
diff --git a/apps/landing/lighthouserc.mobile.cjs b/apps/landing/lighthouserc.mobile.cjs
new file mode 100644
index 000000000..f1b247f34
--- /dev/null
+++ b/apps/landing/lighthouserc.mobile.cjs
@@ -0,0 +1,76 @@
+// Nightly Lighthouse MOBILE PERFORMANCE ratchet for the public site.
+//
+// Separate from `lighthouserc.cjs` (SEO + Best Practices, desktop defaults)
+// because it needs mobile emulation, more runs, and a different port so both
+// configs can run back to back in the same job. Every assertion here is `warn`,
+// deliberately: the score IS noisy on a shared CI runner, so this exists to make
+// a regression visible in the job log and the uploaded report, not to red the
+// night. `continue-on-error` is banned by scripts/ci/test-quality-guard.mjs and
+// is not needed — a warn-level assertion never fails the run.
+//
+// Thresholds are the measured post-fix local medians minus 0.05. Raise them when
+// the site gets faster; never lower one to make a red go away without saying why.
+//
+// Run locally after building:
+//   pnpm exec turbo run build --filter=@useupup/landing
+//   pnpm --filter @useupup/landing run lighthouse:mobile
+
+const PORT = 4464
+const page = path => `http://localhost:${PORT}${path}`
+
+module.exports = {
+    ci: {
+        collect: {
+            // Both marketing shapes (home and a framework page share one
+            // parameterized layout) plus one docs page, the third template.
+            url: [page('/'), page('/react/'), page('/docs/getting-started/')],
+            numberOfRuns: 5,
+            startServerCommand: `pnpm exec next start -p ${PORT}`,
+            startServerReadyPattern: 'Ready in',
+            startServerReadyTimeout: 60000,
+            settings: {
+                onlyCategories: ['performance'],
+                // Default lighthouse emulation is already mobile (Moto G Power
+                // + simulated 4G); stated here so a future default change
+                // cannot silently turn this into a desktop run.
+                formFactor: 'mobile',
+                screenEmulation: {
+                    mobile: true,
+                    width: 412,
+                    height: 823,
+                    deviceScaleFactor: 1.75,
+                    disabled: false,
+                },
+            },
+        },
+        assert: {
+            // Judge the median of the five runs, not the worst one — a single
+            // runner hiccup must not read as a regression.
+            aggregationMethod: 'median',
+            assertMatrix: [
+                {
+                    // Home + framework pages: the live uploader demo, the
+                    // StackBlitz editor and the scene animations all load
+                    // behind viewport gates, so the initial page is light.
+                    matchingUrlPattern: '^https?://[^/]+/(react/)?$',
+                    // Measured medians on this build: / = 0.74, /react/ = 0.71.
+                    assertions: {
+                        'categories:performance': ['warn', { minScore: 0.66 }],
+                    },
+                },
+                {
+                    // Docs pages carry no embeds at all.
+                    matchingUrlPattern: '.*/docs/.*',
+                    // Measured median on this build: 0.73.
+                    assertions: {
+                        'categories:performance': ['warn', { minScore: 0.68 }],
+                    },
+                },
+            ],
+        },
+        upload: {
+            target: 'filesystem',
+            outputDir: '.lighthouseci-mobile-reports',
+        },
+    },
+}
diff --git a/apps/landing/package.json b/apps/landing/package.json
index 22778bdb5..4c3123896 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -8,6 +8,7 @@
         "start": "next start",
         "lint": "eslint . --max-warnings 0",
         "lighthouse": "lhci autorun --config=lighthouserc.cjs",
+        "lighthouse:mobile": "lhci autorun --config=lighthouserc.mobile.cjs",
         "typecheck": "fumadocs-mdx && tsc --noEmit",
         "test": "vitest run",
         "clean": "rm -rf .next node_modules/.cache"