Landing Page Performance Polish

apps/web/.gitignore

@@ -8,3 +8,4 @@ dist/
 # OG image preview renders (generated via scripts/generate-og-image.mjs)
 scripts/*-preview.png
 
+.vite-dev.log

apps/web/src/app/pages/HomePage.tsx

@@ -5,7 +5,6 @@ import { Masthead } from "../../components/editorial/Masthead";
 import { CompetitorEquation } from "../../components/editorial/CompetitorEquation";
 import { Lede } from "../../components/editorial/Lede";
 import { DeviceComposition } from "../../components/editorial/DeviceComposition";
-import { HeroAgentBadges } from "../../components/editorial/HeroAgentBadges";
 import { ShipShowcase } from "../../components/editorial/ShipShowcase";
 import { FadeBand } from "../../components/editorial/FadeBand";
 import { FeatureGrid } from "../../components/editorial/FeatureGrid";
@@ -43,15 +42,11 @@ export function HomePage() {
         <div className="relative mx-auto max-w-[1760px] px-[clamp(20px,3vw,48px)]">
           <div className="mx-auto flex w-full max-w-[1760px] flex-col items-center gap-[clamp(2px,0.6vw,8px)] pb-[clamp(20px,3vw,40px)] pt-0">
             <div className="relative w-full min-w-0 overflow-visible">
-              {/* Badges span the full hero height (headline + devices) so they
-                  scatter through the upper empty gutters, not just beside the
-                  device stack. */}
-              <HeroAgentBadges />
               <div className="relative z-10 mx-auto flex w-full max-w-[1200px] flex-col items-center gap-[clamp(4px,1vw,12px)]">
                 <CompetitorEquation />
                 <Lede />
               </div>
-              <div className="relative z-0 w-full min-w-0 overflow-visible px-[clamp(8px,2vw,32px)] pt-[clamp(12px,2vw,24px)] pb-[clamp(2px,0.5vw,8px)]">
+              <div className="relative z-0 w-full min-w-0 overflow-visible px-[clamp(8px,2vw,32px)] pt-[clamp(6px,1vw,12px)] pb-[clamp(2px,0.5vw,8px)]">
                 <DeviceComposition />
               </div>
             </div>

apps/web/src/components/editorial/CompetitorEquation.tsx

@@ -63,7 +63,7 @@ export function CompetitorEquation() {
               </motion.span>
             )}
             <motion.div variants={item} className="flex shrink-0 flex-col items-center gap-[3px]">
-              <div className="group/logo flex h-8 w-8 items-center justify-center overflow-hidden rounded-[8px] border border-[color:var(--color-hairline-strong)] bg-white/[0.045] p-[3px] transition-all duration-300 motion-safe:hover:-translate-y-[2px] hover:border-[color:var(--color-violet-bright)]/55 sm:h-9 sm:w-9">
+              <div className="group/logo flex h-7 w-7 items-center justify-center overflow-hidden rounded-[7px] border border-[color:var(--color-hairline-strong)] bg-white/[0.045] p-[3px] transition-all duration-300 motion-safe:hover:-translate-y-[2px] hover:border-[color:var(--color-violet-bright)]/55 sm:h-8 sm:w-8">
                 <img
                   src={app.logo}
                   alt={app.name}
