Reveal chart curves when they scroll into view

Animate SVG traces once without resampling data, and respect reduced-motion preferences.

Co-authored-by: Codex <noreply@openai.com>

site/index.html

@@ -45,6 +45,11 @@
   .progress h2 { font:400 32px/1.2 var(--lead); margin:0 0 8px; }
   .progress p { max-width:680px; }
   #progress-chart { width:100%; height:460px; }
+  #progress-chart.awaiting-reveal .scatterlayer .trace { clip-path:inset(-10px 100% -10px 0); }
+  #progress-chart.awaiting-reveal { pointer-events:none; }
+  @media (prefers-reduced-motion:reduce) {
+    #progress-chart.awaiting-reveal .scatterlayer .trace { clip-path:none; }
+  }
   @media (max-width:640px) { body { font-size:17px; } #map { height:420px; } #log { height:200px; } .msg { max-width:90%; } }
 </style>
 </head>
@@ -176,6 +181,6 @@ document.getElementById("reset").addEventListener("click", () => {
   q.value = ""; q.disabled = send.disabled = false; q.focus({preventScroll:true});
 });
 </script>
-<script src="progress.js?v=source-lines-2"></script>
+<script src="progress.js?v=scroll-reveal-1"></script>
 </body>
 </html>

site/progress.js

@@ -1,5 +1,9 @@
 async function drawProgress() {
   const status = document.getElementById("progress-status");
+  const chart = document.getElementById("progress-chart");
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const animateOnScroll = !reducedMotion.matches && "IntersectionObserver" in window;
+  if (animateOnScroll) chart.classList.add("awaiting-reveal");
   try {
     const response = await fetch("api/progress", {cache: "no-store"});
     if (!response.ok) throw new Error("Progress data unavailable");
@@ -47,6 +51,26 @@ async function drawProgress() {
       hoverlabel: {bgcolor: "#ffffff", bordercolor: "#000000"}
     }, {responsive: true, displayModeBar: false, displaylogo: false});
     status.hidden = true;
+    if (animateOnScroll) {
+      const observer = new IntersectionObserver(entries => {
+        if (!entries.some(entry => entry.isIntersecting && entry.intersectionRatio >= 0.3)) return;
+        observer.disconnect();
+        // Reveal the rendered SVG traces, keeping both axes and all data fixed.
+        // This avoids redrawing thousands of points on every animation frame.
+        chart.classList.remove("awaiting-reveal");
+        if (reducedMotion.matches) return;
+        const animations = [...chart.querySelectorAll(".scatterlayer .trace")].map(trace =>
+          trace.animate([
+            {clipPath: "inset(-10px 100% -10px 0)"},
+            {clipPath: "inset(-10px 0% -10px 0)"}
+          ], {duration: 1800, easing: "cubic-bezier(0.22, 1, 0.36, 1)"}));
+        const finish = () => animations.forEach(animation => animation.finish());
+        reducedMotion.addEventListener("change", finish, {once: true});
+        Promise.all(animations.map(animation => animation.finished)).finally(() =>
+          reducedMotion.removeEventListener("change", finish));
+      }, {threshold: 0.3});
+      observer.observe(chart);
+    }
   } catch (error) {
     document.getElementById("progress-chart").hidden = true;
     status.textContent = "The progress chart is currently unavailable.";