Lead with the 17s demo, and move the headline panels into Results

The demo is the hero, above the selection schematic, which now expands to the
paper's full teaser in place instead of opening a new tab. The interactive
four-benchmark panels move to Results at a glance so the paper's static bars no
longer sit directly above an interactive copy of the same chart.

assets/demo.mp4 is tracked with LFS, as the Hub requires for binaries.

.gitattributes

@@ -38,3 +38,4 @@ assets/full/population.png filter=lfs diff=lfs merge=lfs -text
 assets/full/teaser.png filter=lfs diff=lfs merge=lfs -text
 assets/overview.png filter=lfs diff=lfs merge=lfs -text
 assets/population.png filter=lfs diff=lfs merge=lfs -text
+assets/demo.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -26,8 +26,21 @@ model frozen. Across four benchmarks, one loop adds ~17 points on average:
 
 ## Page sections
 
-`Abstract` · `Method` · `Results at a glance` · `Benchmark detail` · `Ablation: what evolution
-changes` · `Limitations` · `BibTeX`
+`Demo` · `Abstract` · `Method` · `Results at a glance` · `Benchmark detail` · `Ablation: what
+evolution changes` · `Limitations` · `BibTeX`
+
+The demo is a 17-second animated walkthrough of the loop (`assets/demo.mp4`, 1080p H.264, 2.9 MB,
+faststart so it streams rather than buffering). It sits under the teaser, autoplays muted on loop,
+and carries narration for anyone who unmutes. It was re-encoded from a 2560×1440 master, which is
+kept out of the Space: at 9.99 MiB the master is within kilobytes of Hugging Face's 10 MiB limit for
+files not tracked with LFS. To rebuild it from a new master:
+
+```
+ffmpeg -i master.mp4 -vf "scale=1920:-2:flags=lanczos" \
+  -c:v libx264 -profile:v high -level 4.0 -pix_fmt yuv420p -crf 23 -preset slow \
+  -c:a aac -b:a 128k -ac 2 -movflags +faststart assets/demo.mp4
+ffmpeg -i master.mp4 -vf "thumbnail=48,scale=1920:-2" -frames:v 1 -q:v 3 assets/demo_poster.jpg
+```
 
 The ablation section reproduces the paper's framing: it is an *exploratory attribution, not a
 per-skill causal ablation*, since the skills were co-selected rather than independently randomized.
@@ -69,7 +82,9 @@ rounds them from unrounded rates.
 **3. WebArena-Infinity evolution curve.** All 37 evaluated variants with a best-so-far envelope,
 from `notes/tw_dynamics.json` → `wai_adaptive_scores`. Toggle either series.
 
-**4. Headline four-benchmark panels.** Replaces the right half of the teaser. From
+**4. Headline four-benchmark panels.** Replaces the right half of the teaser, and lives in `Results at
+a glance` rather than the hero: the teaser expands in place to the paper's full figure, whose static
+bars would otherwise sit directly above the interactive version of the same chart. From
 `scripts/gen_summary_figure.py`. The reason to make this one interactive is that the paper's figure
 has to *state* its truncation in the caption: on a shared axis WebArena-Infinity's +49.5 flattens the
 two terminal benchmarks into slivers, so each panel is scaled to its own range. Here the reader can
@@ -147,8 +162,10 @@ tools/interaction_test.html         click-driven test suite for the interactive
 
 | Figure | Content |
 | --- | --- |
-| `teaser.png` | four-benchmark teaser (full figure, click-to-zoom target) |
+| `teaser.png` | four-benchmark teaser — the no-JavaScript fallback for the headline panels |
 | `teaser_schematic.png` | teaser's left half — the selection schematic shown on the page |
+| `full/teaser.png` | the paper's full teaser, swapped in place when the schematic is clicked |
+| `demo.mp4`, `demo_poster.jpg` | 17-second walkthrough of the loop, and its poster frame |
 | `overview.png` | method overview |
 | `population.png` | per-generation operators (mutation, classification, merge) |
 | `tb21_category_gain.png` | per-cluster TB2.1 gain |

assets/demo.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1a12f868056d93aa0c255444352f489c262d503fd4c0d2a530af8b8b0c860090
+size 3043736

index.html

