From 47872e64f272425b205d4b66bc1141cfbde1a24d Mon Sep 17 00:00:00 2001
From: Val <val@codejam.info>
Date: Wed, 2 Sep 2026 14:53:26 -0700
Subject: [PATCH 1/5] fix(producer): window auto-start video to GSAP opacity,
 not .scene

Keep-local: visibility discovery sampled .scene (usually 1), so probe
injected the file for the whole host window. Seek via __hf.seek so
nested GSAP updates, and bind mediaStart to the first visible frame.
Never pull start earlier than host-map.
Do not upstream (wizard-emit untimed video).
---
 .../src/services/htmlCompiler.test.ts         | 100 +++++++++++++-----
 .../producer/src/services/htmlCompiler.ts     |  62 +++++++----
 .../services/render/stages/probeStage.test.ts |  32 +++++-
 3 files changed, 145 insertions(+), 49 deletions(-)

diff --git a/packages/producer/src/services/htmlCompiler.test.ts b/packages/producer/src/services/htmlCompiler.test.ts
index 29d2334bdc0..9c63ca24408 100644
--- a/packages/producer/src/services/htmlCompiler.test.ts
+++ b/packages/producer/src/services/htmlCompiler.test.ts
@@ -2686,25 +2686,29 @@ describe("resolveCompositionDurations strict literal timing", () => {
 });
 
 describe("discoverVideoVisibilityFromTimeline", () => {
-  it("returns scene visibility windows for auto-start videos", async () => {
-    const duration = 2;
-    const sampleStep = 0.1;
-    const windows = [
-      { id: "v0", start: 0.2, end: 0.7 },
-      { id: "v1", start: 0.5, end: 1.2 },
-      { id: "v2", start: 1.0, end: 1.8 },
-      { id: "v3", start: 0.0, end: 0.4 },
-    ];
-
-    type SceneEl = { opacityAt: (t: number) => number };
+  type OpacityEl = {
+    id?: string;
+    opacityAt: (t: number) => number;
+    parentElement: OpacityEl | null;
+  };
+
+  async function runVisibilityProbe(
+    windows: { id: string; start: number; end: number }[],
+    duration: number,
+    sceneOpacity = 1,
+    hfSeek?: (t: number) => void,
+  ) {
     const videos = windows.map((win) => {
-      const sceneEl: SceneEl = {
-        opacityAt: (t) => (t >= win.start && t <= win.end ? 1 : 0),
+      const sceneEl: OpacityEl = {
+        opacityAt: () => sceneOpacity,
+        parentElement: null,
       };
-      return {
+      const videoEl: OpacityEl = {
         id: win.id,
-        closest: (selector: string) => (selector === ".scene" ? sceneEl : null),
+        opacityAt: (t) => (t >= win.start && t <= win.end ? 1 : 0),
+        parentElement: sceneEl,
       };
+      return videoEl;
     });
 
     let currentTime = 0;
@@ -2712,6 +2716,16 @@ describe("discoverVideoVisibilityFromTimeline", () => {
     const previousDocument = globalThis.document;
 
     globalThis.window = {
+      ...(hfSeek
+        ? {
+            __hf: {
+              seek: (time: number) => {
+                currentTime = time;
+                hfSeek(time);
+              },
+            },
+          }
+        : {}),
       __timelines: {
         root: {
           totalTime: (time: number) => {
@@ -2719,7 +2733,7 @@ describe("discoverVideoVisibilityFromTimeline", () => {
           },
         },
       },
-      getComputedStyle: (el: SceneEl) => ({
+      getComputedStyle: (el: OpacityEl) => ({
         opacity: String(el.opacityAt(currentTime)),
       }),
     } as typeof globalThis.window;
@@ -2736,22 +2750,52 @@ describe("discoverVideoVisibilityFromTimeline", () => {
       const page = {
         evaluate: async (fn: (arg: number) => unknown, arg: number) => fn(arg),
       };
-
-      const result = await discoverVideoVisibilityFromTimeline(page as never, duration);
-
-      expect(result).toHaveLength(windows.length);
-      for (const win of windows) {
-        const found = result.find((entry) => entry.videoId === win.id);
-        expect(found).toBeDefined();
-        expect(found!.visibleStart).toBeGreaterThanOrEqual(win.start - sampleStep);
-        expect(found!.visibleStart).toBeLessThanOrEqual(win.start + sampleStep);
-        expect(found!.visibleEnd).toBeGreaterThanOrEqual(win.end - sampleStep);
-        expect(found!.visibleEnd).toBeLessThanOrEqual(win.end + sampleStep);
-      }
+      return await discoverVideoVisibilityFromTimeline(page as never, duration);
     } finally {
       globalThis.window = previousWindow;
       globalThis.document = previousDocument;
     }
+  }
+
+  it("returns video effective-opacity windows for auto-start videos", async () => {
+    const duration = 2;
+    const sampleStep = 0.1;
+    const windows = [
+      { id: "v0", start: 0.2, end: 0.7 },
+      { id: "v1", start: 0.5, end: 1.2 },
+      { id: "v2", start: 1.0, end: 1.8 },
+      { id: "v3", start: 0.0, end: 0.4 },
+    ];
+
+    const result = await runVisibilityProbe(windows, duration);
+
+    expect(result).toHaveLength(windows.length);
+    for (const win of windows) {
+      const found = result.find((entry) => entry.videoId === win.id);
+      expect(found).toBeDefined();
+      expect(found!.visibleStart).toBeGreaterThanOrEqual(win.start - sampleStep);
+      expect(found!.visibleStart).toBeLessThanOrEqual(win.start + sampleStep);
+      expect(found!.visibleEnd).toBeGreaterThanOrEqual(win.end - sampleStep);
+      expect(found!.visibleEnd).toBeLessThanOrEqual(win.end + sampleStep);
+    }
+  });
+
+  it("does not treat a fully-opaque .scene as the video window", async () => {
+    const result = await runVisibilityProbe([{ id: "clip", start: 0.8, end: 1.4 }], 2, 1);
+    expect(result).toHaveLength(1);
+    expect(result[0]!.videoId).toBe("clip");
+    expect(result[0]!.visibleStart).toBeGreaterThan(0.6);
+    expect(result[0]!.visibleStart).toBeLessThanOrEqual(0.9);
+    expect(result[0]!.visibleEnd).toBeGreaterThanOrEqual(1.3);
+    expect(result[0]!.visibleEnd).toBeLessThanOrEqual(1.5);
+  });
+
+  it("prefers window.__hf.seek so nested GSAP updates", async () => {
+    const sought: number[] = [];
+    await runVisibilityProbe([{ id: "clip", start: 0.5, end: 1.2 }], 2, 1, (t) => {
+      sought.push(t);
+    });
+    expect(sought.length).toBeGreaterThan(0);
   });
 });
 describe("sub-composition variable injection (render path, #2064)", () => {
diff --git a/packages/producer/src/services/htmlCompiler.ts b/packages/producer/src/services/htmlCompiler.ts
index 1dbc2d211fa..10f5bf76bff 100644
--- a/packages/producer/src/services/htmlCompiler.ts
+++ b/packages/producer/src/services/htmlCompiler.ts
@@ -2606,8 +2606,10 @@ export interface VideoVisibilityWindow {
 }
 
 /**
- * Seek the GSAP timeline to discover when each video's parent scene is visible.
- * Only processes videos with the data-hf-auto-start sentinel (auto-injected timing).
+ * Seek the composition and discover when each auto-start video is visible.
+ * Visibility is the video's effective opacity (element × ancestors), not `.scene`.
+ * Prefers `window.__hf.seek` so nested scene GSAP (paused sibling timelines)
+ * actually updates — root `totalTime` does not propagate to them.
  */
 export async function discoverVideoVisibilityFromTimeline(
   page: Page,
@@ -2620,6 +2622,11 @@ export async function discoverVideoVisibilityFromTimeline(
     const videos = document.querySelectorAll("video[data-hf-auto-start]");
     if (videos.length === 0) return results;
 
+    const hfSeek = (
+      window as unknown as {
+        __hf?: { seek?: (t: number, o?: { suppressEvents?: boolean }) => void };
+      }
+    ).__hf?.seek;
     const timelines = (window as unknown as { __timelines?: Record<string, unknown> }).__timelines;
     if (!timelines) return results;
 
@@ -2643,14 +2650,35 @@ export async function discoverVideoVisibilityFromTimeline(
       }
     };
 
+    const seekComposition = (t: number) => {
+      if (typeof hfSeek === "function") {
+        try {
+          hfSeek(t, { suppressEvents: true });
+        } catch {}
+        return;
+      }
+      seekTl(t);
+    };
+
+    // Same walk as videoFrameInjector: GSAP often animates a wrapper, not the
+    // <video>. `val || 1` would turn opacity:0 into 1.
+    const getEffectiveOpacity = (node: Element): number => {
+      let opacity = 1;
+      let current: Element | null = node;
+      while (current) {
+        const val = parseFloat(window.getComputedStyle(current).opacity);
+        opacity *= Number.isNaN(val) ? 1 : val;
+        current = current.parentElement;
+      }
+      return opacity;
+    };
+
     const SAMPLE_STEP = 0.1;
     const BINARY_PRECISION = 1 / 60;
 
-    // Seek once per timestep and sample every video — seeking dominates and is
-    // independent of which element we read.
     const entries: {
       id: string;
-      sceneEl: Element;
+      videoEl: Element;
       firstVisible: number | null;
       lastVisible: number | null;
     }[] = [];
@@ -2659,7 +2687,7 @@ export async function discoverVideoVisibilityFromTimeline(
       if (!id) continue;
       entries.push({
         id,
-        sceneEl: videoEl.closest(".scene") || videoEl,
+        videoEl,
         firstVisible: null,
         lastVisible: null,
       });
@@ -2667,41 +2695,35 @@ export async function discoverVideoVisibilityFromTimeline(
     if (entries.length === 0) return results;
 
     for (let t = 0; t <= duration; t += SAMPLE_STEP) {
-      seekTl(t);
+      seekComposition(t);
       for (const entry of entries) {
-        const opacity = parseFloat(window.getComputedStyle(entry.sceneEl).opacity);
-        if (opacity > 0) {
+        if (getEffectiveOpacity(entry.videoEl) > 0) {
           if (entry.firstVisible === null) entry.firstVisible = t;
           entry.lastVisible = t;
         }
       }
     }
 
-    // Per-video boundary refinement (cheap: O(log(step)) seeks each).
     for (const entry of entries) {
-      const { id, sceneEl, firstVisible, lastVisible } = entry;
+      const { id, videoEl, firstVisible, lastVisible } = entry;
       if (firstVisible === null || lastVisible === null) continue;
 
-      // Binary search left boundary
       let lo = Math.max(0, firstVisible - SAMPLE_STEP);
       let hi = firstVisible;
       while (hi - lo > BINARY_PRECISION) {
         const mid = (lo + hi) / 2;
-        seekTl(mid);
-        const opacity = parseFloat(window.getComputedStyle(sceneEl).opacity);
-        if (opacity > 0) hi = mid;
+        seekComposition(mid);
+        if (getEffectiveOpacity(videoEl) > 0) hi = mid;
         else lo = mid;
       }
       const exactStart = hi;
 
-      // Binary search right boundary
       lo = lastVisible;
       hi = Math.min(duration, lastVisible + SAMPLE_STEP);
       while (hi - lo > BINARY_PRECISION) {
         const mid = (lo + hi) / 2;
-        seekTl(mid);
-        const opacity = parseFloat(window.getComputedStyle(sceneEl).opacity);
-        if (opacity > 0) lo = mid;
+        seekComposition(mid);
+        if (getEffectiveOpacity(videoEl) > 0) lo = mid;
         else hi = mid;
       }
       const exactEnd = lo;
@@ -2713,7 +2735,7 @@ export async function discoverVideoVisibilityFromTimeline(
       });
     }
 
-    seekTl(0);
+    seekComposition(0);
     return results;
   }, compositionDuration);
 }
diff --git a/packages/producer/src/services/render/stages/probeStage.test.ts b/packages/producer/src/services/render/stages/probeStage.test.ts
index cbd1a105d0e..589d141da33 100644
--- a/packages/producer/src/services/render/stages/probeStage.test.ts
+++ b/packages/producer/src/services/render/stages/probeStage.test.ts
@@ -33,6 +33,7 @@ let mediaPreflightComposition: unknown;
 let afterMediaPreflight: (() => void) | null = null;
 let fileServerCloseCallCount = 0;
 let browserMediaResults: unknown[] = [];
+let visibilityWindows: { videoId: string; visibleStart: number; visibleEnd: number }[] = [];
 
 type MockSession = {
   id: number;
@@ -91,6 +92,7 @@ function resetRetryMocks() {
   afterMediaPreflight = null;
   fileServerCloseCallCount = 0;
   browserMediaResults = [];
+  visibilityWindows = [];
 }
 
 mock.module("../../assetMediaType.js", () => ({
@@ -200,7 +202,7 @@ mock.module("../../fileServer.js", () => ({
 mock.module("../../htmlCompiler.js", () => ({
   discoverMediaFromBrowser: async () => browserMediaResults,
   discoverAudioVolumeAutomationFromTimeline: async () => [],
-  discoverVideoVisibilityFromTimeline: async () => [],
+  discoverVideoVisibilityFromTimeline: async () => visibilityWindows,
   recompileWithResolutions: async (c: unknown) => c,
   resolveCompositionDurations: async () => [],
 }));
@@ -923,6 +925,34 @@ describe("runProbeStage — forceScreenshot threading", () => {
     },
   );
 
+  it("binds authored mediaStart to the visibility window, not scene start", async () => {
+    resetRetryMocks();
+    visibilityWindows = [{ videoId: "clip", visibleStart: 3.5, visibleEnd: 6 }];
+    const { runProbeStage } = await import("./probeStage.js");
+    const input = makeProbeInput({});
+    input.composition.videos.push({
+      id: "clip",
+      src: "runtime.mp4",
+      start: 2,
+      end: 6,
+      mediaStart: 3,
+      loop: false,
+      hasAudio: false,
+    });
+    input.compiled.html = `<video id="clip" src="runtime.mp4" data-hf-auto-start=""></video>`;
+
+    await runProbeStage(input);
+
+    expect(input.composition.videos[0]).toEqual(
+      expect.objectContaining({
+        id: "clip",
+        start: 3.5,
+        end: 6,
+        mediaStart: 3,
+      }),
+    );
+  });
+
   it("launches a probe when a static-duration composition inserts video at runtime", async () => {
     capturedCfgs.length = 0;
     const { runProbeStage } = await import("./probeStage.js");

From 37fbe28581e992452357d9d2186a1180f98d82f6 Mon Sep 17 00:00:00 2001
From: Val <val@codejam.info>
Date: Wed, 9 Sep 2026 17:41:40 -0700
Subject: [PATCH 2/5] fix(producer): keep auto-start file clock when opacity
 raises start

When visibility moves start later and the clip has a static src and no
in-point, add the delta to mediaStart so encode keeps the host clock.
Empty-src stays bound to the reveal. Host-mapped start is a floor;
visibility owns the out-point. Authored mediaStart stays on the reveal.
---
 .../services/render/stages/probeStage.test.ts | 112 ++++++++++++++++++
 .../src/services/render/stages/probeStage.ts  |  27 ++++-
 2 files changed, 137 insertions(+), 2 deletions(-)

diff --git a/packages/producer/src/services/render/stages/probeStage.test.ts b/packages/producer/src/services/render/stages/probeStage.test.ts
index 589d141da33..7c80c05f67d 100644
--- a/packages/producer/src/services/render/stages/probeStage.test.ts
+++ b/packages/producer/src/services/render/stages/probeStage.test.ts
@@ -953,6 +953,118 @@ describe("runProbeStage — forceScreenshot threading", () => {
     );
   });
 
+  it("shifts auto-start mediaStart when visibility raises start", async () => {
+    resetRetryMocks();
+    visibilityWindows = [{ videoId: "clip", visibleStart: 3.5, visibleEnd: 6 }];
+    const { runProbeStage } = await import("./probeStage.js");
+    const input = makeProbeInput({});
+    input.composition.videos.push({
+      id: "clip",
+      src: "runtime.mp4",
+      start: 2,
+      end: 6,
+      mediaStart: 0,
+      loop: false,
+      hasAudio: false,
+    });
+    input.compiled.html = `<video id="clip" src="runtime.mp4" data-hf-auto-start=""></video>`;
+
+    await runProbeStage(input);
+
+    expect(input.composition.videos[0]).toEqual(
+      expect.objectContaining({
+        id: "clip",
+        start: 3.5,
+        end: 6,
+        mediaStart: 1.5,
+      }),
+    );
+  });
+
+  it("leaves mediaStart at 0 when visibility raises start on an empty-src video", async () => {
+    resetRetryMocks();
+    visibilityWindows = [{ videoId: "clip", visibleStart: 3.5, visibleEnd: 6 }];
+    const { runProbeStage } = await import("./probeStage.js");
+    const input = makeProbeInput({});
+    input.composition.videos.push({
+      id: "clip",
+      src: "runtime.mp4",
+      start: 2,
+      end: 6,
+      mediaStart: 0,
+      loop: false,
+      hasAudio: false,
+    });
+    input.compiled.html = `<video id="clip" data-hf-auto-start=""></video>`;
+
+    await runProbeStage(input);
+
+    expect(input.composition.videos[0]).toEqual(
+      expect.objectContaining({
+        id: "clip",
+        start: 3.5,
+        end: 6,
+        mediaStart: 0,
+      }),
+    );
+  });
+
+  it("keeps the visibility out-point so a short overlay holds after host+fileLen", async () => {
+    resetRetryMocks();
+    visibilityWindows = [{ videoId: "clip", visibleStart: 3.5, visibleEnd: 6 }];
+    const { runProbeStage } = await import("./probeStage.js");
+    const input = makeProbeInput({});
+    input.composition.videos.push({
+      id: "clip",
+      src: "runtime.mp4",
+      start: 2,
+      end: 4,
+      mediaStart: 0,
+      loop: false,
+      hasAudio: false,
+    });
+    input.compiled.html = `<video id="clip" src="runtime.mp4" data-hf-auto-start=""></video>`;
+
+    await runProbeStage(input);
+
+    expect(input.composition.videos[0]).toEqual(
+      expect.objectContaining({
+        id: "clip",
+        start: 3.5,
+        end: 6,
+        mediaStart: 1.5,
+      }),
+    );
+  });
+
+  it("does not let visibility pull start earlier than the host-mapped start", async () => {
+    resetRetryMocks();
+    visibilityWindows = [{ videoId: "clip", visibleStart: 0, visibleEnd: 4 }];
+    const { runProbeStage } = await import("./probeStage.js");
+    const input = makeProbeInput({});
+    input.composition.videos.push({
+      id: "clip",
+      src: "runtime.mp4",
+      start: 2,
+      end: 6,
+      mediaStart: 0,
+      loop: false,
+      hasAudio: false,
+    });
+    input.compiled.html = `<video id="clip" src="runtime.mp4" data-hf-auto-start=""></video>`;
+
+    await runProbeStage(input);
+
+    expect(input.composition.videos[0]).toEqual(
+      expect.objectContaining({
+        id: "clip",
+        start: 2,
+        end: 4,
+        mediaStart: 0,
+      }),
+    );
+  });
+
   it("launches a probe when a static-duration composition inserts video at runtime", async () => {
     capturedCfgs.length = 0;
     const { runProbeStage } = await import("./probeStage.js");
diff --git a/packages/producer/src/services/render/stages/probeStage.ts b/packages/producer/src/services/render/stages/probeStage.ts
index 9ddf7843246..6921851c85f 100644
--- a/packages/producer/src/services/render/stages/probeStage.ts
+++ b/packages/producer/src/services/render/stages/probeStage.ts
@@ -169,6 +169,22 @@ export function hasAutoStartVideos(html: string): boolean {
   return document.querySelector("video[data-hf-auto-start]") !== null;
 }
 
+/** Videos whose file was in the HTML at compile time — the player already ran the host clock. */
+function staticSrcVideoIds(html: string): Set<string> {
+  const { document } = parseHTML(html);
+  const ids = new Set<string>();
+  for (const el of document.querySelectorAll("video")) {
+    const ownSrc = el.getAttribute("src")?.trim();
+    const childSrc = [...el.querySelectorAll("source")].some((source) =>
+      Boolean(source.getAttribute("src")?.trim()),
+    );
+    if (!ownSrc && !childSrc) continue;
+    const id = el.getAttribute("data-hf-render-id") || el.id;
+    if (id) ids.add(id);
+  }
+  return ids;
+}
+
 /**
  * Variable-bound image/audio/video sources are resolved by the browser runtime, not
  * the static compiler. Probe them whenever the current render overrides the
@@ -762,14 +778,21 @@ export async function runProbeStage(input: ProbeStageInput): Promise<ProbeStageR
         );
         assertNotAborted();
 
+        const hostClockIds = staticSrcVideoIds(compiled.html);
         for (const win of visibilityWindows) {
           const video = composition.videos.find((v) => v.id === win.videoId);
           if (!video) continue;
           if (win.visibleStart >= 0 && win.visibleEnd > win.visibleStart) {
-            video.start = win.visibleStart;
+            const prevStart = video.start;
+            // Host-window maps origin; never pull start earlier than that floor.
+            video.start = Math.max(video.start, win.visibleStart);
             video.end = win.visibleEnd;
+            const raised = video.start - prevStart;
+            if (raised > 0 && video.mediaStart <= 0 && hostClockIds.has(video.id)) {
+              video.mediaStart += raised;
+            }
             log.info(
-              `[Probe] Runtime video discovery: ${video.id} visible ${win.visibleStart.toFixed(2)}s to ${win.visibleEnd.toFixed(2)}s`,
+              `[Probe] Runtime video discovery: ${video.id} visible ${win.visibleStart.toFixed(2)}s to ${win.visibleEnd.toFixed(2)}s, placed ${video.start.toFixed(2)}s to ${video.end.toFixed(2)}s`,
             );
           }
         }

From 472398cdf654df40770c9ee4dbaafb4251a8d637 Mon Sep 17 00:00:00 2001
From: Val <val@codejam.info>
Date: Wed, 9 Sep 2026 20:11:26 -0700
Subject: [PATCH 3/5] fix(producer): stamp opacity out-point onto compiled
 video duration

Capture still used the file-bounded data-duration, so an in-flow overlay
went display:none at source EOF and the underlay showed through.
---
 .../services/render/stages/probeStage.test.ts | 19 ++++-
 .../src/services/render/stages/probeStage.ts  | 84 +++++++++++++++++++
 2 files changed, 102 insertions(+), 1 deletion(-)

diff --git a/packages/producer/src/services/render/stages/probeStage.test.ts b/packages/producer/src/services/render/stages/probeStage.test.ts
index 7c80c05f67d..c47ae23d916 100644
--- a/packages/producer/src/services/render/stages/probeStage.test.ts
+++ b/packages/producer/src/services/render/stages/probeStage.test.ts
@@ -314,6 +314,20 @@ function makeProbeInput(overrides: {
   };
 }
 
+describe("stampDiscoveredVideoTiming", () => {
+  it("replaces a file-bounded data-duration so capture can hold past source EOF", async () => {
+    const { stampDiscoveredVideoTiming } = await import("./probeStage.js");
+    const html = stampDiscoveredVideoTiming(
+      `<video id="wrap" src="wrap.mp4" data-start="13" data-end="18.2" data-duration="5.2" data-hf-auto-start=""></video>`,
+      [{ id: "wrap", start: 17, end: 19, mediaStart: 4 }],
+    );
+    expect(html).toContain('data-start="13"');
+    expect(html).toContain('data-end="19"');
+    expect(html).toContain('data-duration="6"');
+    expect(html).not.toContain("data-media-start");
+  });
+});
+
 describe("hasScriptedAudioVolumeAutomation", () => {
   it("ignores non-script volume text", () => {
     expect(
@@ -1023,7 +1037,7 @@ describe("runProbeStage — forceScreenshot threading", () => {
       loop: false,
       hasAudio: false,
     });
-    input.compiled.html = `<video id="clip" src="runtime.mp4" data-hf-auto-start=""></video>`;
+    input.compiled.html = `<video id="clip" src="runtime.mp4" data-start="2" data-end="4" data-duration="2" data-hf-auto-start=""></video>`;
 
     await runProbeStage(input);
 
@@ -1035,6 +1049,9 @@ describe("runProbeStage — forceScreenshot threading", () => {
         mediaStart: 1.5,
       }),
     );
+    expect(input.compiled.html).toContain('data-start="2"');
+    expect(input.compiled.html).toContain('data-end="6"');
+    expect(input.compiled.html).toContain('data-duration="4"');
   });
 
   it("does not let visibility pull start earlier than the host-mapped start", async () => {
diff --git a/packages/producer/src/services/render/stages/probeStage.ts b/packages/producer/src/services/render/stages/probeStage.ts
index 6921851c85f..43b6101aed3 100644
--- a/packages/producer/src/services/render/stages/probeStage.ts
+++ b/packages/producer/src/services/render/stages/probeStage.ts
@@ -169,6 +169,64 @@ export function hasAutoStartVideos(html: string): boolean {
   return document.querySelector("video[data-hf-auto-start]") !== null;
 }
 
+type VideoTimingStamp = {
+  id: string;
+  start: number;
+  end: number;
+  mediaStart: number;
+};
+
+function videoTagAttr(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\s${attr}=["']([^"']*)["']`));
+  return match?.[1] ?? null;
+}
+
+function setVideoTagAttr(tag: string, attr: string, value: string): string {
+  if (new RegExp(`\\s${attr}(?:\\s|=|>|/)`).test(tag)) {
+    return tag.replace(new RegExp(`(${attr}=["'])[^"']*(["'])`), `$1${value}$2`);
+  }
+  return tag.replace(/>$/, ` ${attr}="${value}">`);
+}
+
+/**
+ * Extend compiled `data-end` / `data-duration` to the opacity out-point.
+ * Leave `data-start` / `data-media-start` alone — extract already has the
+ * host clock. Rewriting start on an in-flow underlay blanks the scene.
+ */
+export function stampDiscoveredVideoTiming(
+  html: string,
+  stamps: readonly VideoTimingStamp[],
+): string {
+  if (stamps.length === 0) return html;
+  const byId = new Map(stamps.map((stamp) => [stamp.id, stamp]));
+  return html.replace(/<video\b[^>]*>/gi, (tag) => {
+    const id = videoTagAttr(tag, MEDIA_RENDER_ID_ATTR) ?? videoTagAttr(tag, "id");
+    if (!id) return tag;
+    const stamp = byId.get(id);
+    if (!stamp || !Number.isFinite(stamp.end) || stamp.end <= stamp.start) return tag;
+    const authoredStart = Number.parseFloat(videoTagAttr(tag, "data-start") ?? "");
+    const slotStart = Number.isFinite(authoredStart) ? authoredStart : stamp.start;
+    const duration = stamp.end - slotStart;
+    if (!(duration > 0)) return tag;
+    return setVideoTagAttr(
+      setVideoTagAttr(tag, "data-end", String(stamp.end)),
+      "data-duration",
+      String(duration),
+    );
+  });
+}
+
+function stampDiscoveredVideoTimingOnCompiled(
+  compiled: CompiledComposition,
+  stamps: readonly VideoTimingStamp[],
+): void {
+  if (stamps.length === 0) return;
+  compiled.html = stampDiscoveredVideoTiming(compiled.html, stamps);
+  for (const [path, html] of compiled.subCompositions) {
+    compiled.subCompositions.set(path, stampDiscoveredVideoTiming(html, stamps));
+  }
+}
+
 /** Videos whose file was in the HTML at compile time — the player already ran the host clock. */
 function staticSrcVideoIds(html: string): Set<string> {
   const { document } = parseHTML(html);
@@ -779,6 +837,7 @@ export async function runProbeStage(input: ProbeStageInput): Promise<ProbeStageR
         assertNotAborted();
 
         const hostClockIds = staticSrcVideoIds(compiled.html);
+        const timingStamps: VideoTimingStamp[] = [];
         for (const win of visibilityWindows) {
           const video = composition.videos.find((v) => v.id === win.videoId);
           if (!video) continue;
@@ -791,11 +850,36 @@ export async function runProbeStage(input: ProbeStageInput): Promise<ProbeStageR
             if (raised > 0 && video.mediaStart <= 0 && hostClockIds.has(video.id)) {
               video.mediaStart += raised;
             }
+            timingStamps.push({
+              id: video.id,
+              start: video.start,
+              end: video.end,
+              mediaStart: video.mediaStart,
+            });
             log.info(
               `[Probe] Runtime video discovery: ${video.id} visible ${win.visibleStart.toFixed(2)}s to ${win.visibleEnd.toFixed(2)}s, placed ${video.start.toFixed(2)}s to ${video.end.toFixed(2)}s`,
             );
           }
         }
+        if (timingStamps.length > 0) {
+          stampDiscoveredVideoTimingOnCompiled(compiled, timingStamps);
+          writeCompiledArtifacts(compiled, workDir, Boolean(job.config.debug));
+          await session.page.evaluate((rows: VideoTimingStamp[]) => {
+            for (const row of rows) {
+              const el = ((
+                window as unknown as { __hfMediaEl?: (id: string) => Element | null }
+              ).__hfMediaEl?.(row.id) ??
+                document.getElementById(row.id)) as HTMLVideoElement | null;
+              if (!el) continue;
+              const authoredStart = Number.parseFloat(el.getAttribute("data-start") ?? "");
+              const slotStart = Number.isFinite(authoredStart) ? authoredStart : row.start;
+              const duration = row.end - slotStart;
+              if (!(duration > 0)) continue;
+              el.setAttribute("data-end", String(row.end));
+              el.setAttribute("data-duration", String(duration));
+            }
+          }, timingStamps);
+        }
       }
     }
 

From f87a271574357c237a05c042dcca9ed8d1e300e8 Mon Sep 17 00:00:00 2001
From: Val <val@codejam.info>
Date: Wed, 9 Sep 2026 20:17:24 -0700
Subject: [PATCH 4/5] refactor(core): stamp opacity slot ends through the
 timing compiler

Move the hold write-back onto extendVideoSlotEnds and drop the injector
0-size special case so probe only applies one {id,end,duration} row.
---
 packages/core/src/compiler/index.ts           |  2 +
 .../core/src/compiler/timingCompiler.test.ts  | 23 +++++
 packages/core/src/compiler/timingCompiler.ts  | 27 ++++++
 packages/core/src/index.ts                    |  2 +
 .../services/render/stages/probeStage.test.ts | 14 ---
 .../src/services/render/stages/probeStage.ts  | 86 ++++---------------
 6 files changed, 70 insertions(+), 84 deletions(-)

diff --git a/packages/core/src/compiler/index.ts b/packages/core/src/compiler/index.ts
index ca49e97f073..8cfa872eb4d 100644
--- a/packages/core/src/compiler/index.ts
+++ b/packages/core/src/compiler/index.ts
@@ -16,12 +16,14 @@ export {
   injectDurations,
   extractResolvedMedia,
   clampDurations,
+  extendVideoSlotEnds,
   shouldClampMediaDuration,
   shouldClampResolvedMediaDuration,
   type UnresolvedElement,
   type ResolvedDuration,
   type ResolvedMediaElement,
   type CompilationResult,
+  type VideoSlotEnd,
 } from "./timingCompiler";
 
 // HTML compiler (Node.js — requires fs)
diff --git a/packages/core/src/compiler/timingCompiler.test.ts b/packages/core/src/compiler/timingCompiler.test.ts
index 13f73fe0c8b..aae133f2e69 100644
--- a/packages/core/src/compiler/timingCompiler.test.ts
+++ b/packages/core/src/compiler/timingCompiler.test.ts
@@ -7,6 +7,7 @@ import {
   injectDurations,
   extractResolvedMedia,
   clampDurations,
+  extendVideoSlotEnds,
   shouldClampResolvedMediaDuration,
 } from "./timingCompiler.js";
 
@@ -474,6 +475,28 @@ describe("extractResolvedMedia", () => {
   });
 });
 
+describe("extendVideoSlotEnds", () => {
+  it("keeps data-start and stretches a file-bounded data-duration past source EOF", () => {
+    const html = extendVideoSlotEnds(
+      `<video id="wrap" src="wrap.mp4" data-start="13" data-end="18.2" data-duration="5.2" data-hf-auto-start=""></video>`,
+      [{ id: "wrap", end: 19, duration: 6 }],
+    );
+    expect(html).toContain('data-start="13"');
+    expect(html).toContain('data-end="19"');
+    expect(html).toContain('data-duration="6"');
+    expect(html).not.toContain("data-media-start");
+  });
+
+  it("does not rewrite a video mentioned only in a comment", () => {
+    const html = extendVideoSlotEnds(
+      `<!-- <video id="wrap" data-duration="5.2" data-end="18.2"> --><video id="wrap" data-start="13" data-end="18.2" data-duration="5.2"></video>`,
+      [{ id: "wrap", end: 19, duration: 6 }],
+    );
+    expect(html).toContain(`<!-- <video id="wrap" data-duration="5.2" data-end="18.2"> -->`);
+    expect(html).toContain('data-duration="6"');
+  });
+});
+
 describe("clampDurations", () => {
   it("replaces data-duration and recomputes data-end", () => {
     const html = '<video id="v1" src="a.mp4" data-start="2" data-duration="10" data-end="12">';
diff --git a/packages/core/src/compiler/timingCompiler.ts b/packages/core/src/compiler/timingCompiler.ts
index 5150ec8bdf0..94dfd4f85da 100644
--- a/packages/core/src/compiler/timingCompiler.ts
+++ b/packages/core/src/compiler/timingCompiler.ts
@@ -26,6 +26,7 @@ import {
   readMediaStart,
 } from "../runtime/playbackRate.js";
 import type { RateSpec } from "../speedRamp.js";
+import { MEDIA_RENDER_ID_ATTR } from "./mediaRenderIds.js";
 // ── Types ────────────────────────────────────────────────────────────────
 
 export interface UnresolvedElement {
@@ -337,6 +338,32 @@ export function extractResolvedMedia(html: string): ResolvedMediaElement[] {
   return resolved;
 }
 
+export type VideoSlotEnd = {
+  id: string;
+  end: number;
+  duration: number;
+};
+
+/**
+ * Stretch a compiled video's `data-end` / `data-duration` to an out-point
+ * past the source file (opacity hold). Leaves `data-start` / `data-media-start`.
+ */
+export function extendVideoSlotEnds(html: string, slots: readonly VideoSlotEnd[]): string {
+  if (slots.length === 0) return html;
+  const byId = new Map(slots.map((slot) => [slot.id, slot]));
+  return replaceOpeningTags(html, ["video"], (tag) => {
+    const id = getAttr(tag, MEDIA_RENDER_ID_ATTR) ?? getAttr(tag, "id");
+    if (!id) return tag;
+    const slot = byId.get(id);
+    if (!slot || !Number.isFinite(slot.end) || !(slot.duration > 0)) return tag;
+    return setAttr(
+      setAttr(tag, "data-end", String(slot.end)),
+      "data-duration",
+      String(slot.duration),
+    );
+  });
+}
+
 /**
  * Clamp existing data-duration and data-end on media elements.
  * For each resolution, replaces the declared duration with the clamped value
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 9fc953aa89a..f69de69c310 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -149,9 +149,11 @@ export {
   injectDurations,
   extractResolvedMedia,
   clampDurations,
+  extendVideoSlotEnds,
   shouldClampMediaDuration,
   shouldClampResolvedMediaDuration,
   MEDIA_DURATION_CLAMP_EPSILON_SECONDS,
+  type VideoSlotEnd,
 } from "./compiler/timingCompiler";
 
 export {
diff --git a/packages/producer/src/services/render/stages/probeStage.test.ts b/packages/producer/src/services/render/stages/probeStage.test.ts
index c47ae23d916..8b6c4d9a892 100644
--- a/packages/producer/src/services/render/stages/probeStage.test.ts
+++ b/packages/producer/src/services/render/stages/probeStage.test.ts
@@ -314,20 +314,6 @@ function makeProbeInput(overrides: {
   };
 }
 
-describe("stampDiscoveredVideoTiming", () => {
-  it("replaces a file-bounded data-duration so capture can hold past source EOF", async () => {
-    const { stampDiscoveredVideoTiming } = await import("./probeStage.js");
-    const html = stampDiscoveredVideoTiming(
-      `<video id="wrap" src="wrap.mp4" data-start="13" data-end="18.2" data-duration="5.2" data-hf-auto-start=""></video>`,
-      [{ id: "wrap", start: 17, end: 19, mediaStart: 4 }],
-    );
-    expect(html).toContain('data-start="13"');
-    expect(html).toContain('data-end="19"');
-    expect(html).toContain('data-duration="6"');
-    expect(html).not.toContain("data-media-start");
-  });
-});
-
 describe("hasScriptedAudioVolumeAutomation", () => {
   it("ignores non-script volume text", () => {
     expect(
diff --git a/packages/producer/src/services/render/stages/probeStage.ts b/packages/producer/src/services/render/stages/probeStage.ts
index 43b6101aed3..35a13d5d344 100644
--- a/packages/producer/src/services/render/stages/probeStage.ts
+++ b/packages/producer/src/services/render/stages/probeStage.ts
@@ -47,12 +47,14 @@ import {
 } from "@hyperframes/engine";
 import {
   MEDIA_RENDER_ID_ATTR,
+  extendVideoSlotEnds,
   fpsToNumber,
   normalizeRateSpec,
   readMediaStart,
   shiftRateLane,
   sourceTimeAt,
   timeAtSourceTime,
+  type VideoSlotEnd,
 } from "@hyperframes/core";
 import { extractMediaSrcMutations } from "@hyperframes/parsers";
 import type { BrowserMediaElement, CompiledComposition } from "../../htmlCompiler.js";
@@ -169,61 +171,11 @@ export function hasAutoStartVideos(html: string): boolean {
   return document.querySelector("video[data-hf-auto-start]") !== null;
 }
 
-type VideoTimingStamp = {
-  id: string;
-  start: number;
-  end: number;
-  mediaStart: number;
-};
-
-function videoTagAttr(tag: string, attr: string): string | null {
-  const match = tag.match(new RegExp(`\\s${attr}=["']([^"']*)["']`));
-  return match?.[1] ?? null;
-}
-
-function setVideoTagAttr(tag: string, attr: string, value: string): string {
-  if (new RegExp(`\\s${attr}(?:\\s|=|>|/)`).test(tag)) {
-    return tag.replace(new RegExp(`(${attr}=["'])[^"']*(["'])`), `$1${value}$2`);
-  }
-  return tag.replace(/>$/, ` ${attr}="${value}">`);
-}
-
-/**
- * Extend compiled `data-end` / `data-duration` to the opacity out-point.
- * Leave `data-start` / `data-media-start` alone — extract already has the
- * host clock. Rewriting start on an in-flow underlay blanks the scene.
- */
-export function stampDiscoveredVideoTiming(
-  html: string,
-  stamps: readonly VideoTimingStamp[],
-): string {
-  if (stamps.length === 0) return html;
-  const byId = new Map(stamps.map((stamp) => [stamp.id, stamp]));
-  return html.replace(/<video\b[^>]*>/gi, (tag) => {
-    const id = videoTagAttr(tag, MEDIA_RENDER_ID_ATTR) ?? videoTagAttr(tag, "id");
-    if (!id) return tag;
-    const stamp = byId.get(id);
-    if (!stamp || !Number.isFinite(stamp.end) || stamp.end <= stamp.start) return tag;
-    const authoredStart = Number.parseFloat(videoTagAttr(tag, "data-start") ?? "");
-    const slotStart = Number.isFinite(authoredStart) ? authoredStart : stamp.start;
-    const duration = stamp.end - slotStart;
-    if (!(duration > 0)) return tag;
-    return setVideoTagAttr(
-      setVideoTagAttr(tag, "data-end", String(stamp.end)),
-      "data-duration",
-      String(duration),
-    );
-  });
-}
-
-function stampDiscoveredVideoTimingOnCompiled(
-  compiled: CompiledComposition,
-  stamps: readonly VideoTimingStamp[],
-): void {
-  if (stamps.length === 0) return;
-  compiled.html = stampDiscoveredVideoTiming(compiled.html, stamps);
+function applyVideoSlotEnds(compiled: CompiledComposition, slots: readonly VideoSlotEnd[]): void {
+  if (slots.length === 0) return;
+  compiled.html = extendVideoSlotEnds(compiled.html, slots);
   for (const [path, html] of compiled.subCompositions) {
-    compiled.subCompositions.set(path, stampDiscoveredVideoTiming(html, stamps));
+    compiled.subCompositions.set(path, extendVideoSlotEnds(html, slots));
   }
 }
 
@@ -837,7 +789,7 @@ export async function runProbeStage(input: ProbeStageInput): Promise<ProbeStageR
         assertNotAborted();
 
         const hostClockIds = staticSrcVideoIds(compiled.html);
-        const timingStamps: VideoTimingStamp[] = [];
+        const slotEnds: VideoSlotEnd[] = [];
         for (const win of visibilityWindows) {
           const video = composition.videos.find((v) => v.id === win.videoId);
           if (!video) continue;
@@ -850,35 +802,29 @@ export async function runProbeStage(input: ProbeStageInput): Promise<ProbeStageR
             if (raised > 0 && video.mediaStart <= 0 && hostClockIds.has(video.id)) {
               video.mediaStart += raised;
             }
-            timingStamps.push({
-              id: video.id,
-              start: video.start,
-              end: video.end,
-              mediaStart: video.mediaStart,
-            });
+            const duration = video.end - prevStart;
+            if (duration > 0) {
+              slotEnds.push({ id: video.id, end: video.end, duration });
+            }
             log.info(
               `[Probe] Runtime video discovery: ${video.id} visible ${win.visibleStart.toFixed(2)}s to ${win.visibleEnd.toFixed(2)}s, placed ${video.start.toFixed(2)}s to ${video.end.toFixed(2)}s`,
             );
           }
         }
-        if (timingStamps.length > 0) {
-          stampDiscoveredVideoTimingOnCompiled(compiled, timingStamps);
+        if (slotEnds.length > 0) {
+          applyVideoSlotEnds(compiled, slotEnds);
           writeCompiledArtifacts(compiled, workDir, Boolean(job.config.debug));
-          await session.page.evaluate((rows: VideoTimingStamp[]) => {
+          await session.page.evaluate((rows: VideoSlotEnd[]) => {
             for (const row of rows) {
               const el = ((
                 window as unknown as { __hfMediaEl?: (id: string) => Element | null }
               ).__hfMediaEl?.(row.id) ??
                 document.getElementById(row.id)) as HTMLVideoElement | null;
               if (!el) continue;
-              const authoredStart = Number.parseFloat(el.getAttribute("data-start") ?? "");
-              const slotStart = Number.isFinite(authoredStart) ? authoredStart : row.start;
-              const duration = row.end - slotStart;
-              if (!(duration > 0)) continue;
               el.setAttribute("data-end", String(row.end));
-              el.setAttribute("data-duration", String(duration));
+              el.setAttribute("data-duration", String(row.duration));
             }
-          }, timingStamps);
+          }, slotEnds);
         }
       }
     }

From dc420a07354944440e96cdb156147df5dad6c12f Mon Sep 17 00:00:00 2001
From: Val <val@codejam.info>
Date: Sat, 24 Oct 2026 19:36:53 -0700
Subject: [PATCH 5/5] fix(producer): advance a sped-up clip's file clock by the
 source time it played

When opacity raises an auto-start clip's start, the encoder's in-point moved
by the timeline delta, as if the clip plays at 1x. Integrate the clip's rate
over that delta instead, and shift a rate lane to the new start.
---
 .../services/render/stages/probeStage.test.ts | 57 +++++++++++++++++++
 .../src/services/render/stages/probeStage.ts  |  5 +-
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/packages/producer/src/services/render/stages/probeStage.test.ts b/packages/producer/src/services/render/stages/probeStage.test.ts
index 8b6c4d9a892..25af34fb0c3 100644
--- a/packages/producer/src/services/render/stages/probeStage.test.ts
+++ b/packages/producer/src/services/render/stages/probeStage.test.ts
@@ -14,6 +14,7 @@ import { collectRenderMedia } from "../../renderMediaCollector.js";
 const workDir = mkdtempSync(join(tmpdir(), "hf-stage-test-"));
 afterAll(() => rmSync(workDir, { recursive: true, force: true }));
 import { createHash } from "node:crypto";
+import { shiftRateLane, sourceTimeAt } from "@hyperframes/core";
 import {
   hasAutoStartVideos,
   hasScriptedAudioVolumeAutomation,
@@ -981,6 +982,62 @@ describe("runProbeStage — forceScreenshot threading", () => {
     );
   });
 
+  it("shifts auto-start mediaStart by the source time a sped-up clip played", async () => {
+    resetRetryMocks();
+    visibilityWindows = [{ videoId: "clip", visibleStart: 3.5, visibleEnd: 6 }];
+    const { runProbeStage } = await import("./probeStage.js");
+    const input = makeProbeInput({});
+    input.composition.videos.push({
+      id: "clip",
+      src: "runtime.mp4",
+      start: 2,
+      end: 6,
+      mediaStart: 0,
+      playbackRate: 2,
+      loop: false,
+      hasAudio: false,
+    });
+    input.compiled.html = `<video id="clip" src="runtime.mp4" data-hf-auto-start=""></video>`;
+
+    await runProbeStage(input);
+
+    expect(input.composition.videos[0]).toEqual(
+      expect.objectContaining({ id: "clip", start: 3.5, end: 6, mediaStart: 3, playbackRate: 2 }),
+    );
+  });
+
+  it("shifts a rate lane to the raised start", async () => {
+    resetRetryMocks();
+    visibilityWindows = [{ videoId: "clip", visibleStart: 3, visibleEnd: 6 }];
+    const { runProbeStage } = await import("./probeStage.js");
+    const input = makeProbeInput({});
+    const lane = {
+      target: "rate",
+      points: [
+        { t: 0, v: 1 },
+        { t: 2, v: 3 },
+      ],
+    } satisfies RateSpec;
+    input.composition.videos.push({
+      id: "clip",
+      src: "runtime.mp4",
+      start: 2,
+      end: 6,
+      mediaStart: 0,
+      playbackRate: lane,
+      loop: false,
+      hasAudio: false,
+    });
+    input.compiled.html = `<video id="clip" src="runtime.mp4" data-hf-auto-start=""></video>`;
+
+    await runProbeStage(input);
+
+    const video = input.composition.videos[0]!;
+    expect(video.start).toBe(3);
+    expect(video.mediaStart).toBeCloseTo(sourceTimeAt(lane, 1), 9);
+    expect(video.playbackRate).toEqual(shiftRateLane(lane, 1));
+  });
+
   it("leaves mediaStart at 0 when visibility raises start on an empty-src video", async () => {
     resetRetryMocks();
     visibilityWindows = [{ videoId: "clip", visibleStart: 3.5, visibleEnd: 6 }];
diff --git a/packages/producer/src/services/render/stages/probeStage.ts b/packages/producer/src/services/render/stages/probeStage.ts
index 35a13d5d344..8db28033308 100644
--- a/packages/producer/src/services/render/stages/probeStage.ts
+++ b/packages/producer/src/services/render/stages/probeStage.ts
@@ -800,7 +800,10 @@ export async function runProbeStage(input: ProbeStageInput): Promise<ProbeStageR
             video.end = win.visibleEnd;
             const raised = video.start - prevStart;
             if (raised > 0 && video.mediaStart <= 0 && hostClockIds.has(video.id)) {
-              video.mediaStart += raised;
+              const rate = normalizeRateSpec(video.playbackRate);
+              video.mediaStart += sourceTimeAt(rate, raised);
+              if (video.playbackRate !== undefined)
+                video.playbackRate = shiftRateLane(rate, raised);
             }
             const duration = video.end - prevStart;
             if (duration > 0) {