@@ -90,7 +90,7 @@ export function CompetitorEquation() {
       >
         <span
           className="font-serif italic text-[color:var(--color-violet-bright)]"
-          style={{ fontSize: "clamp(24px, 2.6vw, 34px)" }}
+          style={{ fontSize: "clamp(20px, 2.1vw, 28px)" }}
         >
           equals
         </span>
@@ -120,7 +120,7 @@ export function CompetitorEquation() {
           <img
             src="/images/ade-dock-icon.webp"
             alt="ADE"
-            className="relative h-[80px] w-[80px] rounded-[22%] object-contain drop-shadow-[0_14px_48px_rgba(124,58,237,0.6)] sm:h-[96px] sm:w-[96px]"
+            className="relative h-[64px] w-[64px] rounded-[22%] object-contain drop-shadow-[0_14px_48px_rgba(124,58,237,0.6)] sm:h-[78px] sm:w-[78px]"
           />
         </div>
       </motion.div>

apps/web/src/components/editorial/DeviceComposition.tsx

@@ -37,17 +37,18 @@ export function DeviceComposition() {
         style={{
           background:
             "radial-gradient(ellipse 70% 60% at 50% 50%, rgba(124,58,237,0.45) 0%, rgba(124,58,237,0.12) 45%, transparent 78%)",
-          filter: "blur(14px)",
           zIndex: 0,
         }}
       />
 
       <div className="@container relative isolate mx-auto w-full max-w-[1650px] min-w-0 overflow-visible pb-[8%] @md:pb-[10%] @xl:pb-[12%]">
-        {/* Desktop — primary layer; container height follows this image */}
+        {/* Desktop — primary layer; container height follows this image.
+            Slightly narrower than the container so the TUI + phone overlap it
+            inside the viewport instead of hanging off-screen on laptops. */}
         <motion.div
           {...panel(0.65)}
-          className="relative z-0 motion-safe:transition-transform motion-safe:duration-500"
-          style={{ filter: "drop-shadow(0 36px 64px rgba(0,0,0,0.58))" }}
+          className="relative z-0 mx-auto w-[94%] @md:w-[91%] motion-safe:transition-transform motion-safe:duration-500"
+          style={{ boxShadow: "0 36px 64px rgba(0,0,0,0.58)" }}
         >
           <div className={`${panelFrame} rounded-[clamp(8px,1vw,14px)]`}>
             <img
@@ -64,8 +65,8 @@ export function DeviceComposition() {
         {/* TUI — bottom-left corner of desktop; sizes track container, not viewport */}
         <motion.div
           {...panel(0.8)}
-          className="absolute bottom-[16%] left-[-4%] z-20 w-[44%] origin-bottom-left -rotate-[2deg] motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out @md:bottom-[18%] @md:left-[-10%] @md:w-[50%] @xl:bottom-[20%] @xl:left-[-18%] @xl:w-[54%] [@media(hover:hover)]:hover:z-40 [@media(hover:hover)]:hover:scale-[1.14] [@media(hover:hover)]:hover:rotate-0"
-          style={{ filter: "drop-shadow(0 24px 40px rgba(0,0,0,0.65))" }}
+          className="absolute bottom-[18%] left-[-2%] z-20 w-[44%] origin-bottom-left -rotate-[2deg] motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out @md:bottom-[20%] @md:w-[46%] [@media(hover:hover)]:hover:z-40 [@media(hover:hover)]:hover:scale-[1.14] [@media(hover:hover)]:hover:rotate-0"
+          style={{ boxShadow: "0 24px 40px rgba(0,0,0,0.65)" }}
         >
           <div className={`${panelFrame} rounded-[clamp(6px,0.7vw,10px)]`}>
             <img
@@ -82,8 +83,8 @@ export function DeviceComposition() {
             Dynamic Island, inner violet glow. */}
         <motion.div
           {...panel(0.9)}
-          className="absolute bottom-[10%] right-[-2%] z-30 w-[17%] origin-bottom-right rotate-[3deg] motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out @md:bottom-[12%] @md:right-[-6%] @md:w-[19%] @xl:bottom-[14%] @xl:right-[-10%] @xl:w-[21%] [@media(hover:hover)]:hover:z-40 [@media(hover:hover)]:hover:scale-[1.14] [@media(hover:hover)]:hover:rotate-0"
-          style={{ filter: "drop-shadow(0 28px 48px rgba(124,58,237,0.45))" }}
+          className="absolute bottom-[8%] right-0 z-30 w-[17%] origin-bottom-right rotate-[3deg] motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out @md:bottom-[10%] @md:w-[18%] [@media(hover:hover)]:hover:z-40 [@media(hover:hover)]:hover:scale-[1.14] [@media(hover:hover)]:hover:rotate-0"
+          style={{ boxShadow: "0 28px 48px rgba(124,58,237,0.45)", borderRadius: "clamp(22px,2.6vw,40px)" }}
         >
           <div className="relative aspect-[9/19.5] overflow-hidden rounded-[clamp(22px,2.6vw,40px)] border-[clamp(4px,0.55vw,8px)] border-[#0c0c12] bg-black ring-1 ring-[color:var(--color-hairline-strong)]">
             {/* Dynamic Island */}

apps/web/src/components/editorial/FeatureGrid.tsx

@@ -104,10 +104,13 @@ const DEMOS: Demo[] = [
 ];
 
 /**
- * One demo tile. The clip auto-plays (muted loop) while it's on screen and
- * pauses the moment it scrolls away, so at most a couple play at once — alive
- * but cheap. Click opens the full clip in a lightbox. Posters carry the static
- * first frame for reduced-motion and pre-play.
+ * One demo tile. Every clip auto-plays (muted loop) while it's anywhere near
+ * the viewport — the whole grid running at once is the point of this section.
+ * The mp4s are faststart-encoded so they render frames while still streaming,
+ * and playback starts 300px before the tile scrolls in so the grid is already
+ * alive when it lands. Offscreen tiles pause to give the bandwidth back.
+ * Click opens the full clip in a lightbox. Posters carry the static first
+ * frame for reduced-motion and pre-play.
  */
 function DemoTile({
   demo,
@@ -131,10 +134,13 @@ function DemoTile({
         if (entry?.isIntersecting) void v.play().catch(() => {});
         else v.pause();
       },
-      { threshold: 0.35 }
+      { threshold: 0.01, rootMargin: "300px 0px" }
     );
     io.observe(el);
-    return () => io.disconnect();
+    return () => {
+      io.disconnect();
+      v.pause();
+    };
   }, [reduceMotion]);
 
   const Icon = demo.icon;

apps/web/src/components/editorial/Lede.tsx

@@ -40,7 +40,7 @@ export function Lede() {
         variants={item}
         className="font-serif font-normal tracking-[-0.02em] text-[color:var(--color-cream)]"
         style={{
-          fontSize: "clamp(48px, 6.4vw, 96px)",
+          fontSize: "clamp(40px, 5.4vw, 82px)",
           lineHeight: 1.02,
           margin: 0,
           paddingBottom: "0.08em",
@@ -54,7 +54,7 @@ export function Lede() {
 
       <motion.div
         variants={item}
-        className="mt-[clamp(24px,3vw,36px)] flex flex-col items-center gap-2"
+        className="mt-[clamp(18px,2.2vw,28px)] flex flex-col items-center gap-2"
       >
         <span className="text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--color-cream-faint)]">
           Quick install · macOS
@@ -77,41 +77,46 @@ export function Lede() {
 
       <motion.div
         variants={item}
-        className="mt-4 flex flex-wrap items-center justify-center gap-3"
+        className="mt-4 flex flex-col items-center gap-3"
       >
-        <a
-          href={LINKS.releasesLatest}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex items-center gap-2 rounded-[2px] bg-[color:var(--color-cream)] px-[20px] py-3.5 text-[15px] font-medium text-[color:var(--color-bg)] transition-all duration-200 hover:-translate-y-[1px] hover:bg-white"
-        >
-          <Download className="h-4 w-4" /> Download for Mac
-        </a>
-        <a
-          href={LINKS.testflight}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex items-center gap-2 rounded-[2px] border border-[color:var(--color-hairline-strong)] px-[20px] py-3.5 text-[15px] font-medium text-[color:var(--color-cream)] transition-colors hover:border-[color:var(--color-cream)] hover:bg-white/[0.04]"
-        >
-          <Smartphone className="h-4 w-4" /> Download for iOS
-        </a>
-        <a
-          href={LINKS.github}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex items-center gap-2 rounded-[2px] border border-[color:var(--color-hairline-strong)] px-[20px] py-3.5 text-[15px] font-medium text-[color:var(--color-cream)] transition-colors hover:border-[color:var(--color-cream)] hover:bg-white/[0.04]"
-        >
-          <Github className="h-4 w-4" /> View on GitHub
-        </a>
-        <a
-          href={LINKS.docs}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex items-center gap-2 rounded-[2px] border border-[color:var(--color-hairline-strong)] px-[20px] py-3.5 text-[15px] font-medium text-[color:var(--color-cream)] transition-colors hover:border-[color:var(--color-cream)] hover:bg-white/[0.04]"
-        >
-          <BookOpen className="h-4 w-4" /> Read the docs{" "}
-          <ArrowUpRight className="h-3.5 w-3.5 text-[color:var(--color-cream-faint)]" />
-        </a>
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <a
+            href={LINKS.releasesLatest}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-2 rounded-[2px] bg-[color:var(--color-cream)] px-[24px] py-3.5 text-[15px] font-medium text-[color:var(--color-bg)] transition-all duration-200 hover:-translate-y-[1px] hover:bg-white"
+          >
+            <Download className="h-4 w-4" /> Download for Mac
+          </a>
+          <a
+            href={LINKS.testflight}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-2 rounded-[2px] border border-[color:var(--color-hairline-strong)] px-[24px] py-3.5 text-[15px] font-medium text-[color:var(--color-cream)] transition-colors hover:border-[color:var(--color-cream)] hover:bg-white/[0.04]"
+          >
+            <Smartphone className="h-4 w-4" /> Download for iOS
+          </a>
+        </div>
+        <p className="flex flex-wrap items-center justify-center gap-x-2 text-[13px] text-[color:var(--color-cream-faint)]">
+          <a
+            href={LINKS.github}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1 text-[color:var(--color-cream-muted)] underline decoration-[color:var(--color-hairline-strong)] underline-offset-4 transition-colors hover:text-[color:var(--color-cream)]"
+          >
+            <Github className="h-3.5 w-3.5" /> GitHub
+          </a>
+          <span aria-hidden>·</span>
+          <a
+            href={LINKS.docs}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1 text-[color:var(--color-cream-muted)] underline decoration-[color:var(--color-hairline-strong)] underline-offset-4 transition-colors hover:text-[color:var(--color-cream)]"
+          >
+            <BookOpen className="h-3.5 w-3.5" /> Docs
+            <ArrowUpRight className="h-3 w-3 text-[color:var(--color-cream-faint)]" />
+          </a>
+        </p>
       </motion.div>
     </motion.div>
   );