Homepage: 20-second product video

web/src/app/page.tsx

@@ -3,6 +3,7 @@ import { DataUnavailable } from "@/components/DataUnavailable";
 import { getHardwareBoard, getLeaderboardModels, getStats } from "@/lib/api";
 import { BenchTable } from "@/components/BenchTable";
 import { CopyCommand } from "@/components/CopyCommand";
+import { ProductFilm } from "@/components/ProductFilm";
 import { CATEGORY_LABELS, CATEGORY_WEIGHTS, TIERS } from "@/lib/tiers";
 import { modelMatchups, rigMatchups } from "@/lib/matchups";
 
@@ -28,7 +29,8 @@ export default async function Home() {
     <div className="flex flex-col">
       {/* Masthead — data-first, no hero. The board is the homepage. */}
       <section className="border-b border-[var(--color-line-2)] bg-[var(--color-surface)]">
-        <div className="max-w-7xl mx-auto px-6 md:px-10 pt-12 md:pt-16 pb-8">
+        <div className="max-w-7xl mx-auto px-6 md:px-10 pt-12 md:pt-16 pb-8 grid gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] lg:items-center">
+          <div>
           <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-[var(--color-emerald)] font-semibold">
             LLM benchmarks · v3 testpack · deterministic · no API key
           </div>
@@ -74,6 +76,8 @@ export default async function Home() {
               See where you&apos;d rank →
             </Link>
           </div>
+          </div>
+          <ProductFilm />
         </div>
 
         {/* Instrument strip */}

web/src/components/ProductFilm.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * The 20-second product video, muted and looping. It plays only while on screen,
+ * and not at all for people who ask for reduced motion: they get the poster and
+ * the player controls instead.
+ */
+export function ProductFilm() {
+  const ref = useRef<HTMLVideoElement>(null);
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const video = ref.current;
+    if (!video) return;
+    const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let visible = false;
+    const sync = () => {
+      setReduced(motion.matches);
+      if (visible && !motion.matches && !document.hidden) video.play().catch(() => {});
+      else video.pause();
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      sync();
+    }, { threshold: 0.25 });
+    observer.observe(video);
+    motion.addEventListener("change", sync);
+    document.addEventListener("visibilitychange", sync);
+    return () => {
+      observer.disconnect();
+      motion.removeEventListener("change", sync);
+      document.removeEventListener("visibilitychange", sync);
+    };
+  }, []);
+
+  return (
+    <figure className="w-full">
+      <video
+        ref={ref}
+        className="block w-full aspect-video rounded-xl border border-[var(--color-line-2)] bg-[var(--color-ink)] shadow-[0_24px_60px_-20px_rgba(0,0,0,0.35)]"
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        controls={reduced}
+        poster="/video/pipelinescore-product-poster.jpg"
+        aria-label="PipelineScore in 20 seconds: one command runs the tests on your machine, then the model board and the hardware board."
+      >
+        <source src="/video/pipelinescore-product.mp4" type="video/mp4" media="(min-width: 1024px)" />
+        <source src="/video/pipelinescore-product-720.mp4" type="video/mp4" />
+      </video>
+    </figure>
+  );
+}