@@ -57,7 +57,7 @@
   nav.top .spacer { flex: 1 1 auto; }
   nav.top a.cta { color: #fff; background: var(--navy); font-weight: 500; }
   nav.top a.cta:hover { background: #06407f; color: #fff; }
-  section[id] { scroll-margin-top: calc(var(--navh) + 14px); }
+  section[id], figure[id] { scroll-margin-top: calc(var(--navh) + 14px); }
 
   /* ---------- header ---------- */
   header { padding: 52px 0 34px; border-bottom: 1px solid var(--line); }
@@ -97,6 +97,7 @@
 
   figure { margin: 0; }
   figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
+  figure video { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
   figure a.zoom { display: block; position: relative; }
   figure a.zoom:hover img { border-color: var(--blue); }
   figure a.zoom::after {
@@ -105,6 +106,7 @@
     background: rgba(3,45,96,0.82); color: #fff; opacity: 0; transition: opacity .15s;
   }
   figure a.zoom:hover::after { opacity: 1; }
+  figure a.zoom.wide::after { content: "\21A9"; }
   figcaption { color: var(--muted); font-size: 0.87rem; margin-top: 10px; line-height: 1.55; }
   .figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
   .abstract { font-size: 1.02rem; }
@@ -318,6 +320,7 @@
 <nav class="top">
   <div class="wrap">
     <span class="brand">DarwinX</span>
+    <a href="#demo">Demo</a>
     <a href="#abstract">Abstract</a>
     <a href="#method">Method</a>
     <a href="#results">Results</a>
@@ -355,6 +358,7 @@
       <a class="btn" href="https://arxiv.org/abs/2608.07545">arXiv:2608.07545</a>
       <a class="btn ghost" href="https://arxiv.org/pdf/2608.07545">PDF</a>
       <a class="btn ghost" href="https://huggingface.co/papers/2608.07545">Hugging Face</a>
+      <a class="btn ghost" href="#demo">Demo (17s)</a>
       <a class="btn ghost" href="mailto:yifan.zhang@salesforce.com?subject=DarwinX%20code%20request">Code available on request</a>
     </div>
   </div>
@@ -362,31 +366,31 @@
 
 <section>
   <div class="wrap">
-    <figure>
-      <a class="zoom" href="assets/full/teaser.png" target="_blank" rel="noopener">
-        <img src="assets/teaser_schematic.png" alt="Variants are evolved from a base agent, survivors are kept and merged, pruned lineages are dropped, all with the model frozen." />
+    <figure id="demo">
+      <video src="assets/demo.mp4" poster="assets/demo_poster.jpg"
+             autoplay muted loop playsinline controls preload="metadata"
+             aria-label="Animated walkthrough of the DarwinX loop: exploring harness variants, measuring them, and merging the survivors."></video>
+      <figcaption>
+        <b>The loop in 17 seconds.</b> Variants of the harness are explored, each is scored by the
+        benchmark's own verifier, and only survivors are kept and merged. Plays muted; use the controls
+        for sound.
+      </figcaption>
+    </figure>
+
+    <figure class="block">
+      <a class="zoom" id="teaser-zoom" href="assets/full/teaser.png" target="_blank" rel="noopener">
+        <img id="teaser-img" src="assets/teaser_schematic.png"
+             data-compact="assets/teaser_schematic.png"
+             data-wide="assets/full/teaser.png"
+             alt="Variants are evolved from a base agent, survivors are kept and merged, pruned lineages are dropped, all with the model frozen." />
       </a>
       <figcaption>
         <b>With the base model frozen, evolving the harness alone matches or beats the strongest prior
         agent on four benchmarks.</b> Variants survive on measured fitness (avg@<i>k</i>, no gold solutions)
-        and complementary survivors are merged. Click for the paper's full figure.
+        and complementary survivors are merged. Click the figure for the paper's full version, with the
+        four benchmark panels alongside; click again to come back.
       </figcaption>
     </figure>
-
-    <div class="block">
-      <div class="widget" id="hl-widget">
-        <div class="wtop">
-          <span class="wlabel">y-axis</span>
-          <div class="chips" id="hl-chips"></div>
-          <span style="flex:1"></span>
-          <label class="toggle"><input type="checkbox" id="hl-prior" checked /> best prior agent</label>
-        </div>
-        <div class="panels" id="hl-panels"></div>
-        <div class="wlegend" id="hl-legend"></div>
-        <p class="tnote" id="hl-note"></p>
-      </div>
-      <noscript class="nojs"><img src="assets/teaser.png" alt="Four-benchmark summary: base vs. evolved vs. best prior agent." /></noscript>
-    </div>
   </div>
 </section>
 
@@ -501,6 +505,21 @@
       (Terminal-Bench&nbsp;2.1), held-out task split (TerminalWorld), synthetic&nbsp;&rarr;&nbsp;real intent
       shift (WebArena-Infinity), and zero-shot cross-benchmark transfer (SWE-bench Verified).
     </p>
+
+    <div class="block">
+      <div class="widget" id="hl-widget">
+        <div class="wtop">
+          <span class="wlabel">y-axis</span>
+          <div class="chips" id="hl-chips"></div>
+          <span style="flex:1"></span>
+          <label class="toggle"><input type="checkbox" id="hl-prior" checked /> best prior agent</label>
+        </div>
+        <div class="panels" id="hl-panels"></div>
+        <div class="wlegend" id="hl-legend"></div>
+        <p class="tnote" id="hl-note"></p>
+      </div>
+      <noscript class="nojs"><img src="assets/teaser.png" alt="Four-benchmark summary: base vs. evolved vs. best prior agent." /></noscript>
+    </div>
   </div>
 </section>
 
@@ -1699,6 +1718,26 @@
       function () { btn.textContent = "Press \u2318C"; }
     );
   });
+
+  /* ---------------- 6. teaser: swap in the paper's wide figure in place ---------------- */
+  (function () {
+    var link = $("teaser-zoom"), img = $("teaser-img");
+    if (!link || !img) { return; }
+    var COMPACT_ALT = img.alt;
+    var WIDE_ALT = "The paper's full teaser: the same schematic beside per-benchmark success rates "
+      + "for Terminal-Bench 2.1, TerminalWorld, WebArena-Infinity, and SWE-bench Verified.";
+    // Preload the wide version so the first click swaps without a flash of empty space.
+    var warm = new Image();
+    warm.src = img.getAttribute("data-wide");
+    link.addEventListener("click", function (evt) {
+      evt.preventDefault();
+      var wide = link.classList.toggle("wide");
+      img.src = img.getAttribute(wide ? "data-wide" : "data-compact");
+      img.alt = wide ? WIDE_ALT : COMPACT_ALT;
+      link.setAttribute("title", wide ? "Back to the schematic" : "Show the paper's full figure");
+    });
+    link.setAttribute("title", "Show the paper's full figure");
+  })();
 })();
 </script>