From afafca4b9670cad60afd66475207ef6a016a759b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 18 Aug 2026 10:17:02 -0400
Subject: [PATCH] feat: make creator media edits render-safe (#3322)

* feat: make creator media edits render-safe

* fix: align media playback timing

* docs: add creator editing recipes

* docs: expand creator editing guidance

* fix: unify media source offsets

* fix: scale natural media duration

* fix: preserve natural media zero spans

* fix: align compiled natural media timing

* test: classify compiler media test as integration

* fix: drop inactive media windows

* fix: unify literal timing parsing

* fix: keep browser media parsing serializable

* fix: keep page timing readers strict

* fix: close remaining preview timing gaps

* fix(core): preserve Studio voice pitch at playback speed

* chore: keep creator contract source-neutral
---
 .../core/src/compiler/timingCompiler.test.ts  |  17 +
 packages/core/src/compiler/timingCompiler.ts  |  38 +-
 packages/core/src/index.ts                    |   8 +
 packages/core/src/runtime/audioFx.test.ts     |   6 +-
 packages/core/src/runtime/clipTree.test.ts    |  25 ++
 packages/core/src/runtime/clipTree.ts         |  11 +-
 packages/core/src/runtime/init.test.ts        |  24 ++
 packages/core/src/runtime/init.ts             | 109 ++---
 packages/core/src/runtime/media.test.ts       |  55 +++
 packages/core/src/runtime/media.ts            |  32 +-
 .../src/runtime/mediaVolumeEnvelope.test.ts   |  18 +
 .../core/src/runtime/mediaVolumeEnvelope.ts   |  11 +-
 .../core/src/runtime/playbackRate.test.ts     |  31 ++
 packages/core/src/runtime/playbackRate.ts     |  48 +++
 packages/core/src/runtime/startResolver.ts    |   6 +-
 packages/core/src/runtime/timeline.test.ts    |  40 ++
 packages/core/src/runtime/timeline.ts         |  31 +-
 .../src/runtime/webAudioTransport.test.ts     | 149 ++++++-
 .../core/src/runtime/webAudioTransport.ts     | 148 ++++++-
 .../engine/src/services/audioMixer.test.ts    | 228 +++++++++++
 packages/engine/src/services/audioMixer.ts    |  85 +++-
 .../engine/src/services/audioMixer.types.ts   |   2 +
 .../src/services/mediaTimelineWindow.test.ts  |  40 ++
 .../src/services/mediaTimelineWindow.ts       |  17 +
 .../src/services/videoFrameExtractor.test.ts  | 130 ++++++
 .../src/services/videoFrameExtractor.ts       | 168 +++++---
 .../producer/scripts/test-classification.mjs  |   1 +
 .../scripts/test-classification.test.mjs      |  11 +
 .../htmlCompiler.naturalDuration.test.ts      | 133 ++++++
 .../src/services/htmlCompiler.test.ts         | 109 ++++-
 .../producer/src/services/htmlCompiler.ts     | 159 +++++---
 .../playback-rate-av-parity.test.ts           | 234 +++++++++++
 scripts/creator-editing-capabilities.test.mjs | 377 ++++++++++++++++++
 skills-manifest.json                          |  14 +-
 skills/general-video/SKILL.md                 |   9 +
 skills/hyperframes-audio/SKILL.md             |  18 +
 skills/hyperframes-cli/SKILL.md               |  14 +
 skills/hyperframes-core/SKILL.md              |  39 +-
 .../references/creator-editing-recipes.md     | 341 ++++++++++++++++
 .../references/tracks-and-clips.md            |  12 +
 skills/hyperframes-keyframes/SKILL.md         |  39 +-
 skills/hyperframes/SKILL.md                   |  15 +
 42 files changed, 2695 insertions(+), 307 deletions(-)
 create mode 100644 packages/core/src/runtime/playbackRate.test.ts
 create mode 100644 packages/engine/src/services/mediaTimelineWindow.test.ts
 create mode 100644 packages/engine/src/services/mediaTimelineWindow.ts
 create mode 100644 packages/producer/src/services/htmlCompiler.naturalDuration.test.ts
 create mode 100644 packages/producer/tests/playback-rate-av-parity/playback-rate-av-parity.test.ts
 create mode 100644 scripts/creator-editing-capabilities.test.mjs
 create mode 100644 skills/hyperframes-core/references/creator-editing-recipes.md

diff --git a/packages/core/src/compiler/timingCompiler.test.ts b/packages/core/src/compiler/timingCompiler.test.ts
index a3f411f8e..6ddbfe709 100644
--- a/packages/core/src/compiler/timingCompiler.test.ts
+++ b/packages/core/src/compiler/timingCompiler.test.ts
@@ -19,6 +19,23 @@ it("source contains no raw NUL bytes", () => {
 });
 
 describe("compileTimingAttrs", () => {
+  it.each(["", "   ", "0s", "0abc", "0px", "-1s", "Infinity", "NaN"])(
+    "does not partially parse invalid literal data-duration=%j",
+    (duration) => {
+      const html = `<video id="v1" src="a.mp4" data-start="2" data-duration="${duration}">`;
+      const { html: compiled } = compileTimingAttrs(html);
+
+      expect(compiled).not.toContain("data-end=");
+    },
+  );
+
+  it("uses Number semantics for hexadecimal literal timing", () => {
+    const { html: compiled } = compileTimingAttrs(
+      '<video id="v1" src="a.mp4" data-start="2" data-duration="0x10">',
+    );
+    expect(compiled).toContain('data-end="18"');
+  });
+
   it("adds data-end when data-start and data-duration are present on a video", () => {
     const html = '<video id="v1" src="a.mp4" data-start="2" data-duration="5">';
     const { html: compiled, unresolved } = compileTimingAttrs(html);
diff --git a/packages/core/src/compiler/timingCompiler.ts b/packages/core/src/compiler/timingCompiler.ts
index 715634adc..6d843439b 100644
--- a/packages/core/src/compiler/timingCompiler.ts
+++ b/packages/core/src/compiler/timingCompiler.ts
@@ -15,6 +15,12 @@
  * and call injectDurations() to complete the compilation.
  */
 
+import {
+  parseStrictFiniteTimingNumber,
+  readElementPlaybackRate,
+  readMediaStart,
+} from "../runtime/playbackRate.js";
+
 // ── Types ────────────────────────────────────────────────────────────────
 
 export interface UnresolvedElement {
@@ -25,6 +31,7 @@ export interface UnresolvedElement {
   end?: number;
   duration?: number;
   mediaStart: number;
+  playbackRate: number;
   compositionSrc?: string;
 }
 
@@ -40,6 +47,7 @@ export interface ResolvedMediaElement {
   start: number;
   duration: number;
   mediaStart: number;
+  playbackRate: number;
   loop: boolean;
 }
 
@@ -92,6 +100,11 @@ function injectAttr(tag: string, attr: string, value: string): string {
   return tag.replace(/>$/, ` ${attr}="${value}">`);
 }
 
+function setAttr(tag: string, attr: string, value: string): string {
+  if (!hasAttr(tag, attr)) return injectAttr(tag, attr, value);
+  return tag.replace(new RegExp(`(${attr}=["'])[^"']*(["'])`), `$1${value}$2`);
+}
+
 // Real media/timing elements never live inside comments, <script>, or <style>.
 // The tag regexes below aren't comment-aware, so a comment that merely mentions
 // `<video>`/`<audio>` gets rewritten as if it were a real element (issue #1938).
@@ -137,14 +150,16 @@ function compileTag(
     startStr = "0";
   }
   const start = parseFloat(startStr);
-  const mediaStartStr = getAttr(result, "data-media-start");
-  const mediaStart = mediaStartStr ? parseFloat(mediaStartStr) : 0;
+  const attrReader = { getAttribute: (name: string) => getAttr(result, name) };
+  const mediaStart = readMediaStart(attrReader);
+  const playbackRate = readElementPlaybackRate(attrReader);
 
   // 1. Compute data-end from data-start + data-duration
   if (!hasAttr(result, "data-end")) {
     const durationStr = getAttr(result, "data-duration");
-    if (durationStr !== null) {
-      const end = start + parseFloat(durationStr);
+    const duration = parseStrictFiniteTimingNumber(durationStr);
+    if (duration != null) {
+      const end = start + duration;
       result = injectAttr(result, "data-end", String(end));
     } else if (id) {
       // No data-duration: mark as unresolved so caller can provide it
@@ -154,6 +169,7 @@ function compileTag(
         src: getAttr(result, "src") ?? undefined,
         start,
         mediaStart,
+        playbackRate,
       };
     }
   }
@@ -215,6 +231,7 @@ export function compileTimingAttrs(html: string): CompilationResult {
         tagName: "div",
         start: startStr ? parseFloat(startStr) : 0,
         mediaStart: 0,
+        playbackRate: 1,
         compositionSrc: compositionSrc ?? undefined,
       });
     }
@@ -241,8 +258,8 @@ export function injectDurations(html: string, resolutions: ResolvedDuration[]):
       let result = tag;
 
       // Add data-duration if missing
-      if (!hasAttr(result, "data-duration")) {
-        result = injectAttr(result, "data-duration", String(duration));
+      if (parseStrictFiniteTimingNumber(getAttr(result, "data-duration")) == null) {
+        result = setAttr(result, "data-duration", String(duration));
       }
 
       // Add data-end if missing
@@ -279,12 +296,12 @@ export function extractResolvedMedia(html: string): ResolvedMediaElement[] {
     const durationStr = getAttr(tag, "data-duration");
     if (!id || durationStr === null) continue;
 
-    const duration = parseFloat(durationStr);
-    if (!Number.isFinite(duration) || duration <= 0) continue;
+    const duration = parseStrictFiniteTimingNumber(durationStr);
+    if (duration == null || duration <= 0) continue;
 
     const isVideo = /^<video/i.test(tag);
     const startStr = getAttr(tag, "data-start");
-    const mediaStartStr = getAttr(tag, "data-media-start");
+    const attrReader = { getAttribute: (name: string) => getAttr(tag, name) };
 
     resolved.push({
       id,
@@ -292,7 +309,8 @@ export function extractResolvedMedia(html: string): ResolvedMediaElement[] {
       src: getAttr(tag, "src") ?? undefined,
       start: startStr !== null ? parseFloat(startStr) : 0,
       duration,
-      mediaStart: mediaStartStr ? parseFloat(mediaStartStr) : 0,
+      mediaStart: readMediaStart(attrReader),
+      playbackRate: readElementPlaybackRate(attrReader),
       loop: hasAttr(tag, "loop"),
     });
   }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 108b87bb8..f06483f87 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -298,6 +298,14 @@ export {
 // publishConfig entry points at a file the pack doesn't contain
 // (verify:packed-manifests catches exactly that).
 export { createRuntimeStartTimeResolver } from "./runtime/startResolver.js";
+export {
+  normalizePlaybackRate,
+  parseStrictFiniteTimingNumber,
+  readElementPlaybackRate,
+  readMediaStart,
+  resolveNaturalMediaTimelineDuration,
+  resolveNaturalMediaTimelineDurationFromValues,
+} from "./runtime/playbackRate.js";
 
 // Variable validation (CLI / tooling-side)
 export {
diff --git a/packages/core/src/runtime/audioFx.test.ts b/packages/core/src/runtime/audioFx.test.ts
index 35db1e291..ef8babcb6 100644
--- a/packages/core/src/runtime/audioFx.test.ts
+++ b/packages/core/src/runtime/audioFx.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { attachElementFxChain } from "./audioFx.js";
-import { defaultAudioFxParams, HF_AUDIO_FX } from "../audioFx.js";
+import { defaultAudioFxParams, HF_AUDIO_FX, HF_AUDIO_FX_ATTR } from "../audioFx.js";
 
 /**
  * The DSP is proven in a real browser by the engine's render tests. What needs
@@ -107,7 +107,9 @@ describe("attachElementFxChain", () => {
     const dst = new Node();
     const handle = attachElementFxChain(
       ctx(),
-      { getAttribute: () => "{not json" },
+      {
+        getAttribute: (name: string) => (name === HF_AUDIO_FX_ATTR ? "{not json" : null),
+      },
       src as never,
       dst as never,
     );
diff --git a/packages/core/src/runtime/clipTree.test.ts b/packages/core/src/runtime/clipTree.test.ts
index 4a8431a69..27b0f3444 100644
--- a/packages/core/src/runtime/clipTree.test.ts
+++ b/packages/core/src/runtime/clipTree.test.ts
@@ -27,6 +27,17 @@ describe("createClipTree", () => {
     rootDuration: 10,
   };
 
+  it.each(["", "   ", "0s", "0abc", "0px", "-1s", "Infinity", "NaN"])(
+    "keeps a clip with invalid literal data-duration=%j on the fallback window",
+    (duration) => {
+      document.body.innerHTML = `
+        <div data-composition-id="root" data-duration="10" data-start="0" id="root">
+          <div data-start="0" data-duration="${duration}" id="clip"></div>
+        </div>`;
+      expect(createClipTree(params).roots.map((node) => node.id)).toContain("clip");
+    },
+  );
+
   // Regression: id-less children (root index.html uses data-hf-id, not id) must
   // get their data-hf-id as the node id — not a synthetic `__clip-N` — so the
   // tree aligns with __clipManifest (which also keys on data-hf-id) and inline
@@ -47,4 +58,18 @@ describe("createClipTree", () => {
     expect(child!.id).not.toMatch(/^__clip-/);
     expect(child!.parentId).toBe("scene");
   });
+
+  it.each([10, 11])(
+    "does not replace a known zero media span with root duration (start=%s)",
+    (start) => {
+      document.body.innerHTML = `
+      <div data-composition-id="root" data-duration="100" data-start="0" id="root">
+        <video id="at-eof" data-start="0" data-media-start="${start}"></video>
+      </div>`;
+      const video = document.querySelector("video")!;
+      Object.defineProperty(video, "duration", { value: 10, configurable: true });
+
+      expect(createClipTree({ ...params, rootDuration: 100 }).roots).toEqual([]);
+    },
+  );
 });
diff --git a/packages/core/src/runtime/clipTree.ts b/packages/core/src/runtime/clipTree.ts
index 5224617df..19bb0755d 100644
--- a/packages/core/src/runtime/clipTree.ts
+++ b/packages/core/src/runtime/clipTree.ts
@@ -11,6 +11,7 @@
  */
 
 import type { RuntimeTimelineLike } from "./types";
+import { parseStrictFiniteTimingNumber, resolveNaturalMediaTimelineDuration } from "./playbackRate";
 
 export interface ClipNode {
   readonly id: string;
@@ -51,9 +52,7 @@ interface StartResolverLike {
 }
 
 function parseNum(value: string | null): number | null {
-  if (value == null) return null;
-  const n = Number(value);
-  return Number.isFinite(n) ? n : null;
+  return parseStrictFiniteTimingNumber(value);
 }
 
 function durationFromTimeline(
@@ -68,11 +67,7 @@ function durationFromTimeline(
 
 function durationFromMedia(el: Element): number | null {
   if (!(el instanceof HTMLMediaElement) || !Number.isFinite(el.duration)) return null;
-  const mediaStart =
-    parseNum(el.getAttribute("data-playback-start")) ??
-    parseNum(el.getAttribute("data-media-start")) ??
-    0;
-  return el.duration > mediaStart ? el.duration - mediaStart : null;
+  return resolveNaturalMediaTimelineDuration(el, el.duration);
 }
 
 // Used only to filter out zero-duration (decorative) elements at build time.
diff --git a/packages/core/src/runtime/init.test.ts b/packages/core/src/runtime/init.test.ts
index cc59b7604..9bc37d6ac 100644
--- a/packages/core/src/runtime/init.test.ts
+++ b/packages/core/src/runtime/init.test.ts
@@ -110,6 +110,30 @@ describe("initSandboxRuntimeModular", () => {
     window.cancelAnimationFrame = (() => {}) as typeof window.cancelAnimationFrame;
   });
 
+  it.each([
+    ["2x", 5],
+    ["0x2", 10],
+  ])("derives a native-parsed natural media window for rate %s", (rate, expected) => {
+    document.body.innerHTML = `<div data-composition-id="main" data-root="true"><video data-start="0" data-playback-rate="${rate}"></video></div>`;
+    const video = document.querySelector("video")!;
+    Object.defineProperty(video, "duration", { value: 10, configurable: true });
+    window.__timelines = {};
+    initSandboxRuntimeModular();
+    expect(window.__player?.getDuration()).toBe(expected);
+  });
+
+  it.each([10, 11])(
+    "preserves a known zero natural media window at source EOF (start=%s)",
+    (start) => {
+      document.body.innerHTML = `<div data-composition-id="main" data-root="true"><video data-start="0" data-media-start="${start}"></video></div>`;
+      const video = document.querySelector("video")!;
+      Object.defineProperty(video, "duration", { value: 10, configurable: true });
+      window.__timelines = {};
+      initSandboxRuntimeModular();
+      expect(window.__player?.getDuration()).toBe(0);
+    },
+  );
+
   afterEach(() => {
     window.__hfRuntimeTeardown?.();
     document.body.innerHTML = "";
diff --git a/packages/core/src/runtime/init.ts b/packages/core/src/runtime/init.ts
index cd8bd8b2e..f6c2b6854 100644
--- a/packages/core/src/runtime/init.ts
+++ b/packages/core/src/runtime/init.ts
@@ -24,6 +24,7 @@ import {
   readElementPlaybackStart,
   refreshRuntimeMediaCache,
   resolveRuntimeMediaClipDuration,
+  resolveNaturalMediaTimelineDuration,
   syncRuntimeMedia,
 } from "./media";
 import { handleErrorForProxy, handleMetadataForProxy, maybeProxyProactively } from "./mediaProxy";
@@ -54,6 +55,7 @@ import { swallow } from "./diagnostics";
 import { shouldAttemptPeriodicTimelineBind } from "./timelineRebindPolicy";
 import { installStudioCustomEase } from "./customEase";
 import { parseNumeric } from "./startExpression";
+import { parseStrictFiniteTimingNumber } from "./playbackRate";
 
 const AUTHORED_DURATION_ATTR = "data-hf-authored-duration";
 const AUTHORED_END_ATTR = "data-hf-authored-end";
@@ -634,7 +636,7 @@ export function initSandboxRuntimeModular(): void {
     // Preserve the global value when its authored window already intersects
     // the host's absolute window. Otherwise it is unambiguously local and
     // must inherit the recursively-resolved host start.
-    const authoredDuration = parseNumeric(element.getAttribute("data-duration"));
+    const authoredDuration = parseStrictFiniteTimingNumber(element.getAttribute("data-duration"));
     const hostDuration = context.inheritedDuration;
     const hostEnd = hostDuration != null && hostDuration > 0 ? inheritedStart + hostDuration : null;
     const authoredEnd =
@@ -743,16 +745,12 @@ export function initSandboxRuntimeModular(): void {
   };
 
   const resolveMediaElementDurationSeconds = (node: HTMLMediaElement): number | null => {
-    const declaredDuration = Number(node.getAttribute("data-duration"));
-    if (Number.isFinite(declaredDuration) && declaredDuration > 0) {
+    const declaredDuration = parseStrictFiniteTimingNumber(node.getAttribute("data-duration"));
+    if (declaredDuration != null && declaredDuration > 0) {
       return declaredDuration;
     }
-    const playbackStart = Number(
-      node.getAttribute("data-playback-start") ?? node.getAttribute("data-media-start") ?? "0",
-    );
-    const safePlaybackStart = Number.isFinite(playbackStart) ? Math.max(0, playbackStart) : 0;
-    if (Number.isFinite(node.duration) && node.duration > safePlaybackStart) {
-      return Math.max(0, node.duration - safePlaybackStart);
+    if (Number.isFinite(node.duration)) {
+      return resolveNaturalMediaTimelineDuration(node, node.duration);
     }
     return null;
   };
@@ -787,8 +785,8 @@ export function initSandboxRuntimeModular(): void {
     // even slightly short of the declared duration shrinks the playable
     // window — and duration-gated consumers (e.g. the studio's adapter
     // selection) silently reject the runtime player, losing audio playback.
-    const rootDeclaredSeconds = Number.parseFloat(rootEl.getAttribute("data-duration") ?? "");
-    if (Number.isFinite(rootDeclaredSeconds) && rootDeclaredSeconds > 0) {
+    const rootDeclaredSeconds = parseStrictFiniteTimingNumber(rootEl.getAttribute("data-duration"));
+    if (rootDeclaredSeconds != null && rootDeclaredSeconds > 0) {
       maxWindowEndSeconds = rootDeclaredSeconds;
     }
     const compositionNodes = Array.from(
@@ -1181,8 +1179,9 @@ export function initSandboxRuntimeModular(): void {
       // GSAP timeline, extend the timeline in-place with a zero-duration no-op
       // tween. Studio previews can inline only part of the timeline registry
       // while preserving the full host schedule in data-hf-authored-duration.
-      const rootDeclaredDurAttr = rootCompositionNode?.getAttribute("data-duration");
-      const rootDeclaredDur = rootDeclaredDurAttr ? parseFloat(rootDeclaredDurAttr) : null;
+      const rootDeclaredDur = parseStrictFiniteTimingNumber(
+        rootCompositionNode?.getAttribute("data-duration"),
+      );
       const rootDurationFloorSeconds = Math.max(
         isUsableTimelineDuration(rootDeclaredDur) ? rootDeclaredDur : 0,
         authoredCompositionDurationFloorSeconds ?? 0,
@@ -1989,27 +1988,22 @@ export function initSandboxRuntimeModular(): void {
       resolveDurationSeconds: (element) => {
         const context = resolveMediaCompositionContext(element);
         const start = resolveAbsoluteMediaStartSeconds(element);
-        const mediaStart =
-          Number.parseFloat(element.dataset.playbackStart ?? element.dataset.mediaStart ?? "0") ||
-          0;
         const hostRemaining =
           context.inheritedStart != null &&
           context.inheritedDuration != null &&
           context.inheritedDuration > 0
             ? Math.max(0, context.inheritedStart + context.inheritedDuration - start)
             : null;
-        const sourceDuration =
-          Number.isFinite(element.duration) && element.duration > mediaStart
-            ? Math.max(0, element.duration - mediaStart)
-            : null;
+        const sourceDuration = Number.isFinite(element.duration)
+          ? resolveNaturalMediaTimelineDuration(element, element.duration)
+          : null;
         // The element's own data-duration is an explicit clip-length trim
         // (the studio writes it when you drag the clip edge). It must bound
         // playback so a trimmed track stops at its edge instead of running on
         // to the source-file or host-composition end. Absent → no cap (an
         // untrimmed clip plays its natural source length).
-        const ownDuration = Number.parseFloat(element.dataset.duration ?? "");
-        const explicitDuration =
-          Number.isFinite(ownDuration) && ownDuration > 0 ? ownDuration : null;
+        const ownDuration = parseStrictFiniteTimingNumber(element.dataset.duration);
+        const explicitDuration = ownDuration != null && ownDuration > 0 ? ownDuration : null;
         return resolveRuntimeMediaClipDuration({
           isVideo: element.tagName === "VIDEO",
           sourceDuration,
@@ -2033,9 +2027,7 @@ export function initSandboxRuntimeModular(): void {
         timeSeconds: state.currentTime,
         playing: state.isPlaying,
         playbackRate: state.playbackRate,
-        outputMuted:
-          state.mediaOutputMuted ||
-          (!state.webAudioMediaDisabled && !state.nativeMediaSyncDisabled && webAudio.isActive()),
+        outputMuted: state.mediaOutputMuted,
         userMuted: state.bridgeMuted,
         userVolume: state.bridgeVolume,
         forceSync,
@@ -2133,15 +2125,15 @@ export function initSandboxRuntimeModular(): void {
     scheduleRootStageLayoutDiagnostics();
   };
 
-  const finitePositiveDuration = (value: number): number =>
-    Number.isFinite(value) && value > 0 ? value : 0;
+  const finitePositiveDuration = (value: number | null | undefined): number =>
+    typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
 
   const growRootDurationLive = (durationSeconds: number) => {
     const nextDuration = finitePositiveDuration(Number(durationSeconds));
     if (nextDuration <= 0) return;
     const rootEl = resolveRootCompositionElement();
     const rootAttrDuration = finitePositiveDuration(
-      Number.parseFloat(rootEl?.getAttribute("data-duration") ?? ""),
+      parseStrictFiniteTimingNumber(rootEl?.getAttribute("data-duration")),
     );
     const currentDuration = Math.max(
       liveRootDurationOverrideSeconds,
@@ -2922,11 +2914,9 @@ export function initSandboxRuntimeModular(): void {
           for (const rawEl of audioEls) {
             if (!(rawEl instanceof HTMLMediaElement) || !rawEl.isConnected) continue;
             const start = Number.parseFloat(rawEl.dataset.start ?? "");
-            const durAttr = Number.parseFloat(rawEl.dataset.duration ?? "");
-            const end = Number.isFinite(durAttr) && durAttr > 0 ? start + durAttr : Infinity;
-            const mediaStart =
-              Number.parseFloat(rawEl.dataset.playbackStart ?? rawEl.dataset.mediaStart ?? "0") ||
-              0;
+            const durAttr = parseStrictFiniteTimingNumber(rawEl.dataset.duration);
+            const end = durAttr != null && durAttr > 0 ? start + durAttr : Infinity;
+            const mediaStart = readElementPlaybackStart(rawEl);
             if (Number.isFinite(start) && state.currentTime >= start && state.currentTime < end) {
               if (!rawEl.paused) {
                 clock.attachAudioSource({ el: rawEl, compositionStart: start, mediaStart });
@@ -3003,11 +2993,10 @@ export function initSandboxRuntimeModular(): void {
       if (!el.isConnected) continue;
       const start = Number.parseFloat(el.dataset.start ?? "");
       if (!Number.isFinite(start)) continue;
-      const durAttr = Number.parseFloat(el.dataset.duration ?? "");
-      const end = Number.isFinite(durAttr) && durAttr > 0 ? start + durAttr : Infinity;
+      const durAttr = parseStrictFiniteTimingNumber(el.dataset.duration);
+      const end = durAttr != null && durAttr > 0 ? start + durAttr : Infinity;
       if (timeSeconds < start || timeSeconds >= end) continue;
-      const mediaStart =
-        Number.parseFloat(el.dataset.playbackStart ?? el.dataset.mediaStart ?? "0") || 0;
+      const mediaStart = readElementPlaybackStart(el);
       const relTime = timeSeconds - start + mediaStart;
       if (relTime >= 0) {
         try {
@@ -3033,13 +3022,12 @@ export function initSandboxRuntimeModular(): void {
       if (!(rawEl instanceof HTMLMediaElement) || !rawEl.isConnected) continue;
       const compStart = Number.parseFloat(rawEl.dataset.start ?? "");
       if (!Number.isFinite(compStart)) continue;
-      const mediaStart =
-        Number.parseFloat(rawEl.dataset.playbackStart ?? rawEl.dataset.mediaStart ?? "0") || 0;
+      const mediaStart = readElementPlaybackStart(rawEl);
       const volumeAttr = Number.parseFloat(rawEl.dataset.volume ?? "");
       const vol = Number.isFinite(volumeAttr) ? volumeAttr : 1;
-      const durationAttr = Number.parseFloat(rawEl.dataset.duration ?? "");
+      const durationAttr = parseStrictFiniteTimingNumber(rawEl.dataset.duration);
       let clipDuration =
-        Number.isFinite(durationAttr) && durationAttr > 0 ? durationAttr : Number.POSITIVE_INFINITY;
+        durationAttr != null && durationAttr > 0 ? durationAttr : Number.POSITIVE_INFINITY;
       const compositionRoot = rawEl.closest("[data-composition-id]");
       if (compositionRoot) {
         const inheritedStart = resolveStartForElement(compositionRoot, 0);
@@ -3053,20 +3041,43 @@ export function initSandboxRuntimeModular(): void {
           );
         }
       }
-      void webAudio.decodeAudioElement(rawEl).then((buffer) => {
-        if (!buffer || !clock.isPlaying()) return;
-        void webAudio.schedulePlayback(
+      void webAudio
+        .scheduleMediaElementPlayback(
           rawEl,
-          buffer,
           compStart,
           mediaStart,
           clock.now(),
           vol * state.bridgeVolume,
           gen,
           state.playbackRate,
-          clipDuration,
-        );
-      });
+        )
+        .then((scheduled) => {
+          if (scheduled || !clock.isPlaying()) return;
+          const effectiveRate = state.playbackRate * readElementPlaybackRate(rawEl);
+          const hasProcessing =
+            rawEl.hasAttribute("data-fx-chain") || rawEl.hasAttribute("data-automation");
+          // A decoded AudioBufferSourceNode changes pitch whenever its playback
+          // rate is non-unit. Bare tracks may safely stay on native output; a
+          // processed track must fail closed rather than silently lose its graph.
+          if (Math.abs(effectiveRate - 1) > 1e-9) {
+            if (hasProcessing) rawEl.muted = true;
+            return;
+          }
+          void webAudio.decodeAudioElement(rawEl).then((buffer) => {
+            if (!buffer || !clock.isPlaying()) return;
+            void webAudio.schedulePlayback(
+              rawEl,
+              buffer,
+              compStart,
+              mediaStart,
+              clock.now(),
+              vol * state.bridgeVolume,
+              gen,
+              state.playbackRate,
+              clipDuration,
+            );
+          });
+        });
     }
   };
 
diff --git a/packages/core/src/runtime/media.test.ts b/packages/core/src/runtime/media.test.ts
index bf697161b..ca6f66e11 100644
--- a/packages/core/src/runtime/media.test.ts
+++ b/packages/core/src/runtime/media.test.ts
@@ -1,11 +1,13 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
 import {
   readElementPlaybackRate,
+  readElementPlaybackStart,
   refreshRuntimeMediaCache,
   resolveRuntimeMediaClipDuration,
   syncRuntimeMedia,
 } from "./media";
 import type { RuntimeMediaClip } from "./media";
+import { resolveNaturalMediaTimelineDuration } from "./playbackRate";
 
 function createVideo(attrs: Record<string, string>): HTMLVideoElement {
   const el = document.createElement("video");
@@ -59,6 +61,23 @@ describe("readElementPlaybackRate", () => {
   });
 });
 
+describe("readElementPlaybackStart fallback", () => {
+  it.each([
+    ["", "1.5", 1.5],
+    ["   ", "1.5", 1.5],
+    ["later", "1.5", 1.5],
+    ["-1", "1.5", 1.5],
+    [null, "-1", 0],
+    ["0", "1.5", 0],
+    ["2.25", "1.5", 2.25],
+  ])("uses non-negative finite playback-start -> media-start -> 0", (playback, media, expected) => {
+    const el = document.createElement("audio");
+    if (playback !== null) el.setAttribute("data-playback-start", playback);
+    el.setAttribute("data-media-start", media);
+    expect(readElementPlaybackStart(el)).toBe(expected);
+  });
+});
+
 describe("refreshRuntimeMediaCache", () => {
   afterEach(() => {
     document.body.innerHTML = "";
@@ -187,6 +206,31 @@ describe("refreshRuntimeMediaCache", () => {
     expect(result.mediaClips[0].end).toBe(10);
   });
 
+  it.each([10, 11])(
+    "preserves an authoritative zero duration at or past EOF (start=%s)",
+    (mediaStart) => {
+      const el = createVideo({ "data-start": "3", "data-media-start": String(mediaStart) });
+      Object.defineProperty(el, "duration", { value: 10, writable: true });
+      const result = refreshRuntimeMediaCache({
+        resolveDurationSeconds: (element) =>
+          resolveNaturalMediaTimelineDuration(element, element.duration),
+      });
+
+      expect(result.mediaClips[0].duration).toBe(0);
+      expect(result.mediaClips[0].end).toBe(3);
+      expect(result.maxMediaEnd).toBe(3);
+    },
+  );
+
+  it("distinguishes an authoritative zero duration from an unknown duration", () => {
+    createVideo({ "data-start": "3" });
+    const knownZero = refreshRuntimeMediaCache({ resolveDurationSeconds: () => 0 });
+    const unknown = refreshRuntimeMediaCache({ resolveDurationSeconds: () => null });
+
+    expect(knownZero.mediaClips[0]).toMatchObject({ duration: 0, end: 3 });
+    expect(unknown.mediaClips[0]).toMatchObject({ duration: Infinity, end: Infinity });
+  });
+
   it("reads native loop attribute", () => {
     createVideo({ "data-start": "0", "data-duration": "15", loop: "" });
     const result = refreshRuntimeMediaCache();
@@ -257,6 +301,17 @@ describe("resolveRuntimeMediaClipDuration", () => {
       }),
     ).toBe(1);
   });
+
+  it("preserves a known zero natural span instead of falling back to the host window", () => {
+    expect(
+      resolveRuntimeMediaClipDuration({
+        isVideo: true,
+        sourceDuration: 0,
+        hostRemaining: 8,
+        explicitDuration: null,
+      }),
+    ).toBe(0);
+  });
 });
 
 describe("syncRuntimeMedia", () => {
diff --git a/packages/core/src/runtime/media.ts b/packages/core/src/runtime/media.ts
index 40ae5ec17..2af60db04 100644
--- a/packages/core/src/runtime/media.ts
+++ b/packages/core/src/runtime/media.ts
@@ -1,24 +1,11 @@
 import { swallow } from "./diagnostics";
 import { interpolateVolumeGain, type VolumeKeyframe } from "./mediaVolumeEnvelope.js";
 import { elementVolumeLaneGain } from "./audioAutomationVolume.js";
-import { normalizePlaybackRate } from "./playbackRate.js";
-
-export function readElementPlaybackRate(el: Element): number {
-  const authored = Number.parseFloat(el.getAttribute("data-playback-rate") ?? "");
-  const raw =
-    Number.isFinite(authored) && authored > 0
-      ? authored
-      : el instanceof HTMLMediaElement
-        ? el.defaultPlaybackRate
-        : 1;
-  return normalizePlaybackRate(raw);
-}
+import { readElementPlaybackRate, readMediaStart } from "./playbackRate.js";
+export { readElementPlaybackRate, resolveNaturalMediaTimelineDuration } from "./playbackRate.js";
 
 export function readElementPlaybackStart(el: Element): number {
-  const raw = Number.parseFloat(
-    el.getAttribute("data-playback-start") ?? el.getAttribute("data-media-start") ?? "",
-  );
-  return Number.isFinite(raw) && raw >= 0 ? raw : 0;
+  return readMediaStart(el);
 }
 
 /**
@@ -41,7 +28,7 @@ export function resolveRuntimeMediaClipDuration(params: {
     params.isVideo
       ? [mediaDuration, params.hostRemaining]
       : [mediaDuration, params.hostRemaining, params.explicitDuration]
-  ).filter((value): value is number => value != null && Number.isFinite(value) && value > 0);
+  ).filter((value): value is number => value != null && Number.isFinite(value) && value >= 0);
   return candidates.length > 0 ? Math.min(...candidates) : null;
 }
 
@@ -89,26 +76,25 @@ export function refreshRuntimeMediaCache(params?: {
       ? params.resolveStartSeconds(el)
       : Number.parseFloat(el.dataset.start ?? "0");
     if (!Number.isFinite(start)) continue;
-    const mediaStart =
-      Number.parseFloat(el.dataset.playbackStart ?? el.dataset.mediaStart ?? "0") || 0;
+    const mediaStart = readElementPlaybackStart(el);
     const playbackRate = readElementPlaybackRate(el);
     const loop = el.loop;
     const sourceDuration = Number.isFinite(el.duration) && el.duration > 0 ? el.duration : null;
     let duration =
       params?.resolveDurationSeconds?.(el) ?? Number.parseFloat(el.dataset.duration ?? "");
-    if ((!Number.isFinite(duration) || duration <= 0) && sourceDuration != null) {
+    if ((!Number.isFinite(duration) || duration < 0) && sourceDuration != null) {
       // Effective duration accounts for playback rate:
       // at 0.5x, a 10s source plays for 20s on the timeline
       duration = Math.max(0, (sourceDuration - mediaStart) / playbackRate);
     }
-    const end =
-      Number.isFinite(duration) && duration > 0 ? start + duration : Number.POSITIVE_INFINITY;
+    const hasKnownDuration = Number.isFinite(duration) && duration >= 0;
+    const end = hasKnownDuration ? start + duration : Number.POSITIVE_INFINITY;
     const volumeRaw = Number.parseFloat(el.dataset.volume ?? "");
     const clip: RuntimeMediaClip = {
       el,
       start,
       mediaStart,
-      duration: Number.isFinite(duration) && duration > 0 ? duration : Number.POSITIVE_INFINITY,
+      duration: hasKnownDuration ? duration : Number.POSITIVE_INFINITY,
       end,
       volume: Number.isFinite(volumeRaw) ? volumeRaw : null,
       playbackRate,
diff --git a/packages/core/src/runtime/mediaVolumeEnvelope.test.ts b/packages/core/src/runtime/mediaVolumeEnvelope.test.ts
index 0132ca8eb..a04223801 100644
--- a/packages/core/src/runtime/mediaVolumeEnvelope.test.ts
+++ b/packages/core/src/runtime/mediaVolumeEnvelope.test.ts
@@ -7,6 +7,24 @@ import {
 } from "./mediaVolumeEnvelope";
 
 describe("probeElementVolumeKeyframes", () => {
+  it("treats trailing-garbage duration as unknown instead of truncating preview sampling", () => {
+    const audio = document.createElement("audio");
+    audio.dataset.start = "0";
+    audio.dataset.duration = "5s";
+    audio.dataset.volume = "0";
+
+    const keyframes = probeElementVolumeKeyframes(
+      audio,
+      (time) => {
+        audio.volume = time < 7 ? 0 : 1;
+      },
+      10,
+      1,
+    );
+
+    expect(keyframes).toContainEqual({ time: 7, volume: 1 });
+  });
+
   it("retains the last plateau sample before a short volume change", () => {
     const audio = document.createElement("audio");
     audio.dataset.start = "0";
diff --git a/packages/core/src/runtime/mediaVolumeEnvelope.ts b/packages/core/src/runtime/mediaVolumeEnvelope.ts
index b12349ed4..08e3a6e94 100644
--- a/packages/core/src/runtime/mediaVolumeEnvelope.ts
+++ b/packages/core/src/runtime/mediaVolumeEnvelope.ts
@@ -1,4 +1,5 @@
 import type { RuntimeTimelineLike } from "./types";
+import { parseStrictFiniteTimingNumber } from "./playbackRate";
 
 /**
  * Shared volume-automation utilities used by both the renderer (offline PCM
@@ -95,7 +96,7 @@ function recordVolumeSample(
   }
 }
 
-function parseFiniteDatasetNumber(value: string | undefined): number | undefined {
+function parseVolumeNumber(value: string | undefined): number | undefined {
   const parsed = Number.parseFloat(value ?? "");
   return Number.isFinite(parsed) ? parsed : undefined;
 }
@@ -104,16 +105,16 @@ function resolveVolumeProbeWindow(
   el: HTMLAudioElement | HTMLVideoElement,
   compositionDuration: number,
 ): { start: number; end: number; staticVolume: number } {
-  const start = parseFiniteDatasetNumber(el.dataset.start) ?? 0;
-  const endAttr = parseFiniteDatasetNumber(el.dataset.end);
-  const durAttr = parseFiniteDatasetNumber(el.dataset.duration);
+  const start = parseStrictFiniteTimingNumber(el.dataset.start) ?? 0;
+  const endAttr = parseStrictFiniteTimingNumber(el.dataset.end) ?? undefined;
+  const durAttr = parseStrictFiniteTimingNumber(el.dataset.duration) ?? undefined;
   let end = compositionDuration;
   if (durAttr !== undefined && durAttr > 0) {
     end = start + durAttr;
   } else if (endAttr !== undefined && endAttr > start) {
     end = endAttr;
   }
-  const staticAttr = parseFiniteDatasetNumber(el.dataset.volume) ?? 1;
+  const staticAttr = parseVolumeNumber(el.dataset.volume) ?? 1;
   const staticVolume = Math.max(0, Math.min(1, staticAttr));
   return { start, end, staticVolume };
 }
diff --git a/packages/core/src/runtime/playbackRate.test.ts b/packages/core/src/runtime/playbackRate.test.ts
new file mode 100644
index 000000000..8daf2d43a
--- /dev/null
+++ b/packages/core/src/runtime/playbackRate.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { resolveNaturalMediaTimelineDuration } from "./playbackRate";
+
+function elementWith(attributes: Record<string, string>): Pick<Element, "getAttribute"> {
+  return {
+    getAttribute(name) {
+      return attributes[name] ?? null;
+    },
+  };
+}
+
+describe("resolveNaturalMediaTimelineDuration", () => {
+  it.each([
+    ["2x", 5],
+    ["0x2", 10],
+  ])("matches native playback-rate parsing for %s", (rate, expected) => {
+    expect(
+      resolveNaturalMediaTimelineDuration(elementWith({ "data-playback-rate": rate }), 10),
+    ).toBe(expected);
+  });
+
+  it.each([10, 11])("returns a known zero span at or past source EOF (start=%s)", (start) => {
+    expect(
+      resolveNaturalMediaTimelineDuration(elementWith({ "data-media-start": String(start) }), 10),
+    ).toBe(0);
+  });
+
+  it("returns null only when source duration is unknown", () => {
+    expect(resolveNaturalMediaTimelineDuration(elementWith({}), Number.NaN)).toBeNull();
+  });
+});
diff --git a/packages/core/src/runtime/playbackRate.ts b/packages/core/src/runtime/playbackRate.ts
index 3451012a3..4d016860b 100644
--- a/packages/core/src/runtime/playbackRate.ts
+++ b/packages/core/src/runtime/playbackRate.ts
@@ -1,3 +1,51 @@
 export function normalizePlaybackRate(raw: number): number {
   return Number.isFinite(raw) && raw > 0 ? Math.max(0.1, Math.min(5, raw)) : 1;
 }
+
+/** Parse a literal numeric timing attribute without accepting trailing units or garbage. */
+export function parseStrictFiniteTimingNumber(raw: string | null | undefined): number | null {
+  return parseNumeric(raw);
+}
+
+export function readElementPlaybackRate(el: Pick<Element, "getAttribute">): number {
+  const authored = Number.parseFloat(el.getAttribute("data-playback-rate") ?? "");
+  const raw =
+    Number.isFinite(authored) && authored > 0
+      ? authored
+      : typeof HTMLMediaElement !== "undefined" && el instanceof HTMLMediaElement
+        ? el.defaultPlaybackRate
+        : 1;
+  return normalizePlaybackRate(raw);
+}
+
+export function readMediaStart(el: Pick<Element, "getAttribute">): number {
+  const parse = (raw: string | null): number | null => {
+    const value = parseStrictFiniteTimingNumber(raw);
+    if (value == null) return null;
+    return Number.isFinite(value) && value >= 0 ? value : null;
+  };
+  return (
+    parse(el.getAttribute("data-playback-start")) ?? parse(el.getAttribute("data-media-start")) ?? 0
+  );
+}
+export function resolveNaturalMediaTimelineDuration(
+  el: Pick<Element, "getAttribute">,
+  sourceDuration: number,
+): number | null {
+  return resolveNaturalMediaTimelineDurationFromValues(
+    sourceDuration,
+    readMediaStart(el),
+    readElementPlaybackRate(el),
+  );
+}
+
+export function resolveNaturalMediaTimelineDurationFromValues(
+  sourceDuration: number,
+  mediaStart: number,
+  playbackRate: number,
+): number | null {
+  if (!Number.isFinite(sourceDuration)) return null;
+  const remaining = Math.max(0, sourceDuration - mediaStart);
+  return remaining / normalizePlaybackRate(playbackRate);
+}
+import { parseNumeric } from "./startExpression";
diff --git a/packages/core/src/runtime/startResolver.ts b/packages/core/src/runtime/startResolver.ts
index 2d8484bc3..d42f8fbaa 100644
--- a/packages/core/src/runtime/startResolver.ts
+++ b/packages/core/src/runtime/startResolver.ts
@@ -1,6 +1,7 @@
 import type { RuntimeTimelineLike } from "./types";
 import { swallow } from "./diagnostics";
 import { readElementPlaybackRate } from "./media";
+import { readMediaStart } from "./playbackRate";
 import { parseNumeric, parseStartExpression } from "./startExpression";
 
 const AUTHORED_DURATION_ATTR = "data-hf-authored-duration";
@@ -82,10 +83,7 @@ export function createRuntimeStartTimeResolver(params: {
       }
     }
     if ((resolved == null || resolved <= 0) && isMediaElement(element)) {
-      const playbackStart =
-        parseNumeric(element.getAttribute("data-playback-start")) ??
-        parseNumeric(element.getAttribute("data-media-start")) ??
-        0;
+      const playbackStart = readMediaStart(element);
       if (Number.isFinite(element.duration) && element.duration > playbackStart) {
         resolved = (element.duration - playbackStart) / readElementPlaybackRate(element);
       }
diff --git a/packages/core/src/runtime/timeline.test.ts b/packages/core/src/runtime/timeline.test.ts
index b37aab05d..74bd4b5da 100644
--- a/packages/core/src/runtime/timeline.test.ts
+++ b/packages/core/src/runtime/timeline.test.ts
@@ -340,6 +340,46 @@ describe("collectRuntimeTimelinePayload", () => {
     expect(clip.playbackRate).toBe(1);
   });
 
+  it.each([
+    [0, 2, 5],
+    [2, 2, 4],
+    [2, 0.01, 80],
+    [2, 20, 1.6],
+    [0, "2x", 5],
+    [0, "0x2", 10],
+  ])("rate-scales natural media duration (start=%s rate=%s)", (mediaStart, rate, expected) => {
+    document.body.innerHTML = '<div data-composition-id="main" data-duration="100"></div>';
+    const root = document.body.firstElementChild!;
+    const video = document.createElement("video");
+    video.id = "natural";
+    video.setAttribute("data-start", "0");
+    video.setAttribute("data-media-start", String(mediaStart));
+    video.setAttribute("data-playback-rate", String(rate));
+    Object.defineProperty(video, "duration", { value: 10, configurable: true });
+    root.appendChild(video);
+    expect(collectRuntimeTimelinePayload(defaultParams).clips[0].duration).toBeCloseTo(expected);
+  });
+
+  it.each([10, 11])(
+    "does not replace a known zero media span with root duration (start=%s)",
+    (start) => {
+      document.body.innerHTML = '<div data-composition-id="main" data-duration="100"></div>';
+      const video = document.createElement("video");
+      video.id = "at-eof";
+      video.setAttribute("data-start", "0");
+      video.setAttribute("data-media-start", String(start));
+      Object.defineProperty(video, "duration", { value: 10, configurable: true });
+      document.body.firstElementChild!.appendChild(video);
+      expect(collectRuntimeTimelinePayload(defaultParams).clips).toEqual([]);
+    },
+  );
+
+  it("keeps explicit media duration ahead of natural rate scaling", () => {
+    document.body.innerHTML =
+      '<div data-composition-id="main" data-duration="100"><video id="v" data-start="0" data-duration="7" data-playback-rate="2"></video></div>';
+    expect(collectRuntimeTimelinePayload(defaultParams).clips[0].duration).toBe(7);
+  });
+
   it("collects scenes from composition nodes", () => {
     const root = document.createElement("div");
     root.setAttribute("data-composition-id", "main");
diff --git a/packages/core/src/runtime/timeline.ts b/packages/core/src/runtime/timeline.ts
index f9b92df92..59b68e1d6 100644
--- a/packages/core/src/runtime/timeline.ts
+++ b/packages/core/src/runtime/timeline.ts
@@ -7,6 +7,7 @@ import type {
 import { stableClipId } from "./clipTree";
 import { swallow } from "./diagnostics";
 import { readElementPlaybackRate, readElementPlaybackStart } from "./media";
+import { parseStrictFiniteTimingNumber, resolveNaturalMediaTimelineDuration } from "./playbackRate";
 import { resolveCssStackingContextId } from "./stackingContext";
 import { createRuntimeStartTimeResolver } from "./startResolver";
 import { isSceneLikeCompositionId } from "../slideshow/index.js";
@@ -17,9 +18,7 @@ const AUTHORED_DURATION_ATTR = "data-hf-authored-duration";
 const AUTHORED_END_ATTR = "data-hf-authored-end";
 
 function parseNum(value: string | null | undefined): number | null {
-  if (value == null || value === "") return null;
-  const parsed = Number(value);
-  return Number.isFinite(parsed) ? parsed : null;
+  return parseStrictFiniteTimingNumber(value);
 }
 
 function parseElementDurationAttr(element: Element): number | null {
@@ -180,12 +179,8 @@ export function collectRuntimeTimelinePayload(params: {
     if (declaredDuration != null && declaredDuration > 0) {
       return declaredDuration;
     }
-    const playbackStart =
-      parseNum(mediaEl.getAttribute("data-playback-start")) ??
-      parseNum(mediaEl.getAttribute("data-media-start")) ??
-      0;
-    if (Number.isFinite(mediaEl.duration) && mediaEl.duration > playbackStart) {
-      return Math.max(0, (mediaEl.duration - playbackStart) / readElementPlaybackRate(mediaEl));
+    if (Number.isFinite(mediaEl.duration)) {
+      return resolveNaturalMediaTimelineDuration(mediaEl, mediaEl.duration);
     }
     return null;
   };
@@ -357,23 +352,15 @@ export function collectRuntimeTimelinePayload(params: {
     );
     const nodeCompositionId = node.getAttribute("data-composition-id");
     let duration = parseElementDurationAttr(node);
-    if (
-      (duration == null || duration <= 0) &&
-      nodeCompositionId &&
-      nodeCompositionId !== rootCompositionId
-    ) {
+    if (duration == null && nodeCompositionId && nodeCompositionId !== rootCompositionId) {
       duration = resolveTimelineDurationSeconds(nodeCompositionId);
     }
-    if ((duration == null || duration <= 0) && node instanceof HTMLMediaElement) {
-      const mediaStart =
-        parseNum(node.getAttribute("data-playback-start")) ??
-        parseNum(node.getAttribute("data-media-start")) ??
-        0;
-      if (Number.isFinite(node.duration) && node.duration > 0) {
-        duration = Math.max(0, node.duration - mediaStart);
+    if (duration == null && node instanceof HTMLMediaElement) {
+      if (Number.isFinite(node.duration)) {
+        duration = resolveNaturalMediaTimelineDuration(node, node.duration);
       }
     }
-    if (duration == null || duration <= 0) {
+    if (duration == null) {
       const inheritedDuration = compositionContext.inheritedDuration;
       if (inheritedDuration != null && inheritedDuration > 0) {
         const inheritedStart = compositionContext.inheritedStart ?? 0;
diff --git a/packages/core/src/runtime/webAudioTransport.test.ts b/packages/core/src/runtime/webAudioTransport.test.ts
index 35f935bc5..89cba4492 100644
--- a/packages/core/src/runtime/webAudioTransport.test.ts
+++ b/packages/core/src/runtime/webAudioTransport.test.ts
@@ -1,4 +1,5 @@
-import { describe, it, expect, vi } from "vitest";
+// fallow-ignore-file code-duplication complexity
+import { beforeEach, describe, it, expect, vi } from "vitest";
 import { WebAudioTransport } from "./webAudioTransport";
 
 function createMockAudioContext(currentTime = 100) {
@@ -21,6 +22,10 @@ function createMockAudioContext(currentTime = 100) {
     connect: vi.fn(),
     disconnect: vi.fn(),
   };
+  const mediaElementSourceNode = {
+    connect: vi.fn(),
+    disconnect: vi.fn(),
+  };
   const masterGain = {
     gain: { value: 1 },
     connect: vi.fn(),
@@ -30,11 +35,12 @@ function createMockAudioContext(currentTime = 100) {
     state: "running",
     resume: vi.fn(),
     createBufferSource: vi.fn(() => sourceNode),
+    createMediaElementSource: vi.fn(() => mediaElementSourceNode),
     createGain: vi.fn(() => gainNode),
     destination: {},
     close: vi.fn(),
   };
-  return { ctx, sourceNode, gainNode, masterGain, startFn };
+  return { ctx, sourceNode, mediaElementSourceNode, gainNode, masterGain, startFn };
 }
 
 function setupTransport(currentTime = 100) {
@@ -47,9 +53,75 @@ function setupTransport(currentTime = 100) {
 }
 
 const mockBuffer = {} as AudioBuffer;
-const mockEl = { muted: false } as HTMLMediaElement;
+const mockEl = {
+  muted: false,
+  volume: 0.4,
+  getAttribute: (name: string) => (name === "data-playback-rate" ? "1" : null),
+} as unknown as HTMLMediaElement;
 
 describe("WebAudioTransport", () => {
+  beforeEach(() => {
+    mockEl.muted = false;
+    mockEl.volume = 0.4;
+  });
+
+  describe("pitch-preserving media-element source route", () => {
+    it("routes native media through WebAudio without decoding, resampling, or muting it", async () => {
+      const { transport, mock, gen } = setupTransport(100);
+
+      const scheduled = await transport.scheduleMediaElementPlayback(mockEl, 0, 0, 0, 0.8, gen, 2);
+
+      expect(scheduled).not.toBeNull();
+      expect(mock.ctx.createMediaElementSource).toHaveBeenCalledWith(mockEl);
+      expect(mock.ctx.createBufferSource).not.toHaveBeenCalled();
+      expect(mock.mediaElementSourceNode.connect).toHaveBeenCalled();
+      expect(mock.gainNode.connect).toHaveBeenCalledWith(mock.masterGain);
+      expect(mockEl.muted).toBe(false);
+      expect(mockEl.volume).toBe(1);
+      expect(mock.gainNode.gain.value).toBe(0.8);
+      expect(transport.ownsElement(mockEl)).toBe(false);
+      expect(transport.isActive()).toBe(true);
+    });
+
+    it("creates one MediaElementAudioSourceNode per element and context", async () => {
+      const { transport, mock } = setupTransport(100);
+
+      let gen = transport.startGeneration();
+      await transport.scheduleMediaElementPlayback(mockEl, 0, 0, 0, 1, gen, 1);
+      transport.stopAll();
+      gen = transport.startGeneration();
+      await transport.scheduleMediaElementPlayback(mockEl, 0, 0, 0, 1, gen, 2);
+
+      expect(mock.ctx.createMediaElementSource).toHaveBeenCalledTimes(1);
+    });
+
+    it("re-aims FX automation on a global-rate change without resampling the native source", async () => {
+      const { transport, mock, gen } = setupTransport(100);
+      await transport.scheduleMediaElementPlayback(mockEl, 0, 0, 0, 1, gen, 1);
+      const active = (transport as unknown as { _activeSources: { fx?: unknown }[] })
+        ._activeSources;
+      const setRate = vi.fn();
+      active[0]!.fx = { dispose: vi.fn(), setRate };
+
+      transport.setRate(2);
+
+      expect(setRate).toHaveBeenCalledWith(2);
+      expect(mock.ctx.createBufferSource).not.toHaveBeenCalled();
+    });
+
+    it("disconnects the transient graph on stop but keeps the cached native source reusable", async () => {
+      const { transport, mock, gen } = setupTransport(100);
+      await transport.scheduleMediaElementPlayback(mockEl, 0, 0, 0, 1, gen, 2);
+
+      transport.stopAll();
+
+      expect(mock.mediaElementSourceNode.disconnect).toHaveBeenCalled();
+      expect(mockEl.muted).toBe(false);
+      expect(mockEl.volume).toBe(0.4);
+      expect(transport.isActive()).toBe(false);
+    });
+  });
+
   it("tracks play generation for async race prevention", () => {
     const transport = new WebAudioTransport();
     expect(transport.currentGeneration()).toBe(0);
@@ -75,6 +147,7 @@ describe("WebAudioTransport", () => {
     const mockEl = { muted: false } as HTMLMediaElement;
     const mockSource = {
       el: mockEl,
+      sourceKind: "buffer" as const,
       sourceNode: { stop: vi.fn(), disconnect: vi.fn() } as unknown as AudioBufferSourceNode,
       gainNode: { disconnect: vi.fn() } as unknown as GainNode,
       compositionStart: 0,
@@ -100,6 +173,7 @@ describe("WebAudioTransport", () => {
     const mockEl = { muted: true } as HTMLMediaElement;
     const mockSource = {
       el: mockEl,
+      sourceKind: "buffer" as const,
       sourceNode: { stop: vi.fn(), disconnect: vi.fn() } as unknown as AudioBufferSourceNode,
       gainNode: { disconnect: vi.fn() } as unknown as GainNode,
       compositionStart: 0,
@@ -129,11 +203,23 @@ describe("WebAudioTransport", () => {
     expect(transport.isActive()).toBe(false);
   });
 
+  it("restores the configured master volume after user mute then unmute", () => {
+    const { transport, mock } = setupTransport();
+    transport.setVolume(0.4);
+    transport.setMuted(true);
+    expect(mock.masterGain.gain.value).toBe(0);
+
+    transport.setMuted(false);
+
+    expect(mock.masterGain.gain.value).toBe(0.4);
+  });
+
   describe("ownsElement (per-element mute gate)", () => {
     function withSource(el: HTMLMediaElement) {
       const transport = new WebAudioTransport();
       const source = {
         el,
+        sourceKind: "buffer" as const,
         sourceNode: { stop: vi.fn(), disconnect: vi.fn() } as unknown as AudioBufferSourceNode,
         gainNode: { disconnect: vi.fn() } as unknown as GainNode,
         compositionStart: 0,
@@ -147,12 +233,18 @@ describe("WebAudioTransport", () => {
     }
 
     it("returns true for an element the transport plays", () => {
-      const el = { muted: false } as HTMLMediaElement;
+      const el = {
+        muted: false,
+        getAttribute: (name: string) => (name === "data-playback-rate" ? "1" : null),
+      } as unknown as HTMLMediaElement;
       expect(withSource(el).ownsElement(el)).toBe(true);
     });
 
     it("returns false for an element the transport does not play", () => {
-      const el = { muted: false } as HTMLMediaElement;
+      const el = {
+        muted: false,
+        getAttribute: (name: string) => (name === "data-playback-rate" ? "1" : null),
+      } as unknown as HTMLMediaElement;
       const other = { muted: false } as HTMLMediaElement;
       expect(withSource(el).ownsElement(other)).toBe(false);
     });
@@ -230,11 +322,11 @@ describe("WebAudioTransport", () => {
       expect(mock.startFn).not.toHaveBeenCalled();
     });
 
-    it("scales the bound by playback rate (buffer seconds)", async () => {
+    it("keeps source bounds in authored media time when global rate changes", async () => {
       const { transport, mock, gen } = setupTransport(100);
-      // rate=2, clipDuration=10 → clipSourceLen=20; elapsed=3 → 17 buffer seconds left
+      // Global rate=2 changes wallclock speed, not source-time span.
       await transport.schedulePlayback(mockEl, mockBuffer, 5, 0, 8, 1, gen, 2, 10);
-      expect(mock.startFn).toHaveBeenCalledWith(0, 3, 17);
+      expect(mock.startFn).toHaveBeenCalledWith(0, 3, 7);
     });
 
     it("plays unbounded when clipDuration is omitted (legacy behavior)", async () => {
@@ -245,6 +337,27 @@ describe("WebAudioTransport", () => {
   });
 
   describe("playback rate", () => {
+    it("combines authored media rate with global rate without corrupting source seek or clock", async () => {
+      const { transport, mock, gen } = setupTransport(100);
+      const el = {
+        muted: false,
+        getAttribute: (name: string) => (name === "data-playback-rate" ? "2" : null),
+      } as unknown as HTMLMediaElement;
+
+      // At composition t=0.5 with mediaStart=1, authored 2x has consumed one
+      // source second. Global 0.5x makes the source node's wallclock rate 1x,
+      // but the composition clock must still advance at global 0.5x.
+      await transport.schedulePlayback(el, mockBuffer, 0, 1, 0.5, 1, gen, 0.5, 2);
+
+      expect(mock.sourceNode.playbackRate.value).toBe(1);
+      expect(mock.startFn).toHaveBeenCalledWith(0, 2, 3);
+      mock.ctx.currentTime = 101;
+      expect(transport.getTime()).toBe(1);
+
+      transport.setRate(1);
+      expect(mock.sourceNode.playbackRate.value).toBe(2);
+    });
+
     it("sets sourceNode.playbackRate.value when rate is provided", async () => {
       const { transport, mock, gen } = setupTransport(100);
 
@@ -380,7 +493,10 @@ describe("WebAudioTransport", () => {
   describe("onended cleanup (audio dropout fix)", () => {
     it("cleans up _activeSources when AudioBufferSourceNode ends naturally", async () => {
       const { transport, mock, gen } = setupTransport(100);
-      const el = { muted: false } as HTMLMediaElement;
+      const el = {
+        muted: false,
+        getAttribute: (name: string) => (name === "data-playback-rate" ? "1" : null),
+      } as unknown as HTMLMediaElement;
 
       await transport.schedulePlayback(el, mockBuffer, 0, 0, 0, 1, gen);
       expect(transport.isActive()).toBe(true);
@@ -394,7 +510,10 @@ describe("WebAudioTransport", () => {
 
     it("restores priorMuted=true when element was already muted", async () => {
       const { transport, mock, gen } = setupTransport(100);
-      const el = { muted: true } as HTMLMediaElement;
+      const el = {
+        muted: true,
+        getAttribute: (name: string) => (name === "data-playback-rate" ? "1" : null),
+      } as unknown as HTMLMediaElement;
 
       await transport.schedulePlayback(el, mockBuffer, 0, 0, 0, 1, gen);
       expect(el.muted).toBe(true);
@@ -428,7 +547,10 @@ describe("WebAudioTransport", () => {
 
     it("onended after stopAll is a no-op — does not clobber restored state", async () => {
       const { transport, mock, gen } = setupTransport(100);
-      const el = { muted: false } as HTMLMediaElement;
+      const el = {
+        muted: false,
+        getAttribute: (name: string) => (name === "data-playback-rate" ? "1" : null),
+      } as unknown as HTMLMediaElement;
 
       await transport.schedulePlayback(el, mockBuffer, 0, 0, 0, 1, gen);
       expect(el.muted).toBe(true);
@@ -454,7 +576,10 @@ describe("WebAudioTransport", () => {
       return transport;
     }
     const el = (src: string) =>
-      ({ getAttribute: () => src, currentSrc: "" }) as unknown as HTMLMediaElement;
+      ({
+        getAttribute: (name: string) => (name === "src" ? src : null),
+        currentSrc: "",
+      }) as unknown as HTMLMediaElement;
     const failedSrcs = (t: WebAudioTransport) =>
       (t as unknown as { _failedSrcs: Set<string> })._failedSrcs;
 
diff --git a/packages/core/src/runtime/webAudioTransport.ts b/packages/core/src/runtime/webAudioTransport.ts
index e2e2dc66e..180a5e5f9 100644
--- a/packages/core/src/runtime/webAudioTransport.ts
+++ b/packages/core/src/runtime/webAudioTransport.ts
@@ -7,6 +7,7 @@ import {
 import { VOLUME_RANGE } from "../audioAutomation.js";
 import { swallow } from "./diagnostics";
 import { getDebugSurface } from "./globals.js";
+import { readElementPlaybackRate } from "./media.js";
 
 function normalizeRate(rate: number): number {
   if (!Number.isFinite(rate) || rate <= 0) return 1;
@@ -43,21 +44,23 @@ function startBoundedSource(
     elapsed: number;
     mediaStart: number;
     scheduledAt: number;
-    safeRate: number;
+    globalRate: number;
+    mediaRate: number;
     clipDuration: number;
   },
 ): boolean {
-  const { elapsed, mediaStart, scheduledAt, safeRate, clipDuration } = opts;
+  const { elapsed, mediaStart, scheduledAt, globalRate, mediaRate, clipDuration } = opts;
   const hasBound = Number.isFinite(clipDuration) && clipDuration > 0;
-  const clipSourceLen = clipDuration * safeRate;
+  const clipSourceLen = clipDuration * mediaRate;
   if (elapsed >= 0) {
-    const remaining = clipSourceLen - elapsed;
+    const sourceElapsed = elapsed * mediaRate;
+    const remaining = clipSourceLen - sourceElapsed;
     if (hasBound && remaining <= 0) return false;
-    if (hasBound) node.start(0, elapsed + mediaStart, remaining);
-    else node.start(0, elapsed + mediaStart);
+    if (hasBound) node.start(0, sourceElapsed + mediaStart, remaining);
+    else node.start(0, sourceElapsed + mediaStart);
     return true;
   }
-  const delay = -elapsed / safeRate;
+  const delay = -elapsed / globalRate;
   if (hasBound) node.start(scheduledAt + delay, mediaStart, clipSourceLen);
   else node.start(scheduledAt + delay, mediaStart);
   return true;
@@ -77,9 +80,8 @@ function scheduleVolumeLane(
   scheduleParamLane([{ param: gainNode.gain }], lane, VOLUME_RANGE.scale, timing);
 }
 
-export type ScheduledSource = {
+type ScheduledSourceBase = {
   el: HTMLMediaElement;
-  sourceNode: AudioBufferSourceNode;
   gainNode: GainNode;
   /** FX chain spliced between source and gain, when the element carries one. */
   fx?: ElementFxHandle | null;
@@ -87,18 +89,35 @@ export type ScheduledSource = {
   mediaStart: number;
   scheduledAt: number;
   priorMuted: boolean;
+  priorVolume: number;
+  mediaPlaybackRate: number;
   // The clip had a finite window, so start() was given a fixed duration in
   // buffer-sample seconds. That bound can't be rescaled in place on a rate
   // change — callers must stopAll()+reschedule (see hasBoundedActiveSources).
   bounded: boolean;
 };
 
+export type ScheduledSource = ScheduledSourceBase &
+  (
+    | { sourceKind: "buffer"; sourceNode: AudioBufferSourceNode }
+    | { sourceKind: "media-element"; sourceNode: MediaElementAudioSourceNode }
+  );
+
+function isBufferSource(
+  source: ScheduledSource,
+): source is ScheduledSourceBase & { sourceKind: "buffer"; sourceNode: AudioBufferSourceNode } {
+  return source.sourceKind === "buffer";
+}
+
 export class WebAudioTransport {
   private _ctx: AudioContext | null = null;
   private _bufferCache = new Map<string, AudioBuffer>();
   private _failedSrcs = new Set<string>();
+  private _mediaElementSources = new WeakMap<HTMLMediaElement, MediaElementAudioSourceNode>();
   private _activeSources: ScheduledSource[] = [];
   private _masterGain: GainNode | null = null;
+  private _masterVolume = 1;
+  private _masterMuted = false;
   // Composition-time reference frame: at AudioContext time `_rateAnchorCtx`,
   // composition time was `_rateAnchorComp`, and time has been advancing at
   // `_rate` composition-seconds per wallclock-second since.
@@ -113,6 +132,7 @@ export class WebAudioTransport {
       this._ctx = new AudioContext();
       this._masterGain = this._ctx.createGain();
       this._masterGain.connect(this._ctx.destination);
+      this.applyMasterGain();
       return true;
     } catch {
       return false;
@@ -179,6 +199,75 @@ export class WebAudioTransport {
     return this._playGeneration;
   }
 
+  /**
+   * Route the browser's pitch-preserving HTMLMediaElement transport through the
+   * same FX, automation, element-gain, and master graph used by final audio.
+   * The media element remains the source-time/rate owner; Web Audio is strictly
+   * downstream and therefore never resamples it for Studio global speed.
+   */
+  async scheduleMediaElementPlayback(
+    el: HTMLMediaElement,
+    compositionStart: number,
+    _mediaStart: number,
+    compositionTime: number,
+    volume: number,
+    generation: number,
+    rate = 1,
+  ): Promise<ScheduledSource | null> {
+    if (!this._ctx || !this._masterGain) return null;
+    if (generation !== this._playGeneration) return null;
+
+    try {
+      if (this._ctx.state === "suspended") await this._ctx.resume();
+      if (generation !== this._playGeneration) return null;
+
+      let sourceNode = this._mediaElementSources.get(el);
+      if (!sourceNode) {
+        sourceNode = this._ctx.createMediaElementSource(el);
+        this._mediaElementSources.set(el, sourceNode);
+      }
+
+      const safeRate = normalizeRate(rate);
+      const gainNode = this._ctx.createGain();
+      gainNode.gain.value = volume;
+      const scheduledAt = this._ctx.currentTime;
+      const elapsed = compositionTime - compositionStart;
+      const timing: AutomationTiming = { scheduledAt, elapsed, rate: safeRate };
+      const fx = attachElementFxChain(this._ctx, el, sourceNode, gainNode, timing);
+      gainNode.connect(this._masterGain);
+      scheduleVolumeLane(el, gainNode, timing);
+
+      this._rate = safeRate;
+      this._rateAnchorCtx = scheduledAt;
+      this._rateAnchorComp = compositionTime;
+
+      const scheduled: ScheduledSource = {
+        fx,
+        el,
+        sourceNode,
+        sourceKind: "media-element",
+        gainNode,
+        compositionStart,
+        mediaStart: _mediaStart,
+        scheduledAt,
+        priorMuted: el.muted,
+        priorVolume: el.volume,
+        mediaPlaybackRate: readElementPlaybackRate(el),
+        bounded: false,
+      };
+      // Chrome applies HTMLMediaElement.volume before MediaElementAudioSource.
+      // Keep that upstream stage at unity so the existing downstream gain is
+      // the single owner of author × user volume and automation.
+      el.volume = 1;
+      this._activeSources.push(scheduled);
+      this._paused = false;
+      return scheduled;
+    } catch (err) {
+      swallow("webAudioTransport.mediaElementSource", err);
+      return null;
+    }
+  }
+
   async schedulePlayback(
     el: HTMLMediaElement,
     buffer: AudioBuffer,
@@ -200,10 +289,12 @@ export class WebAudioTransport {
       if (generation !== this._playGeneration) return null;
 
       const safeRate = normalizeRate(rate);
+      const mediaRate = readElementPlaybackRate(el);
+      const sourceRate = safeRate * mediaRate;
 
       const sourceNode = this._ctx.createBufferSource();
       sourceNode.buffer = buffer;
-      sourceNode.playbackRate.value = safeRate;
+      sourceNode.playbackRate.value = sourceRate;
 
       const gainNode = this._ctx.createGain();
       gainNode.gain.value = volume;
@@ -230,7 +321,8 @@ export class WebAudioTransport {
           elapsed,
           mediaStart,
           scheduledAt,
-          safeRate,
+          globalRate: safeRate,
+          mediaRate,
           clipDuration,
         })
       ) {
@@ -249,11 +341,14 @@ export class WebAudioTransport {
         fx,
         el,
         sourceNode,
+        sourceKind: "buffer",
         gainNode,
         compositionStart,
         mediaStart,
         scheduledAt,
         priorMuted,
+        priorVolume: el.volume,
+        mediaPlaybackRate: mediaRate,
         bounded: Number.isFinite(clipDuration) && clipDuration > 0,
       };
       this._activeSources.push(scheduled);
@@ -314,7 +409,9 @@ export class WebAudioTransport {
     this._rate = safeRate;
     for (const source of this._activeSources) {
       try {
-        source.sourceNode.playbackRate.value = safeRate;
+        if (isBufferSource(source)) {
+          source.sourceNode.playbackRate.value = safeRate * source.mediaPlaybackRate;
+        }
         source.fx?.setRate(safeRate);
       } catch (err) {
         swallow("webAudioTransport.setRate", err);
@@ -327,29 +424,29 @@ export class WebAudioTransport {
   // arg at its original rate; a later rate change can't rescale it in place, so
   // the caller must stopAll()+reschedule to keep trimmed clips ending on time.
   hasBoundedActiveSources(): boolean {
-    return this._activeSources.some((s) => s.bounded);
+    return this._activeSources.some((s) => isBufferSource(s) && s.bounded);
   }
 
   stopAll(): void {
     for (const source of this._activeSources) {
       try {
-        source.sourceNode.stop();
+        if (isBufferSource(source)) source.sourceNode.stop();
         source.sourceNode.disconnect();
         source.fx?.dispose();
         source.gainNode.disconnect();
       } catch {
         // already stopped
       }
-      source.el.muted = source.priorMuted;
+      if (isBufferSource(source)) source.el.muted = source.priorMuted;
+      else source.el.volume = source.priorVolume;
     }
     this._activeSources = [];
     this._paused = true;
   }
 
   setVolume(volume: number): void {
-    if (this._masterGain) {
-      this._masterGain.gain.value = Math.max(0, Math.min(1, volume));
-    }
+    this._masterVolume = Math.max(0, Math.min(1, volume));
+    this.applyMasterGain();
   }
 
   setElementVolume(el: HTMLMediaElement, volume: number): void {
@@ -357,6 +454,7 @@ export class WebAudioTransport {
     for (const source of this._activeSources) {
       if (source.el !== el) continue;
       try {
+        if (source.sourceKind === "media-element") source.el.volume = 1;
         source.gainNode.gain.value = safeVolume;
       } catch (err) {
         swallow("webAudioTransport.setElementVolume", err);
@@ -365,9 +463,12 @@ export class WebAudioTransport {
   }
 
   setMuted(muted: boolean): void {
-    if (this._masterGain) {
-      this._masterGain.gain.value = muted ? 0 : 1;
-    }
+    this._masterMuted = muted;
+    this.applyMasterGain();
+  }
+
+  private applyMasterGain(): void {
+    if (this._masterGain) this._masterGain.gain.value = this._masterMuted ? 0 : this._masterVolume;
   }
 
   isActive(): boolean {
@@ -377,13 +478,14 @@ export class WebAudioTransport {
   /** Whether the transport currently plays THIS element (the runtime mutes it to
    *  avoid double audio; an unclaimed track stays audible). */
   ownsElement(el: HTMLMediaElement): boolean {
-    return !this._paused && this._activeSources.some((s) => s.el === el);
+    return !this._paused && this._activeSources.some((s) => s.el === el && isBufferSource(s));
   }
 
   destroy(): void {
     this.stopAll();
     this._bufferCache.clear();
     this._failedSrcs.clear();
+    this._mediaElementSources = new WeakMap();
     if (this._ctx) {
       try {
         void this._ctx.close();
@@ -393,5 +495,7 @@ export class WebAudioTransport {
     }
     this._ctx = null;
     this._masterGain = null;
+    this._masterVolume = 1;
+    this._masterMuted = false;
   }
 }
diff --git a/packages/engine/src/services/audioMixer.test.ts b/packages/engine/src/services/audioMixer.test.ts
index cac9b10ae..d92d7a017 100644
--- a/packages/engine/src/services/audioMixer.test.ts
+++ b/packages/engine/src/services/audioMixer.test.ts
@@ -67,6 +67,19 @@ vi.mock("../utils/ffprobe.js", async (importOriginal) => {
 
 import { parseAudioElements, processCompositionAudio } from "./audioMixer.js";
 
+describe("parseAudioElements strict literal timing", () => {
+  it.each(["", "   ", "0s", "0abc", "0px", "-1s", "Infinity", "NaN", "0x10"])(
+    "does not drop hand-authored data-duration=%j as an explicit zero window",
+    (duration) => {
+      expect(
+        parseAudioElements(
+          `<audio id="a" src="tone.wav" data-start="0" data-duration="${duration}"></audio>`,
+        ),
+      ).toHaveLength(1);
+    },
+  );
+});
+
 describe("processCompositionAudio", () => {
   const tempDirs: string[] = [];
 
@@ -87,6 +100,38 @@ describe("processCompositionAudio", () => {
     }
   });
 
+  it.each([
+    ["compiled EOF", 4, 2],
+    ["compiled past EOF", 5, 3],
+    ["ordinary explicit zero", 6, 0],
+  ])(
+    "drops a known zero timeline window without audio prep or mix: %s",
+    async (_label, start, mediaStart) => {
+      const baseDir = mkdtempSync(join(tmpdir(), "hf-audio-base-"));
+      const workDir = mkdtempSync(join(tmpdir(), "hf-audio-work-"));
+      tempDirs.push(baseDir, workDir);
+      writeFileSync(join(baseDir, "tone.wav"), Buffer.from("RIFF0000WAVEfmt "));
+      const elements = parseAudioElements(
+        `<div data-composition-id="root" data-start="0" data-duration="10"><audio id="zero-window" src="tone.wav" data-start="${start}" data-duration="0" data-end="${start}" data-media-start="${mediaStart}"></audio></div>`,
+      );
+
+      const result = await processCompositionAudio(
+        elements,
+        baseDir,
+        workDir,
+        join(baseDir, "out.m4a"),
+        10,
+      );
+
+      expect(extractAudioMetadataMock).not.toHaveBeenCalled();
+      expect(runFfmpegMock).toHaveBeenCalledTimes(1);
+      expect(runFfmpegMock.mock.calls[0]?.[0].join(" ")).toContain("anullsrc");
+      expect(runFfmpegMock.mock.calls[0]?.[0]).not.toContain(join(baseDir, "tone.wav"));
+      expect(elements).toEqual([]);
+      expect(result).toMatchObject({ success: true, tracksProcessed: 0 });
+    },
+  );
+
   it("classifies an HTML-as-200 audio source as deterministic user input", async () => {
     const baseDir = mkdtempSync(join(tmpdir(), "hf-audio-base-"));
     const workDir = mkdtempSync(join(tmpdir(), "hf-audio-work-"));
@@ -257,6 +302,129 @@ describe("processCompositionAudio", () => {
     expect(filter).not.toContain("weights=");
   });
 
+  it("trims the consumed source span and applies pitch-preserving tempo at 2x", async () => {
+    const baseDir = mkdtempSync(join(tmpdir(), "hf-audio-base-"));
+    const workDir = mkdtempSync(join(tmpdir(), "hf-audio-work-"));
+    tempDirs.push(baseDir, workDir);
+    writeFileSync(join(baseDir, "timecode.wav"), "stub");
+
+    const result = await processCompositionAudio(
+      [
+        {
+          id: "timecode",
+          src: "timecode.wav",
+          start: 0,
+          end: 2,
+          mediaStart: 1,
+          playbackRate: 2,
+          layer: 0,
+          volume: 1,
+          type: "audio",
+        },
+      ],
+      baseDir,
+      workDir,
+      join(baseDir, "out.m4a"),
+      2,
+    );
+
+    expect(result.success).toBe(true);
+    const prepareArgs = runFfmpegMock.mock.calls[0]?.[0] ?? [];
+    expect(prepareArgs).toEqual(expect.arrayContaining(["-ss", "1", "-t", "4", "-af", "atempo=2"]));
+    expect(prepareArgs.filter((arg) => arg === "-t")).toHaveLength(2);
+    expect(prepareArgs.at(-3)).toBe("2");
+  });
+
+  it.each([
+    { rate: 0.1, filter: "atempo=0.5,atempo=0.5,atempo=0.5,atempo=0.8" },
+    { rate: 5, filter: "atempo=2,atempo=2,atempo=1.25" },
+  ])("builds a bounded atempo chain for normalized rate $rate", async ({ rate, filter }) => {
+    const baseDir = mkdtempSync(join(tmpdir(), "hf-audio-base-"));
+    const workDir = mkdtempSync(join(tmpdir(), "hf-audio-work-"));
+    tempDirs.push(baseDir, workDir);
+    writeFileSync(join(baseDir, "timecode.wav"), "stub");
+
+    await processCompositionAudio(
+      [
+        {
+          id: "timecode",
+          src: "timecode.wav",
+          start: 0,
+          end: 2,
+          mediaStart: 0,
+          playbackRate: rate,
+          layer: 0,
+          volume: 1,
+          type: "audio",
+        },
+      ],
+      baseDir,
+      workDir,
+      join(baseDir, "out.m4a"),
+      2,
+    );
+
+    expect(runFfmpegMock.mock.calls[0]?.[0]).toEqual(expect.arrayContaining(["-af", filter]));
+  });
+
+  it("keeps automation on authored timeline time after constant retiming", async () => {
+    const baseDir = mkdtempSync(join(tmpdir(), "hf-audio-base-"));
+    const workDir = mkdtempSync(join(tmpdir(), "hf-audio-work-"));
+    tempDirs.push(baseDir, workDir);
+    writeFileSync(join(baseDir, "timecode.wav"), "stub");
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [
+        {
+          target: "volume",
+          points: [
+            { t: 0, v: 0 },
+            { t: 2, v: 1 },
+          ],
+        },
+      ],
+    });
+    const fxChain = JSON.stringify({
+      version: 1,
+      nodes: [{ type: "gain", id: "gain", params: { gain: 1 } }],
+    });
+
+    await processCompositionAudio(
+      [
+        {
+          id: "timecode",
+          src: "timecode.wav",
+          start: 0,
+          end: 2,
+          mediaStart: 0,
+          playbackRate: 2,
+          layer: 0,
+          volume: 1,
+          automation,
+          fxChain,
+          type: "audio",
+        },
+      ],
+      baseDir,
+      workDir,
+      join(baseDir, "out.m4a"),
+      2,
+    );
+
+    expect(runFfmpegMock.mock.calls[0]?.[0]).toEqual(
+      expect.arrayContaining(["-t", "4", "-af", "atempo=2"]),
+    );
+    expect(applyAudioFxChainMock.mock.calls[0]?.[3]).toMatchObject({
+      envelope: {
+        keyframes: [
+          { time: 0, volume: 0 },
+          { time: 2, volume: 1 },
+        ],
+        trackStart: 0,
+      },
+    });
+  });
+
   it("lets an FX tail run past the clip, still bounded by the composition", async () => {
     // A reverb is still decaying when the clip's own audio stops. Trimming at
     // the clip boundary is what cut every tail short in the render.
@@ -1033,6 +1201,66 @@ describe("processCompositionAudio", () => {
 });
 
 describe("parseAudioElements — relative data-start resolution", () => {
+  it.each([
+    {
+      label: "valueless playback-start",
+      attributes: 'data-playback-start data-media-start="1.5"',
+      expected: 1.5,
+    },
+    {
+      label: "empty playback-start",
+      attributes: 'data-playback-start="" data-media-start="1.5"',
+      expected: 1.5,
+    },
+    {
+      label: "whitespace playback-start",
+      attributes: 'data-playback-start="   " data-media-start="1.5"',
+      expected: 1.5,
+    },
+    {
+      label: "invalid playback-start",
+      attributes: 'data-playback-start="later" data-media-start="1.5"',
+      expected: 1.5,
+    },
+    { label: "missing media-start", attributes: "", expected: 0 },
+    { label: "invalid media-start", attributes: 'data-media-start="later"', expected: 0 },
+    {
+      label: "negative playback-start",
+      attributes: 'data-playback-start="-1" data-media-start="1.5"',
+      expected: 1.5,
+    },
+    { label: "negative media-start", attributes: 'data-media-start="-1"', expected: 0 },
+    {
+      label: "finite playback-start",
+      attributes: 'data-playback-start="2.25" data-media-start="1.5"',
+      expected: 2.25,
+    },
+    {
+      label: "zero playback-start",
+      attributes: 'data-playback-start="0" data-media-start="1.5"',
+      expected: 0,
+    },
+  ])("uses finite playback-start -> media-start -> 0 for $label", ({ attributes, expected }) => {
+    const html = wrap(`<audio id="a0" data-start="0" src="a.m4a" ${attributes}></audio>`);
+
+    expect(parseAudioElements(html)[0]?.mediaStart).toBe(expected);
+  });
+
+  it("parses and normalizes constant playback rate", () => {
+    const html = wrap(
+      '<audio id="fast" data-start="0" src="a.m4a" data-playback-rate="2"></audio>' +
+        '<audio id="low" data-start="0" src="a.m4a" data-playback-rate="0.01"></audio>' +
+        '<audio id="high" data-start="0" src="a.m4a" data-playback-rate="20"></audio>' +
+        '<audio id="invalid" data-start="0" src="a.m4a" data-playback-rate="bad"></audio>',
+    );
+    const tracks = parseAudioElements(html);
+
+    expect(tracks.find((track) => track.id === "fast")?.playbackRate).toBe(2);
+    expect(tracks.find((track) => track.id === "low")?.playbackRate).toBe(0.1);
+    expect(tracks.find((track) => track.id === "high")?.playbackRate).toBe(5);
+    expect(tracks.find((track) => track.id === "invalid")?.playbackRate).toBe(1);
+  });
+
   const wrap = (body: string) =>
     `<div id="root" class="composition" data-composition-id="c" data-start="0" data-duration="10">${body}</div>`;
 
diff --git a/packages/engine/src/services/audioMixer.ts b/packages/engine/src/services/audioMixer.ts
index e71d26587..9a80c966a 100644
--- a/packages/engine/src/services/audioMixer.ts
+++ b/packages/engine/src/services/audioMixer.ts
@@ -21,6 +21,7 @@ import { formatFfmpegError, runFfmpeg, type RunFfmpegResult } from "../utils/run
 import { unwrapTemplate } from "../utils/htmlTemplate.js";
 import { resolveProjectRelativeSrc } from "./videoFrameExtractor.js";
 import { resolveReferencedStart, type RefResolverEl } from "./referenceResolver.js";
+import { isKnownInactiveTimelineWindow } from "./mediaTimelineWindow.js";
 import type {
   AudioElement,
   AudioFailureStage,
@@ -39,6 +40,11 @@ import {
   type HfAutomationLane,
 } from "@hyperframes/core/audio-automation";
 import { chainTailSeconds } from "@hyperframes/core/audio-fx-tail";
+import {
+  normalizePlaybackRate,
+  parseStrictFiniteTimingNumber,
+  readMediaStart,
+} from "@hyperframes/core";
 import { applyAudioFxChain, AudioFxRenderError } from "./audioFxRender.js";
 import type { AudioVolumeKeyframe } from "./audioMixer.types.js";
 
@@ -68,6 +74,39 @@ function formatFilterNumber(value: number): string {
   return Number(value.toFixed(6)).toString();
 }
 
+/** Build an FFmpeg-compatible, pitch-preserving tempo chain. */
+function buildAtempoFilter(playbackRate: number): string | null {
+  let remaining = normalizePlaybackRate(playbackRate);
+  if (Math.abs(remaining - 1) < 1e-9) return null;
+  const stages: number[] = [];
+  while (remaining < 0.5 - 1e-9) {
+    stages.push(0.5);
+    remaining /= 0.5;
+  }
+  while (remaining > 2 + 1e-9) {
+    stages.push(2);
+    remaining /= 2;
+  }
+  if (Math.abs(remaining - 1) >= 1e-9) stages.push(remaining);
+  return stages.map((stage) => `atempo=${formatFilterNumber(stage)}`).join(",");
+}
+
+function preparedAudioOutputArgs(srcPath: string, playbackRate: number): Promise<string[]> {
+  return stereoOutputArgs(srcPath).then((channelArgs) => {
+    const filters: string[] = [];
+    const outputArgs: string[] = [];
+    if (channelArgs[0] === "-af" && channelArgs[1]) {
+      filters.push(channelArgs[1]);
+    } else {
+      outputArgs.push(...channelArgs);
+    }
+    const atempo = buildAtempoFilter(playbackRate);
+    if (atempo) filters.push(atempo);
+    if (filters.length > 0) outputArgs.push("-af", filters.join(","));
+    return outputArgs;
+  });
+}
+
 function escapeExpressionCommas(expression: string): string {
   return expression.replace(/\\/g, "\\\\").replace(/,/g, "\\,");
 }
@@ -412,8 +451,7 @@ export function parseAudioElements(html: string): AudioElement[] {
   // from data-duration / natural media downstream); guard NaN so a malformed
   // value never poisons the mix instead of falling back to 0.
   const parseEnd = (raw: string | null): number => {
-    const end = raw ? parseFloat(raw) : 0;
-    return Number.isFinite(end) ? end : 0;
+    return parseStrictFiniteTimingNumber(raw) ?? 0;
   };
   const isHidden = (el: AudioMediaElement): boolean => {
     for (let current: AudioMediaElement | null = el; current; current = current.parentElement) {
@@ -426,7 +464,7 @@ export function parseAudioElements(html: string): AudioElement[] {
 
   // and `type`; everything else (timing, layer, volume) is read identically.
   const build = (el: RefResolverEl, id: string, type: AudioElement["type"]): AudioElement => {
-    const mediaStartAttr = el.getAttribute("data-media-start");
+    const playbackRateAttr = el.getAttribute("data-playback-rate");
     const layerAttr = el.getAttribute("data-layer");
     const volumeAttr = el.getAttribute("data-volume");
     const fxChain = el.getAttribute(HF_AUDIO_FX_ATTR);
@@ -436,7 +474,10 @@ export function parseAudioElements(html: string): AudioElement[] {
       src: el.getAttribute("src") as string,
       start: resolveStart(el),
       end: parseEnd(el.getAttribute("data-end")),
-      mediaStart: mediaStartAttr ? parseFloat(mediaStartAttr) : 0,
+      mediaStart: readMediaStart(el),
+      playbackRate: normalizePlaybackRate(
+        playbackRateAttr ? parseFloat(playbackRateAttr) : Number.NaN,
+      ),
       layer: layerAttr ? parseInt(layerAttr) : 0,
       volume: volumeAttr ? parseFloat(volumeAttr) : 1.0,
       ...(fxChain ? { fxChain } : {}),
@@ -448,12 +489,14 @@ export function parseAudioElements(html: string): AudioElement[] {
   for (const el of document.querySelectorAll("audio[id][src]")) {
     const id = el.getAttribute("id");
     if (!id || !el.getAttribute("src") || isHidden(el)) continue;
+    if (isKnownInactiveTimelineWindow(el, resolveStart(el))) continue;
     elements.push(build(el, id, "audio"));
   }
 
   for (const el of document.querySelectorAll('video[id][src][data-has-audio="true"]')) {
     const id = el.getAttribute("id");
     if (!id || !el.getAttribute("src") || isHidden(el)) continue;
+    if (isKnownInactiveTimelineWindow(el, resolveStart(el))) continue;
     elements.push(build(el, `${id}-audio`, "video"));
   }
 
@@ -463,7 +506,7 @@ export function parseAudioElements(html: string): AudioElement[] {
 async function extractAudioFromVideo(
   videoPath: string,
   outputPath: string,
-  options?: { startTime?: number; duration?: number },
+  options?: { startTime?: number; duration?: number; playbackRate?: number },
   signal?: AbortSignal,
   config?: Partial<Pick<EngineConfig, "ffmpegProcessTimeout">>,
 ): Promise<ExtractResult> {
@@ -471,11 +514,17 @@ async function extractAudioFromVideo(
   const outputDir = dirname(outputPath);
   if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
 
-  const args: string[] = ["-i", videoPath];
+  const playbackRate = normalizePlaybackRate(options?.playbackRate ?? 1);
+  const args: string[] = [];
   if (options?.startTime !== undefined) args.push("-ss", String(options.startTime));
-  if (options?.duration !== undefined) args.push("-t", String(options.duration));
-  const channelArgs = await stereoOutputArgs(videoPath);
-  args.push("-vn", "-acodec", "pcm_s16le", "-ar", "48000", ...channelArgs, "-y", outputPath);
+  if (options?.duration !== undefined) args.push("-t", String(options.duration * playbackRate));
+  args.push("-i", videoPath);
+  const outputArgs = await preparedAudioOutputArgs(videoPath, playbackRate);
+  args.push("-vn", "-acodec", "pcm_s16le", "-ar", "48000", ...outputArgs);
+  if (playbackRate !== 1 && options?.duration !== undefined) {
+    args.push("-t", String(options.duration));
+  }
+  args.push("-y", outputPath);
 
   const result = await runFfmpeg(args, { signal, timeout: ffmpegProcessTimeout });
 
@@ -513,29 +562,31 @@ async function prepareAudioTrack(
   outputPath: string,
   mediaStart: number,
   duration: number,
+  playbackRate = 1,
   signal?: AbortSignal,
   config?: Partial<Pick<EngineConfig, "ffmpegProcessTimeout">>,
 ): Promise<ExtractResult> {
   const ffmpegProcessTimeout = config?.ffmpegProcessTimeout ?? DEFAULT_CONFIG.ffmpegProcessTimeout;
   const outputDir = dirname(outputPath);
   if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
-  const channelArgs = await stereoOutputArgs(srcPath);
+  const normalizedPlaybackRate = normalizePlaybackRate(playbackRate);
+  const outputArgs = await preparedAudioOutputArgs(srcPath, normalizedPlaybackRate);
 
   const args = [
     "-ss",
     String(mediaStart),
     "-t",
-    String(duration),
+    String(duration * normalizedPlaybackRate),
     "-i",
     srcPath,
     "-acodec",
     "pcm_s16le",
     "-ar",
     "48000",
-    ...channelArgs,
-    "-y",
-    outputPath,
+    ...outputArgs,
   ];
+  if (normalizedPlaybackRate !== 1) args.push("-t", String(duration));
+  args.push("-y", outputPath);
 
   const result = await runFfmpeg(args, { signal, timeout: ffmpegProcessTimeout });
 
@@ -888,7 +939,9 @@ export async function processCompositionAudio(
             );
             return;
           }
-          const effectiveDuration = metadata.durationSeconds - element.mediaStart;
+          const effectiveDuration =
+            (metadata.durationSeconds - element.mediaStart) /
+            normalizePlaybackRate(element.playbackRate ?? 1);
           element.end =
             element.start + (effectiveDuration > 0 ? effectiveDuration : metadata.durationSeconds);
         }
@@ -902,6 +955,7 @@ export async function processCompositionAudio(
             {
               startTime: element.mediaStart,
               duration: element.end - element.start,
+              playbackRate: element.playbackRate,
             },
             effectiveSignal,
             config,
@@ -929,6 +983,7 @@ export async function processCompositionAudio(
             trimmedPath,
             element.mediaStart,
             element.end - element.start,
+            element.playbackRate,
             effectiveSignal,
             config,
           );
diff --git a/packages/engine/src/services/audioMixer.types.ts b/packages/engine/src/services/audioMixer.types.ts
index 3a0dbe626..5879972fd 100644
--- a/packages/engine/src/services/audioMixer.types.ts
+++ b/packages/engine/src/services/audioMixer.types.ts
@@ -9,6 +9,8 @@ export interface AudioElement {
   start: number;
   end: number;
   mediaStart: number;
+  /** Constant normalized source-time multiplier (0.1..5). */
+  playbackRate?: number;
   layer: number;
   volume?: number;
   volumeKeyframes?: AudioVolumeKeyframe[];
diff --git a/packages/engine/src/services/mediaTimelineWindow.test.ts b/packages/engine/src/services/mediaTimelineWindow.test.ts
new file mode 100644
index 000000000..c6e922655
--- /dev/null
+++ b/packages/engine/src/services/mediaTimelineWindow.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { isKnownInactiveTimelineWindow } from "./mediaTimelineWindow.js";
+
+const elementWith = (name: "data-duration" | "data-end", value: string) => ({
+  getAttribute(attribute: string) {
+    return attribute === name ? value : null;
+  },
+});
+
+describe("isKnownInactiveTimelineWindow strict numeric attributes", () => {
+  it.each([
+    ["", false],
+    ["   ", false],
+    ["0s", false],
+    ["0abc", false],
+    ["0px", false],
+    ["-1s", false],
+    ["0x10", false],
+    ["Infinity", false],
+    ["NaN", false],
+    ["0", true],
+    ["-1", true],
+    ["5", false],
+  ])("treats data-duration=%j consistently (inactive=%s)", (raw, inactive) => {
+    expect(isKnownInactiveTimelineWindow(elementWith("data-duration", raw), 2)).toBe(inactive);
+  });
+
+  it.each([
+    ["", false],
+    ["2s", false],
+    ["2abc", false],
+    ["0x10", false],
+    ["Infinity", false],
+    ["2", true],
+    ["-1", true],
+    ["5", false],
+  ])("treats data-end=%j consistently (inactive=%s)", (raw, inactive) => {
+    expect(isKnownInactiveTimelineWindow(elementWith("data-end", raw), 2)).toBe(inactive);
+  });
+});
diff --git a/packages/engine/src/services/mediaTimelineWindow.ts b/packages/engine/src/services/mediaTimelineWindow.ts
new file mode 100644
index 000000000..4d92f1952
--- /dev/null
+++ b/packages/engine/src/services/mediaTimelineWindow.ts
@@ -0,0 +1,17 @@
+import { parseStrictFiniteTimingNumber } from "@hyperframes/core";
+
+interface TimelineAttributeReader {
+  getAttribute(name: string): string | null;
+}
+
+/** True only when authored timing explicitly declares an inactive window. */
+export function isKnownInactiveTimelineWindow(
+  element: TimelineAttributeReader,
+  resolvedStart: number,
+): boolean {
+  const duration = parseStrictFiniteTimingNumber(element.getAttribute("data-duration"));
+  if (duration != null && duration <= 0) return true;
+
+  const end = parseStrictFiniteTimingNumber(element.getAttribute("data-end"));
+  return end != null && end <= resolvedStart;
+}
diff --git a/packages/engine/src/services/videoFrameExtractor.test.ts b/packages/engine/src/services/videoFrameExtractor.test.ts
index a5470f14a..da56b301f 100644
--- a/packages/engine/src/services/videoFrameExtractor.test.ts
+++ b/packages/engine/src/services/videoFrameExtractor.test.ts
@@ -36,6 +36,19 @@ import {
   type ExtractedFrames,
   type ExtractionResult,
 } from "./videoFrameExtractor.js";
+
+describe("parseVideoElements strict literal timing", () => {
+  it.each(["", "   ", "0s", "0abc", "0px", "-1s", "Infinity", "NaN", "0x10"])(
+    "does not drop hand-authored data-duration=%j as an explicit zero window",
+    (duration) => {
+      expect(
+        parseVideoElements(
+          `<video id="v" src="clip.mp4" data-start="0" data-duration="${duration}"></video>`,
+        ),
+      ).toHaveLength(1);
+    },
+  );
+});
 import {
   extractFinalVideoFrameTimestamp,
   extractVideoMetadata,
@@ -75,6 +88,7 @@ describe("resolveVideoExtractionDuration", () => {
     start: 0,
     end: Number.POSITIVE_INFINITY,
     mediaStart: 0,
+    playbackRate: 1,
     loop: false,
     hasAudio: false,
     ...overrides,
@@ -98,6 +112,32 @@ describe("resolveVideoExtractionDuration", () => {
     expect(explicitLoop.loop).toBe(true);
   });
 
+  it("extracts the source span consumed by an explicit 2x timeline slot", () => {
+    expect(
+      resolveVideoExtractionWindow(
+        video({ end: 2, mediaStart: 1, playbackRate: 2 }),
+        metadata(8),
+        2,
+      ),
+    ).toMatchObject({
+      compositionStart: 0,
+      mediaStart: 1,
+      durationSeconds: 4,
+      timelineDurationSeconds: 2,
+    });
+  });
+
+  it("reports natural timeline duration after constant playback-rate retiming", () => {
+    expect(
+      resolveVideoExtractionWindow(video({ mediaStart: 1, playbackRate: 2 }), metadata(5), 10),
+    ).toMatchObject({
+      compositionStart: 0,
+      mediaStart: 1,
+      durationSeconds: 4,
+      timelineDurationSeconds: 2,
+    });
+  });
+
   it("trims materially negative preroll and advances the source offset", () => {
     const preroll = video({ start: -60, end: 120, mediaStart: 0 });
     expect(resolveVideoExtractionWindow(preroll, metadata(120), 2)).toEqual({
@@ -648,6 +688,65 @@ describe("resolveProjectRelativeSrc — sub-composition path clamping", () => {
 });
 
 describe("parseVideoElements", () => {
+  it.each([
+    {
+      label: "valueless playback-start",
+      attributes: 'data-playback-start data-media-start="1.5"',
+      expected: 1.5,
+    },
+    {
+      label: "empty playback-start",
+      attributes: 'data-playback-start="" data-media-start="1.5"',
+      expected: 1.5,
+    },
+    {
+      label: "whitespace playback-start",
+      attributes: 'data-playback-start="   " data-media-start="1.5"',
+      expected: 1.5,
+    },
+    {
+      label: "invalid playback-start",
+      attributes: 'data-playback-start="later" data-media-start="1.5"',
+      expected: 1.5,
+    },
+    { label: "missing media-start", attributes: "", expected: 0 },
+    { label: "invalid media-start", attributes: 'data-media-start="later"', expected: 0 },
+    {
+      label: "negative playback-start",
+      attributes: 'data-playback-start="-1" data-media-start="1.5"',
+      expected: 1.5,
+    },
+    { label: "negative media-start", attributes: 'data-media-start="-1"', expected: 0 },
+    {
+      label: "finite playback-start",
+      attributes: 'data-playback-start="2.25" data-media-start="1.5"',
+      expected: 2.25,
+    },
+    {
+      label: "zero playback-start",
+      attributes: 'data-playback-start="0" data-media-start="1.5"',
+      expected: 0,
+    },
+  ])("uses finite playback-start -> media-start -> 0 for $label", ({ attributes, expected }) => {
+    const [video] = parseVideoElements(`<video id="hero" src="clip.mp4" ${attributes}></video>`);
+
+    expect(video?.mediaStart).toBe(expected);
+  });
+
+  it("parses and normalizes constant playback rate for final rendering", () => {
+    const [fast, low, high, invalid] = parseVideoElements(
+      '<video id="fast" src="clip.mp4" data-playback-rate="2"></video>' +
+        '<video id="low" src="clip.mp4" data-playback-rate="0.01"></video>' +
+        '<video id="high" src="clip.mp4" data-playback-rate="20"></video>' +
+        '<video id="invalid" src="clip.mp4" data-playback-rate="nope"></video>',
+    );
+
+    expect(fast?.playbackRate).toBe(2);
+    expect(low?.playbackRate).toBe(0.1);
+    expect(high?.playbackRate).toBe(5);
+    expect(invalid?.playbackRate).toBe(1);
+  });
+
   it("parses videos without an id or data-start attribute", () => {
     const videos = parseVideoElements('<video src="clip.mp4"></video>');
 
@@ -675,6 +774,7 @@ describe("parseVideoElements", () => {
       start: 2,
       end: 7,
       mediaStart: 1.5,
+      playbackRate: 1,
       loop: false,
       hasAudio: true,
     });
@@ -815,6 +915,15 @@ describe("FrameLookupTable", () => {
     expect(table.getActiveFramePayloads(4.5).get("hero")?.frameIndex).toBe(15);
   });
 
+  it("selects source frames at the authored constant playback rate", () => {
+    const videos = parseVideoElements(
+      '<video id="hero" src="clip.webm" data-start="0" data-duration="2" data-playback-rate="2"></video>',
+    );
+    const table = createFrameLookupTable(videos, [fakeExtracted(120, 30)]);
+
+    expect(table.getActiveFramePayloads(1).get("hero")?.frameIndex).toBe(60);
+  });
+
   it("wraps at video-stream EOF when a mux container has longer audio", () => {
     const extracted = fakeExtracted(6, 2);
     extracted.metadata.durationSeconds = 60;
@@ -1567,6 +1676,27 @@ describe.skipIf(!HAS_FFMPEG)("extractAllVideoFrames on a VFR source", () => {
     expect(md.isVFR).toBe(true);
   });
 
+  it.each([
+    ["compiled EOF", 4, 1],
+    ["compiled past EOF", 5, 2],
+    ["ordinary explicit zero", 6, 0],
+  ])(
+    "drops a known zero timeline window without extraction or error: %s",
+    async (label, start, mediaStart) => {
+      const src = await synthCfrClip(`zero-window-${label.replaceAll(" ", "-")}.mp4`, 1);
+      const videos = parseVideoElements(
+        `<video id="zero-window" src="${src}" data-start="${start}" data-duration="0" data-end="${start}" data-media-start="${mediaStart}" muted></video>`,
+      );
+      const outputDir = join(FIXTURE_DIR, `out-zero-window-${label.replaceAll(" ", "-")}`);
+      const result = await extractAllVideoFrames(videos, FIXTURE_DIR, { fps: 30, outputDir });
+
+      expect(result.errors).toEqual([]);
+      expect(result.extracted).toEqual([]);
+      expect(result.totalFramesExtracted).toBe(0);
+      expect(videos).toEqual([]);
+    },
+  );
+
   it("passes an exact 24000/1001 rate through VFR normalization", async () => {
     const outputDir = join(FIXTURE_DIR, "out-vfr-ntsc-boundary");
     mkdirSync(outputDir, { recursive: true });
diff --git a/packages/engine/src/services/videoFrameExtractor.ts b/packages/engine/src/services/videoFrameExtractor.ts
index 1ecc62d4e..7782d9dec 100644
--- a/packages/engine/src/services/videoFrameExtractor.ts
+++ b/packages/engine/src/services/videoFrameExtractor.ts
@@ -14,10 +14,14 @@ import {
   fpsToFfmpegArg,
   fpsToNumber,
   MEDIA_DURATION_CLAMP_EPSILON_SECONDS,
+  normalizePlaybackRate,
+  parseStrictFiniteTimingNumber,
+  readMediaStart,
   toFps,
   type FpsInput,
 } from "@hyperframes/core";
 import { resolveReferencedStart, type RefResolverEl } from "./referenceResolver.js";
+import { isKnownInactiveTimelineWindow } from "./mediaTimelineWindow.js";
 import {
   extractFinalVideoFrameTimestamp,
   extractMediaMetadata,
@@ -57,6 +61,7 @@ export interface VideoElement {
   start: number;
   end: number;
   mediaStart: number;
+  playbackRate?: number;
   loop: boolean;
   hasAudio: boolean;
 }
@@ -542,7 +547,7 @@ export function parseVideoElements(html: string): VideoElement[] {
     const startAttr = el.getAttribute("data-start");
     const endAttr = el.getAttribute("data-end");
     const durationAttr = el.getAttribute("data-duration");
-    const mediaStartAttr = el.getAttribute("data-media-start");
+    const playbackRateAttr = el.getAttribute("data-playback-rate");
     const hasAudioAttr = el.getAttribute("data-has-audio");
 
     // Resolve data-start, including relative references ("intro", "intro + 2")
@@ -551,16 +556,19 @@ export function parseVideoElements(html: string): VideoElement[] {
     // blank in the final render. `startAttr` may be a plain number or a
     // reference; the resolver handles both.
     const start = startAttr ? resolveReferencedStart(document, el, startCache, visiting) : 0;
+    if (isKnownInactiveTimelineWindow(el, start)) continue;
     // Derive end from data-end → data-start+data-duration → Infinity (natural duration).
     // Static compilation cannot always clamp root media because GSAP may supply
     // the root duration at runtime. The producer passes the resolved timeline
     // end into frame extraction, which caps the source duration only after the
     // natural duration is known without rewriting authored timing metadata.
     let end = 0;
-    if (endAttr) {
-      end = parseFloat(endAttr);
-    } else if (durationAttr) {
-      end = start + parseFloat(durationAttr);
+    const authoredEnd = parseStrictFiniteTimingNumber(endAttr);
+    const authoredDuration = parseStrictFiniteTimingNumber(durationAttr);
+    if (authoredEnd != null) {
+      end = authoredEnd;
+    } else if (authoredDuration != null) {
+      end = start + authoredDuration;
     } else {
       end = Infinity; // no explicit bounds — play for the full natural video duration
     }
@@ -570,7 +578,10 @@ export function parseVideoElements(html: string): VideoElement[] {
       src,
       start,
       end,
-      mediaStart: mediaStartAttr ? parseFloat(mediaStartAttr) : 0,
+      mediaStart: readMediaStart(el),
+      playbackRate: normalizePlaybackRate(
+        playbackRateAttr ? parseFloat(playbackRateAttr) : Number.NaN,
+      ),
       loop: el.hasAttribute("loop"),
       hasAudio: hasAudioAttr === "true",
     });
@@ -611,10 +622,12 @@ export function parseImageElements(html: string): ImageElement[] {
     // referenced image start doesn't become NaN and drop the image from the render.
     const start = startAttr ? resolveReferencedStart(document, el, startCache, visiting) : 0;
     let end = 0;
-    if (endAttr) {
-      end = parseFloat(endAttr);
-    } else if (durationAttr) {
-      end = start + parseFloat(durationAttr);
+    const authoredEnd = parseStrictFiniteTimingNumber(endAttr);
+    const authoredDuration = parseStrictFiniteTimingNumber(durationAttr);
+    if (authoredEnd != null) {
+      end = authoredEnd;
+    } else if (authoredDuration != null) {
+      end = start + authoredDuration;
     } else {
       end = Infinity;
     }
@@ -870,6 +883,8 @@ export interface TimelineExtractionWindow {
   compositionStart: number;
   mediaStart: number;
   durationSeconds: number;
+  /** Visible duration on the authored composition timeline after retiming. */
+  timelineDurationSeconds?: number;
   /**
    * Preserve the authored timeline origin and mediaStart for lookup. This is
    * required when a looped visible interval crosses a source boundary and
@@ -893,6 +908,7 @@ export interface TimelineExtractionWindow {
 }
 
 type TimelineWindowVideo = Pick<VideoElement, "start" | "end" | "mediaStart"> &
+  Partial<Pick<VideoElement, "playbackRate">> &
   Partial<Pick<VideoElement, "loop">>;
 
 // Logical duration assigned to a one-frame held-tail representation. This is
@@ -916,50 +932,67 @@ export function resolveTimelineExtractionWindow(
   timelineEnd?: number,
   sourceDuration?: number,
 ): TimelineExtractionWindow {
+  const playbackRate = normalizePlaybackRate(video.playbackRate ?? 1);
+  const withTimelineDuration = (
+    window: TimelineExtractionWindow,
+    timelineDurationSeconds: number,
+  ): TimelineExtractionWindow =>
+    playbackRate === 1 ? window : { ...window, timelineDurationSeconds };
   if (timelineEnd === undefined) {
-    return {
-      compositionStart: video.start,
-      mediaStart: video.mediaStart,
-      durationSeconds: resolvedDuration,
-    };
+    return withTimelineDuration(
+      {
+        compositionStart: video.start,
+        mediaStart: video.mediaStart,
+        durationSeconds: resolvedDuration * playbackRate,
+      },
+      resolvedDuration,
+    );
   }
   if (!Number.isFinite(timelineEnd)) {
     throw new Error(`Video extraction timelineEnd must be finite; got ${String(timelineEnd)}`);
   }
   const compositionStart = Math.max(0, video.start);
   const trimmedPreroll = compositionStart - video.start;
+  const trimmedSourcePreroll = trimmedPreroll * playbackRate;
   const timelineDuration = Math.max(0, timelineEnd - compositionStart);
   // Infinity means "natural source duration", not an authored infinite slot.
   // Explicit finite slots may outlive the source (loop or held tail), while an
   // omitted duration remains source-bounded exactly like the browser runtime.
   const resolvedVisibleDuration = resolvedDuration - trimmedPreroll;
   const visibleDuration = Math.max(0, Math.min(resolvedVisibleDuration, timelineDuration));
-  let mediaStart = video.mediaStart + trimmedPreroll;
+  const visibleSourceDuration = visibleDuration * playbackRate;
+  let mediaStart = video.mediaStart + trimmedSourcePreroll;
   if (visibleDuration > 0 && sourceDuration !== undefined) {
     const sourceRemaining = Math.max(0, sourceDuration - video.mediaStart);
     if (sourceRemaining > 0 && video.loop && Number.isFinite(video.end)) {
-      const phaseOffset = trimmedPreroll % sourceRemaining;
+      const phaseOffset = trimmedSourcePreroll % sourceRemaining;
       const phaseRemaining = sourceRemaining - phaseOffset;
       // The element visibility contract includes its end boundary. Preserve a
       // complete cycle on equality as well, otherwise a rebased suffix would
       // wrap to its own first frame instead of the source cycle's first frame.
-      if (visibleDuration >= phaseRemaining) {
-        return {
-          compositionStart: video.start,
-          mediaStart: video.mediaStart,
-          durationSeconds: sourceRemaining,
-          preserveTimelinePhase: true,
-        };
+      if (visibleSourceDuration >= phaseRemaining) {
+        return withTimelineDuration(
+          {
+            compositionStart: video.start,
+            mediaStart: video.mediaStart,
+            durationSeconds: sourceRemaining,
+            preserveTimelinePhase: true,
+          },
+          visibleDuration,
+        );
       }
       mediaStart = video.mediaStart + phaseOffset;
     } else if (sourceRemaining > 0) {
-      const sourceVisibleAfterPreroll = Math.max(0, sourceRemaining - trimmedPreroll);
-      if (visibleDuration <= sourceVisibleAfterPreroll) {
-        return {
-          compositionStart,
-          mediaStart,
-          durationSeconds: visibleDuration,
-        };
+      const sourceVisibleAfterPreroll = Math.max(0, sourceRemaining - trimmedSourcePreroll);
+      if (visibleSourceDuration <= sourceVisibleAfterPreroll) {
+        return withTimelineDuration(
+          {
+            compositionStart,
+            mediaStart,
+            durationSeconds: visibleSourceDuration,
+          },
+          visibleDuration,
+        );
       }
 
       // The visible interval enters (or is entirely inside) the held tail.
@@ -971,20 +1004,26 @@ export function resolveTimelineExtractionWindow(
         Math.max(sourceVisibleAfterPreroll, FINAL_FRAME_LOGICAL_DURATION_SECONDS),
       );
       const extractionOffset = sourceRemaining - extractionDuration;
-      return {
-        compositionStart: video.start + extractionOffset,
-        mediaStart: video.mediaStart + extractionOffset,
-        durationSeconds: extractionDuration,
-        preserveTimelineEnd: true,
-        ensureFinalFrame: true,
-      };
+      return withTimelineDuration(
+        {
+          compositionStart: video.start + extractionOffset / playbackRate,
+          mediaStart: video.mediaStart + extractionOffset,
+          durationSeconds: extractionDuration,
+          preserveTimelineEnd: true,
+          ensureFinalFrame: true,
+        },
+        visibleDuration,
+      );
     }
   }
-  return {
-    compositionStart,
-    mediaStart,
-    durationSeconds: visibleDuration,
-  };
+  return withTimelineDuration(
+    {
+      compositionStart,
+      mediaStart,
+      durationSeconds: visibleSourceDuration,
+    },
+    visibleDuration,
+  );
 }
 
 /**
@@ -1018,6 +1057,9 @@ export async function resolveFinalFrameExtractionWindow(
     mediaStart: playableDuration - logicalDuration,
     extractionMediaStart: finalFrameTimestamp,
     durationSeconds: logicalDuration,
+    ...(window.timelineDurationSeconds !== undefined
+      ? { timelineDurationSeconds: window.timelineDurationSeconds }
+      : {}),
     preserveTimelineEnd: true,
     finalFrameOnly: true,
   };
@@ -1046,11 +1088,13 @@ export function resolveVideoExtractionWindow(
       `Video media start ${video.mediaStart}s is outside playable video duration ${playableDuration}s`,
     );
   }
-  const resolvedDuration = resolveSegmentDuration(
-    video.end - video.start,
-    video.mediaStart,
-    playableDuration,
-  );
+  const playbackRate = normalizePlaybackRate(video.playbackRate ?? 1);
+  const requestedTimelineDuration = video.end - video.start;
+  const resolvedDuration =
+    Number.isFinite(requestedTimelineDuration) && requestedTimelineDuration > 0
+      ? requestedTimelineDuration
+      : resolveSegmentDuration(requestedTimelineDuration, video.mediaStart, playableDuration) /
+        playbackRate;
   return resolveTimelineExtractionWindow(video, resolvedDuration, timelineEnd, playableDuration);
 }
 
@@ -1908,7 +1952,7 @@ export async function extractAllVideoFrames(
         if (!window.preserveTimelinePhase) {
           video.start = window.compositionStart;
           if (!window.preserveTimelineEnd) {
-            video.end = window.compositionStart + videoDuration;
+            video.end = window.compositionStart + (window.timelineDurationSeconds ?? videoDuration);
           }
           video.mediaStart = window.mediaStart;
         }
@@ -2054,16 +2098,20 @@ function getFrameIndexAtTime(
   loop = false,
   mediaStart = 0,
   holdLastFrame = false,
+  playbackRate = 1,
 ): number | null {
   let localTime = globalTime - videoStart;
   if (localTime < 0) return null;
-  const loopDuration = Math.max(0, resolvePlayableVideoDuration(extracted.metadata) - mediaStart);
+  const normalizedPlaybackRate = normalizePlaybackRate(playbackRate);
+  const loopDuration =
+    Math.max(0, resolvePlayableVideoDuration(extracted.metadata) - mediaStart) /
+    normalizedPlaybackRate;
   if (loop && loopDuration > 0 && localTime >= loopDuration) {
     localTime %= loopDuration;
   }
   // Add epsilon before flooring to avoid IEEE 754 boundary errors where
   // e.g. 0.28 * 25 === 6.999999999999999 instead of 7.
-  const frameIndex = Math.floor(localTime * extracted.fps + 1e-9);
+  const frameIndex = Math.floor(localTime * normalizedPlaybackRate * extracted.fps + 1e-9);
   if (frameIndex < 0 || extracted.totalFrames <= 0) return null;
   if (frameIndex >= extracted.totalFrames) {
     return loop || holdLastFrame ? extracted.totalFrames - 1 : null;
@@ -2114,6 +2162,7 @@ export class FrameLookupTable {
       end: number;
       mediaStart: number;
       loop: boolean;
+      playbackRate: number;
     }
   > = new Map();
   private orderedVideos: Array<{
@@ -2123,6 +2172,7 @@ export class FrameLookupTable {
     end: number;
     mediaStart: number;
     loop: boolean;
+    playbackRate: number;
   }> = [];
   private activeVideoIds: Set<string> = new Set();
   private startCursor = 0;
@@ -2134,8 +2184,16 @@ export class FrameLookupTable {
     end: number,
     mediaStart: number,
     loop = false,
+    playbackRate = 1,
   ): void {
-    this.videos.set(extracted.videoId, { extracted, start, end, mediaStart, loop });
+    this.videos.set(extracted.videoId, {
+      extracted,
+      start,
+      end,
+      mediaStart,
+      loop,
+      playbackRate: normalizePlaybackRate(playbackRate),
+    });
     this.orderedVideos = Array.from(this.videos.entries())
       .map(([videoId, video]) => ({ videoId, ...video }))
       .sort((a, b) => a.start - b.start);
@@ -2153,6 +2211,7 @@ export class FrameLookupTable {
       video.loop,
       video.mediaStart,
       true,
+      video.playbackRate,
     );
     return frameIndex == null ? null : video.extracted.framePaths.get(frameIndex) || null;
   }
@@ -2222,6 +2281,7 @@ export class FrameLookupTable {
         video.loop,
         video.mediaStart,
         true,
+        video.playbackRate,
       );
       if (frameIndex == null) continue;
       const framePath = video.extracted.framePaths.get(frameIndex);
@@ -2266,7 +2326,9 @@ export function createFrameLookupTable(
 
   for (const video of videos) {
     const ext = extractedMap.get(video.id);
-    if (ext) table.addVideo(ext, video.start, video.end, video.mediaStart, video.loop);
+    if (ext) {
+      table.addVideo(ext, video.start, video.end, video.mediaStart, video.loop, video.playbackRate);
+    }
   }
 
   return table;
diff --git a/packages/producer/scripts/test-classification.mjs b/packages/producer/scripts/test-classification.mjs
index 20ad22f36..a582c4038 100644
--- a/packages/producer/scripts/test-classification.mjs
+++ b/packages/producer/scripts/test-classification.mjs
@@ -22,6 +22,7 @@ const INTEGRATION_TEST_FILES = new Set([
   "src/services/healthWorker.test.ts",
   "src/services/assetMediaType.test.ts",
   "src/services/htmlCompiler.mediaType.test.ts",
+  "src/services/htmlCompiler.naturalDuration.test.ts",
   "src/services/render/stages/compileStage.mediaType.test.ts",
   "src/utils/audioRegression.test.ts",
   "src/utils/streamDurationParity.test.ts",
diff --git a/packages/producer/scripts/test-classification.test.mjs b/packages/producer/scripts/test-classification.test.mjs
index 75652df5e..c7eff14b0 100644
--- a/packages/producer/scripts/test-classification.test.mjs
+++ b/packages/producer/scripts/test-classification.test.mjs
@@ -45,4 +45,15 @@ describe("producer test classification", () => {
       summary.total,
     );
   });
+
+  it("keeps the real-media natural-duration compiler test in the integration lane", () => {
+    const test = discoverProducerTests().find(
+      ({ file }) => file === "src/services/htmlCompiler.naturalDuration.test.ts",
+    );
+    assert.deepEqual(test, {
+      file: "src/services/htmlCompiler.naturalDuration.test.ts",
+      runner: "bun",
+      lane: "integration",
+    });
+  });
 });
diff --git a/packages/producer/src/services/htmlCompiler.naturalDuration.test.ts b/packages/producer/src/services/htmlCompiler.naturalDuration.test.ts
new file mode 100644
index 000000000..9e7136083
--- /dev/null
+++ b/packages/producer/src/services/htmlCompiler.naturalDuration.test.ts
@@ -0,0 +1,133 @@
+import { afterAll, beforeAll, describe, expect, it } from "bun:test";
+import { spawnSync } from "node:child_process";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { parseHTML } from "linkedom";
+import { compileForRender } from "./htmlCompiler.js";
+
+describe("compileForRender natural media duration parity", () => {
+  const projectDir = mkdtempSync(join(tmpdir(), "hf-compiler-natural-duration-"));
+  const sourcePath = join(projectDir, "ten-seconds.mp4");
+  const audioPath = join(projectDir, "ten-seconds.wav");
+
+  beforeAll(() => {
+    const ffmpeg = process.env.HYPERFRAMES_FFMPEG_PATH || "ffmpeg";
+    const generate = (args: string[]) => {
+      const generated = spawnSync(ffmpeg, ["-hide_banner", "-loglevel", "error", ...args], {
+        encoding: "utf8",
+      });
+      if (generated.status !== 0) throw new Error(generated.stderr || "failed to create fixture");
+    };
+    generate([
+      "-f",
+      "lavfi",
+      "-i",
+      "color=c=red:s=16x16:r=1:d=10",
+      "-c:v",
+      "libx264",
+      "-pix_fmt",
+      "yuv420p",
+      "-y",
+      sourcePath,
+    ]);
+    generate([
+      "-f",
+      "lavfi",
+      "-i",
+      "sine=frequency=440:sample_rate=48000:duration=10",
+      "-c:a",
+      "pcm_s16le",
+      "-y",
+      audioPath,
+    ]);
+  });
+
+  afterAll(() => rmSync(projectDir, { recursive: true, force: true }));
+
+  async function compile(media: string) {
+    const htmlPath = join(projectDir, "index.html");
+    writeFileSync(
+      htmlPath,
+      `<!doctype html><html><body><main data-composition-id="root" data-start="0" data-duration="100" data-width="16" data-height="16">${media}</main></body></html>`,
+    );
+    const result = await compileForRender(projectDir, htmlPath, projectDir, {
+      allowSystemFontCapture: false,
+    });
+    return { result, document: parseHTML(result.html).document };
+  }
+
+  it("uses shared playback-rate parsing for duration-less video and audio", async () => {
+    const cases = [
+      ["video-rate-2", "video", 'data-playback-rate="2"', 5],
+      ["video-rate-2x", "video", 'data-playback-rate="2x"', 5],
+      ["video-rate-0x2", "video", 'data-playback-rate="0x2"', 10],
+      ["audio-rate-2x", "audio", 'data-playback-rate="2x"', 5],
+    ] as const;
+    const tags = cases
+      .map(
+        ([id, tag, attrs]) =>
+          `<${tag} id="${id}" src="${tag === "audio" ? "ten-seconds.wav" : "ten-seconds.mp4"}" data-start="0" ${attrs}></${tag}>`,
+      )
+      .join("");
+    const { document } = await compile(tags);
+
+    for (const [id, , , expected] of cases) {
+      const element = document.getElementById(id)!;
+      expect(Number(element.getAttribute("data-duration"))).toBeCloseTo(expected, 3);
+      expect(Number(element.getAttribute("data-end"))).toBeCloseTo(expected, 3);
+    }
+  });
+
+  it("uses shared playback-start precedence and fallback semantics", async () => {
+    const cases = [
+      ["precedence", 'data-playback-start="2" data-media-start="7"', 8],
+      ["empty", 'data-playback-start="" data-media-start="7"', 3],
+      ["invalid", 'data-playback-start="later" data-media-start="7"', 3],
+      ["negative-playback", 'data-playback-start="-1" data-media-start="7"', 3],
+      ["negative-media", 'data-media-start="-1"', 10],
+    ] as const;
+    const tags = cases
+      .map(
+        ([id, attrs]) => `<video id="${id}" src="ten-seconds.mp4" data-start="0" ${attrs}></video>`,
+      )
+      .join("");
+    const { document } = await compile(tags);
+
+    for (const [id, , expected] of cases) {
+      const element = document.getElementById(id)!;
+      expect(Number(element.getAttribute("data-duration"))).toBeCloseTo(expected, 3);
+      expect(Number(element.getAttribute("data-end"))).toBeCloseTo(expected, 3);
+    }
+  });
+
+  it("injects a known zero span at and past EOF so video and audio are inactive", async () => {
+    const { result, document } = await compile(`
+      <video id="video-eof" src="ten-seconds.mp4" data-start="4" data-media-start="10" muted></video>
+      <video id="video-past" src="ten-seconds.mp4" data-start="5" data-media-start="11" muted></video>
+      <audio id="audio-eof" src="ten-seconds.wav" data-start="6" data-media-start="10"></audio>
+      <audio id="audio-past" src="ten-seconds.wav" data-start="7" data-media-start="11"></audio>`);
+
+    for (const [id, start] of [
+      ["video-eof", 4],
+      ["video-past", 5],
+      ["audio-eof", 6],
+      ["audio-past", 7],
+    ] as const) {
+      const element = document.getElementById(id)!;
+      expect(element.getAttribute("data-duration")).toBe("0");
+      expect(element.getAttribute("data-end")).toBe(String(start));
+    }
+    expect(result.videos).toEqual([]);
+    expect(result.audios).toEqual([]);
+  });
+
+  it("keeps explicit data-duration authoritative", async () => {
+    const { document } = await compile(
+      '<video id="explicit" src="ten-seconds.mp4" data-start="2" data-duration="7" data-playback-rate="2"></video>',
+    );
+    const element = document.getElementById("explicit")!;
+    expect(element.getAttribute("data-duration")).toBe("7");
+    expect(element.getAttribute("data-end")).toBe("9");
+  });
+});
diff --git a/packages/producer/src/services/htmlCompiler.test.ts b/packages/producer/src/services/htmlCompiler.test.ts
index e4de83b37..9026e4db0 100644
--- a/packages/producer/src/services/htmlCompiler.test.ts
+++ b/packages/producer/src/services/htmlCompiler.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it, mock, beforeAll } from "bun:test";
 import { mkdtempSync, writeFileSync, mkdirSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
+import { runInThisContext } from "node:vm";
 import { parseHTML } from "linkedom";
 import { interpolateVolumeGain } from "@hyperframes/core/media-volume-envelope";
 import { defaultLogger } from "../logger.js";
@@ -22,11 +23,16 @@ import {
   localizeRemoteImageSources,
   localizeRemoteFontFaces,
   recompileWithResolutions,
+  resolveCompositionDurations,
 } from "./htmlCompiler.js";
 import { validateNoSystemFonts } from "./render/planValidation.js";
 
 describe("discoverMediaFromBrowser", () => {
-  async function discover(html: string, currentSrcById: Record<string, string>) {
+  async function discover(
+    html: string,
+    currentSrcById: Record<string, string>,
+    serializeCallback = false,
+  ) {
     const { document } = parseHTML(html);
     for (const [id, currentSrc] of Object.entries(currentSrcById)) {
       const element = document.getElementById(id);
@@ -35,7 +41,13 @@ describe("discoverMediaFromBrowser", () => {
     const previousDocument = Reflect.get(globalThis, "document");
     Reflect.set(globalThis, "document", document);
     try {
-      return await discoverMediaFromBrowser({ evaluate: async (collect) => collect() } as never);
+      return await discoverMediaFromBrowser({
+        evaluate: async (collect) => {
+          if (!serializeCallback) return collect();
+          const isolated = runInThisContext(`(${collect.toString()})`) as typeof collect;
+          return isolated();
+        },
+      } as never);
     } finally {
       if (previousDocument === undefined) Reflect.deleteProperty(globalThis, "document");
       else Reflect.set(globalThis, "document", previousDocument);
@@ -84,6 +96,15 @@ describe("discoverMediaFromBrowser", () => {
       src: "https://cdn.example/runtime.avif",
     });
   });
+
+  it("keeps strict timing parsing self-contained after Puppeteer serializes the callback", async () => {
+    const media = await discover(
+      '<video id="clip" src="clip.mp4" data-start="0" data-end="2" data-duration="2" data-media-start="1"></video>',
+      {},
+      true,
+    );
+    expect(media[0]).toMatchObject({ start: 0, end: 2, duration: 2, mediaStart: 1 });
+  });
 });
 
 function validTestMediaResponse(): Response {
@@ -1975,6 +1996,41 @@ h1 { font-size: 2rem; }`;
 });
 
 describe("discoverAudioVolumeAutomationFromTimeline", () => {
+  it("treats trailing-garbage duration as unknown instead of truncating automation sampling", async () => {
+    class TestAudioElement {
+      id = "music";
+      dataset = { start: "0", duration: "5s", volume: "0" };
+      volume = 0;
+    }
+    class TestVideoElement {}
+    const audio = new TestAudioElement();
+    const previous = {
+      window: globalThis.window,
+      document: globalThis.document,
+      audio: globalThis.HTMLAudioElement,
+      video: globalThis.HTMLVideoElement,
+    };
+    globalThis.window = {
+      __timelines: { root: { totalTime: (time: number) => (audio.volume = time < 7 ? 0 : 1) } },
+    } as any;
+    globalThis.document = {
+      querySelector: () => ({ getAttribute: () => "root" }),
+      getElementById: () => audio,
+    } as any;
+    globalThis.HTMLAudioElement = TestAudioElement as any;
+    globalThis.HTMLVideoElement = TestVideoElement as any;
+    try {
+      const page = { evaluate: async (fn: (arg: any) => unknown, arg: unknown) => fn(arg) } as any;
+      const [automation] = await discoverAudioVolumeAutomationFromTimeline(page, ["music"], 10, 1);
+      expect(automation?.keyframes).toContainEqual({ time: 7, volume: 1 });
+    } finally {
+      globalThis.window = previous.window;
+      globalThis.document = previous.document;
+      globalThis.HTMLAudioElement = previous.audio;
+      globalThis.HTMLVideoElement = previous.video;
+    }
+  });
+
   it("emits plateau boundaries around a sampled volume change", async () => {
     class TestAudioElement {
       id = "music";
@@ -2095,6 +2151,55 @@ describe("discoverAudioVolumeAutomationFromTimeline", () => {
   });
 });
 
+describe("resolveCompositionDurations strict literal timing", () => {
+  it("falls through whitespace data-duration to a valid composition duration", async () => {
+    const previousDocument = globalThis.document;
+    const previousWindow = globalThis.window;
+    globalThis.window = { __timelines: {} } as any;
+    globalThis.document = {
+      getElementById: () => ({
+        getAttribute: (name: string) =>
+          name === "data-duration" ? "   " : name === "data-composition-duration" ? "5" : null,
+      }),
+    } as any;
+    try {
+      const page = {
+        evaluate: async (fn: (arg: unknown) => unknown, arg: unknown) => fn(arg),
+      } as any;
+      const result = await resolveCompositionDurations(page, [
+        { id: "scene", tagName: "div", start: 0, mediaStart: 0, playbackRate: 1 },
+      ]);
+      expect(result).toEqual([{ id: "scene", duration: 5 }]);
+    } finally {
+      globalThis.document = previousDocument;
+      globalThis.window = previousWindow;
+    }
+  });
+
+  it("does not partially parse trailing-garbage composition duration", async () => {
+    const previousDocument = globalThis.document;
+    const previousWindow = globalThis.window;
+    globalThis.window = { __timelines: {} } as any;
+    globalThis.document = {
+      getElementById: () => ({
+        getAttribute: (name: string) => (name === "data-composition-duration" ? "5s" : null),
+      }),
+    } as any;
+    try {
+      const page = {
+        evaluate: async (fn: (arg: unknown) => unknown, arg: unknown) => fn(arg),
+      } as any;
+      const result = await resolveCompositionDurations(page, [
+        { id: "scene", tagName: "div", start: 0, mediaStart: 0, playbackRate: 1 },
+      ]);
+      expect(result).toEqual([]);
+    } finally {
+      globalThis.document = previousDocument;
+      globalThis.window = previousWindow;
+    }
+  });
+});
+
 describe("sub-composition variable injection (render path, #2064)", () => {
   function writeSubCompVarProject(hostVars: string): string {
     const projectDir = mkdtempSync(join(tmpdir(), "hf-subvar-"));
diff --git a/packages/producer/src/services/htmlCompiler.ts b/packages/producer/src/services/htmlCompiler.ts
index ff8fe7a0b..b11736c4c 100644
--- a/packages/producer/src/services/htmlCompiler.ts
+++ b/packages/producer/src/services/htmlCompiler.ts
@@ -21,6 +21,9 @@ import {
   shouldClampResolvedMediaDuration,
   CSS_URL_RE,
   isNonRelativeUrl,
+  parseStrictFiniteTimingNumber,
+  readMediaStart,
+  resolveNaturalMediaTimelineDurationFromValues,
   type ResolvedDuration,
   type UnresolvedElement,
 } from "@hyperframes/core";
@@ -421,12 +424,13 @@ export function detectShaderTransitionUsage(html: string): boolean {
 async function resolveMediaDuration(
   src: string,
   mediaStart: number,
+  playbackRate: number,
   baseDir: string,
   downloadDir: string,
   tagName: string,
   elementIdentity: string,
   log?: ProducerLogger,
-): Promise<{ duration: number; resolvedPath: string }> {
+): Promise<{ duration: number | null; resolvedPath: string }> {
   let filePath = src;
 
   if (isHttpUrl(src)) {
@@ -438,14 +442,14 @@ async function resolveMediaDuration(
     } catch {
       // Download failed (e.g. 404 placeholder URL) — skip gracefully.
       // The element will get duration 0 and be excluded from the render.
-      return { duration: 0, resolvedPath: src };
+      return { duration: null, resolvedPath: src };
     }
   } else if (!filePath.startsWith("/")) {
     filePath = join(baseDir, filePath);
   }
 
   if (!existsSync(filePath)) {
-    return { duration: 0, resolvedPath: filePath };
+    return { duration: null, resolvedPath: filePath };
   }
 
   return withMediaProbeSlot(async () => {
@@ -473,7 +477,7 @@ async function resolveMediaDuration(
               "file — the element is dropped from the render. Point it at a rendered media file.",
           );
         }
-        return { duration: 0, resolvedPath: filePath };
+        return { duration: null, resolvedPath: filePath };
       }
       throw error;
     }
@@ -489,13 +493,16 @@ async function resolveMediaDuration(
         // Source file has no audio stream (e.g. a silent video used as an audio src).
         // Return duration 0 so the element is excluded from the composition gracefully,
         // matching how missing files and failed downloads are already handled above.
-        return { duration: 0, resolvedPath: filePath };
+        return { duration: null, resolvedPath: filePath };
       }
     }
 
     const fileDuration = metadata.durationSeconds;
-    const effectiveDuration = fileDuration - mediaStart;
-    const duration = effectiveDuration > 0 ? effectiveDuration : fileDuration;
+    const duration = resolveNaturalMediaTimelineDurationFromValues(
+      fileDuration,
+      mediaStart,
+      playbackRate,
+    );
 
     return { duration, resolvedPath: filePath };
   });
@@ -525,6 +532,7 @@ async function compileHtmlFile(
       resolveMediaDuration(
         el.src!,
         el.mediaStart,
+        el.playbackRate,
         baseDir,
         downloadDir,
         el.tagName,
@@ -533,7 +541,9 @@ async function compileHtmlFile(
       ).then(({ duration }) => ({ id: el.id, duration })),
     ),
   );
-  const resolutions: ResolvedDuration[] = resolvedResults.filter((r) => r.duration > 0);
+  const resolutions: ResolvedDuration[] = resolvedResults.filter(
+    (r): r is ResolvedDuration => r.duration != null && Number.isFinite(r.duration),
+  );
 
   let compiledHtml =
     resolutions.length > 0 ? injectDurations(staticCompiled, resolutions) : staticCompiled;
@@ -548,6 +558,7 @@ async function compileHtmlFile(
         const { duration: maxDuration } = await resolveMediaDuration(
           el.src!,
           el.mediaStart,
+          el.playbackRate,
           baseDir,
           downloadDir,
           el.tagName,
@@ -560,7 +571,7 @@ async function compileHtmlFile(
   const clampList: ResolvedDuration[] = [];
   for (const r of clampResults) {
     if (
-      r.maxDuration > 0 &&
+      r.maxDuration != null &&
       shouldClampResolvedMediaDuration(r.tagName, r.duration, r.maxDuration)
     ) {
       clampList.push({ id: r.id, duration: r.maxDuration });
@@ -646,8 +657,7 @@ async function parseSubCompositions(
     if (!srcPath) continue;
 
     const elStart = parseFloat(el.getAttribute("data-start") || "0");
-    const elEndRaw = el.getAttribute("data-end");
-    const elEnd = elEndRaw ? parseFloat(elEndRaw) : Infinity;
+    const elEnd = parseStrictFiniteTimingNumber(el.getAttribute("data-end")) ?? Infinity;
 
     const absoluteStart = parentOffset + elStart;
     const absoluteEnd = Math.min(parentEnd, isFinite(elEnd) ? parentOffset + elEnd : Infinity);
@@ -2070,11 +2080,9 @@ export async function compileForRender(
 
   // Static duration (may be 0 if set at runtime by GSAP)
   const staticDuration = rootEl
-    ? parseFloat(
-        rootEl.getAttribute("data-duration") ||
-          rootEl.getAttribute("data-composition-duration") ||
-          "0",
-      )
+    ? (parseStrictFiniteTimingNumber(rootEl.getAttribute("data-duration")) ??
+      parseStrictFiniteTimingNumber(rootEl.getAttribute("data-composition-duration")) ??
+      0)
     : 0;
 
   return {
@@ -2126,12 +2134,13 @@ export async function discoverMediaFromBrowser(page: Page): Promise<BrowserMedia
   const elements = await page.evaluate(() => {
     const results: {
       id: string;
-      tagName: string;
+      tagName: "video" | "audio" | "image";
       src: string;
       start: number;
-      end: number;
-      duration: number;
-      mediaStart: number;
+      endRaw: string | null;
+      durationRaw: string | null;
+      playbackStartRaw: string | null;
+      mediaStartRaw: string | null;
       loop: boolean;
       hasAudio: boolean;
       volume: number;
@@ -2156,15 +2165,21 @@ export async function discoverMediaFromBrowser(page: Page): Promise<BrowserMedia
     mediaEls.forEach((el) => {
       const htmlEl = el as HTMLVideoElement | HTMLAudioElement | HTMLImageElement;
       const isImage = htmlEl.tagName.toLowerCase() === "img";
+      const tagName: "video" | "audio" | "image" = isImage
+        ? "image"
+        : htmlEl.tagName.toLowerCase() === "video"
+          ? "video"
+          : "audio";
       const id = htmlEl.id || (isImage ? autoImageIds.get(htmlEl) : undefined);
       if (!id) return;
 
       // currentSrc is authoritative for <video>/<audio><source> and responsive images.
       const src = htmlEl.currentSrc || htmlEl.src || htmlEl.getAttribute("src") || "";
       const start = parseFloat(htmlEl.getAttribute("data-start") || "0");
-      const end = parseFloat(htmlEl.getAttribute("data-end") || "0");
-      const duration = parseFloat(htmlEl.getAttribute("data-duration") || "0");
-      const mediaStart = parseFloat(htmlEl.getAttribute("data-media-start") || "0");
+      const endRaw = htmlEl.getAttribute("data-end");
+      const durationRaw = htmlEl.getAttribute("data-duration");
+      const playbackStartRaw = htmlEl.getAttribute("data-playback-start");
+      const mediaStartRaw = htmlEl.getAttribute("data-media-start");
       const loop = htmlEl.hasAttribute("loop");
       const hasAudio = htmlEl.getAttribute("data-has-audio") === "true";
       const volume = parseFloat(htmlEl.getAttribute("data-volume") || "1");
@@ -2174,12 +2189,13 @@ export async function discoverMediaFromBrowser(page: Page): Promise<BrowserMedia
 
       results.push({
         id,
-        tagName: isImage ? "image" : htmlEl.tagName.toLowerCase(),
+        tagName,
         src,
         start,
-        end,
-        duration,
-        mediaStart,
+        endRaw,
+        durationRaw,
+        playbackStartRaw,
+        mediaStartRaw,
         loop,
         hasAudio,
         volume,
@@ -2190,7 +2206,18 @@ export async function discoverMediaFromBrowser(page: Page): Promise<BrowserMedia
     return results;
   });
 
-  return elements as BrowserMediaElement[];
+  return elements.map(({ endRaw, durationRaw, playbackStartRaw, mediaStartRaw, ...element }) => ({
+    ...element,
+    end: parseStrictFiniteTimingNumber(endRaw) ?? 0,
+    duration: parseStrictFiniteTimingNumber(durationRaw) ?? 0,
+    mediaStart: readMediaStart({
+      getAttribute(name: string) {
+        if (name === "data-playback-start") return playbackStartRaw;
+        if (name === "data-media-start") return mediaStartRaw;
+        return null;
+      },
+    }),
+  }));
 }
 
 export async function discoverAudioVolumeAutomationFromTimeline(
@@ -2202,8 +2229,34 @@ export async function discoverAudioVolumeAutomationFromTimeline(
   if (audioIds.length === 0 || compositionDuration <= 0) return [];
 
   const sampleStep = 1 / Math.min(60, Math.max(1, sampleFps));
+  const rawWindows = await page.evaluate((ids: string[]) => {
+    return ids.flatMap((id) => {
+      const el = document.getElementById(id) ?? document.getElementById(id.replace(/-audio$/, ""));
+      if (!(el instanceof HTMLAudioElement) && !(el instanceof HTMLVideoElement)) return [];
+      return [
+        {
+          id,
+          startRaw: el.dataset.start ?? null,
+          endRaw: el.dataset.end ?? null,
+          durationRaw: el.dataset.duration ?? null,
+        },
+      ];
+    });
+  }, audioIds);
+  const clips = rawWindows.map(({ id, startRaw, endRaw, durationRaw }) => {
+    const start = parseStrictFiniteTimingNumber(startRaw) ?? 0;
+    const authoredDuration = parseStrictFiniteTimingNumber(durationRaw);
+    const authoredEnd = parseStrictFiniteTimingNumber(endRaw);
+    const end =
+      authoredDuration != null && authoredDuration > 0
+        ? start + authoredDuration
+        : authoredEnd != null && authoredEnd > start
+          ? authoredEnd
+          : compositionDuration;
+    return { id, start, end };
+  });
   return page.evaluate(
-    ({ ids, duration, step }) => {
+    ({ clips, duration, step }) => {
       const results: { id: string; keyframes: { time: number; volume: number }[] }[] = [];
       const timelines = (window as unknown as { __timelines?: Record<string, unknown> })
         .__timelines;
@@ -2229,20 +2282,11 @@ export async function discoverAudioVolumeAutomationFromTimeline(
         }
       };
 
-      for (const id of ids) {
+      for (const { id, start, end } of clips) {
         const el =
           document.getElementById(id) ?? document.getElementById(id.replace(/-audio$/, ""));
         if (!(el instanceof HTMLAudioElement) && !(el instanceof HTMLVideoElement)) continue;
 
-        const start = Number.parseFloat(el.dataset.start ?? "0") || 0;
-        const endAttr = Number.parseFloat(el.dataset.end ?? "");
-        const durationAttr = Number.parseFloat(el.dataset.duration ?? "");
-        const end =
-          Number.isFinite(durationAttr) && durationAttr > 0
-            ? start + durationAttr
-            : Number.isFinite(endAttr) && endAttr > start
-              ? endAttr
-              : duration;
         const sampleStart = Math.max(0, start);
         const sampleEnd = Math.min(duration, end);
         const initialVolumeAttr = Number.parseFloat(el.dataset.volume ?? "");
@@ -2293,7 +2337,7 @@ export async function discoverAudioVolumeAutomationFromTimeline(
       seekTl(0);
       return results;
     },
-    { ids: audioIds, duration: compositionDuration, step: sampleStep },
+    { clips, duration: compositionDuration, step: sampleStep },
   );
 }
 
@@ -2415,7 +2459,13 @@ export async function resolveCompositionDurations(
   const results = await page.evaluate((compIds: string[]) => {
     const win = window as unknown as { __timelines?: Record<string, { duration(): number }> };
     const timelines = win.__timelines || {};
-    const resolved: { id: string; duration: number; source: string }[] = [];
+    const resolved: {
+      id: string;
+      duration: number;
+      source: string;
+      durationRaw?: string;
+      compositionDurationRaw?: string;
+    }[] = [];
 
     for (const id of compIds) {
       // Try window.__timelines[id].duration() first (GSAP timeline)
@@ -2431,14 +2481,17 @@ export async function resolveCompositionDurations(
       // Fallback: check for authored duration on the element itself
       const el = document.getElementById(id);
       if (el) {
-        const compDurAttr =
-          el.getAttribute("data-duration") || el.getAttribute("data-composition-duration");
-        if (compDurAttr) {
-          const dur = parseFloat(compDurAttr);
-          if (dur > 0) {
-            resolved.push({ id, duration: dur, source: "data-duration" });
-            continue;
-          }
+        const durationRaw = el.getAttribute("data-duration");
+        const compositionDurationRaw = el.getAttribute("data-composition-duration");
+        if (durationRaw != null || compositionDurationRaw != null) {
+          resolved.push({
+            id,
+            duration: 0,
+            source: "data-duration",
+            ...(durationRaw != null ? { durationRaw } : {}),
+            ...(compositionDurationRaw != null ? { compositionDurationRaw } : {}),
+          });
+          continue;
         }
       }
 
@@ -2450,8 +2503,12 @@ export async function resolveCompositionDurations(
 
   const resolutions: ResolvedDuration[] = [];
   for (const r of results) {
-    if (r.duration > 0) {
-      resolutions.push({ id: r.id, duration: r.duration });
+    const duration =
+      parseStrictFiniteTimingNumber(r.durationRaw) ??
+      parseStrictFiniteTimingNumber(r.compositionDurationRaw) ??
+      r.duration;
+    if (duration != null && duration > 0) {
+      resolutions.push({ id: r.id, duration });
     }
   }
 
diff --git a/packages/producer/tests/playback-rate-av-parity/playback-rate-av-parity.test.ts b/packages/producer/tests/playback-rate-av-parity/playback-rate-av-parity.test.ts
new file mode 100644
index 000000000..357be69a4
--- /dev/null
+++ b/packages/producer/tests/playback-rate-av-parity/playback-rate-av-parity.test.ts
@@ -0,0 +1,234 @@
+import { afterAll, expect, test } from "bun:test";
+import { copyFileSync, mkdirSync, mkdtempSync, readFileSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { spawnSync } from "node:child_process";
+import { createHash } from "node:crypto";
+import {
+  createFrameLookupTable,
+  extractAllVideoFrames,
+  parseVideoElements,
+} from "../../../engine/src/services/videoFrameExtractor.ts";
+import {
+  parseAudioElements,
+  processCompositionAudio,
+} from "../../../engine/src/services/audioMixer.ts";
+
+const workDirs: string[] = [];
+
+afterAll(() => {
+  if (process.env.HF_KEEP_PLAYBACK_RATE_FIXTURE === "1") return;
+  for (const dir of workDirs) rmSync(dir, { recursive: true, force: true });
+});
+
+function ffmpeg(args: string[]) {
+  const result = spawnSync("ffmpeg", ["-hide_banner", "-loglevel", "error", ...args], {
+    encoding: null,
+  });
+  if (result.status !== 0) {
+    throw new Error(`ffmpeg failed: ${result.stderr.toString("utf8")}`);
+  }
+  return result.stdout;
+}
+
+function ffprobeDuration(path: string): number {
+  const result = spawnSync(
+    "ffprobe",
+    ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", "--", path],
+    { encoding: "utf8" },
+  );
+  if (result.status !== 0) throw new Error(`ffprobe failed: ${result.stderr}`);
+  return Number.parseFloat(result.stdout.trim());
+}
+
+function sampleRgb(path: string, time: number): [number, number, number] {
+  const rgb = ffmpeg([
+    "-ss",
+    String(time),
+    "-i",
+    path,
+    "-frames:v",
+    "1",
+    "-vf",
+    "scale=1:1",
+    "-pix_fmt",
+    "rgb24",
+    "-f",
+    "rawvideo",
+    "-",
+  ]);
+  return [rgb[0] ?? 0, rgb[1] ?? 0, rgb[2] ?? 0];
+}
+
+function dominant(rgb: [number, number, number]): "red" | "green" | "blue" | "yellow" {
+  const [r, g, b] = rgb;
+  if (r > 130 && g > 130 && b < 100) return "yellow";
+  if (r >= g && r >= b) return "red";
+  if (g >= r && g >= b) return "green";
+  return "blue";
+}
+
+function sampleFrequency(path: string, center: number): number {
+  const duration = 0.2;
+  const pcm = ffmpeg([
+    "-ss",
+    String(center - duration / 2),
+    "-t",
+    String(duration),
+    "-i",
+    path,
+    "-vn",
+    "-ac",
+    "1",
+    "-ar",
+    "48000",
+    "-f",
+    "s16le",
+    "-",
+  ]);
+  let crossings = 0;
+  let previous = pcm.readInt16LE(0);
+  for (let offset = 2; offset + 1 < pcm.length; offset += 2) {
+    const current = pcm.readInt16LE(offset);
+    if ((previous < 0 && current >= 0) || (previous >= 0 && current < 0)) crossings += 1;
+    previous = current;
+  }
+  return crossings / (2 * duration);
+}
+
+test(
+  "final render keeps timecoded picture and pitch-preserved sound aligned at 2x",
+  async () => {
+    const projectDir = mkdtempSync(join(tmpdir(), "hf-playback-rate-parity-"));
+    workDirs.push(projectDir);
+    const source = join(projectDir, "timecoded.mp4");
+    const output = join(projectDir, "out.mp4");
+
+    ffmpeg([
+      "-f",
+      "lavfi",
+      "-i",
+      "color=c=red:s=160x90:r=10:d=1",
+      "-f",
+      "lavfi",
+      "-i",
+      "color=c=green:s=160x90:r=10:d=1",
+      "-f",
+      "lavfi",
+      "-i",
+      "color=c=blue:s=160x90:r=10:d=1",
+      "-f",
+      "lavfi",
+      "-i",
+      "color=c=yellow:s=160x90:r=10:d=1",
+      "-f",
+      "lavfi",
+      "-i",
+      "sine=frequency=440:sample_rate=48000:duration=1",
+      "-f",
+      "lavfi",
+      "-i",
+      "sine=frequency=660:sample_rate=48000:duration=1",
+      "-f",
+      "lavfi",
+      "-i",
+      "sine=frequency=880:sample_rate=48000:duration=1",
+      "-f",
+      "lavfi",
+      "-i",
+      "sine=frequency=1100:sample_rate=48000:duration=1",
+      "-filter_complex",
+      "[0:v][1:v][2:v][3:v]concat=n=4:v=1:a=0[v];[4:a][5:a][6:a][7:a]concat=n=4:v=0:a=1[a]",
+      "-map",
+      "[v]",
+      "-map",
+      "[a]",
+      "-c:v",
+      "libx264",
+      "-pix_fmt",
+      "yuv420p",
+      "-c:a",
+      "aac",
+      "-shortest",
+      "-y",
+      source,
+    ]);
+
+    const html = `<!doctype html><html><body style="margin:0;background:black">
+<div id="root" data-composition-id="rate-parity" data-start="0" data-duration="2" data-width="160" data-height="90" data-fps="10">
+  <video id="picture" src="timecoded.mp4" data-start="0" data-duration="2" data-track-index="0" data-playback-rate="2" muted playsinline style="position:absolute;inset:0;width:160px;height:90px;object-fit:fill"></video>
+  <audio id="sound" src="timecoded.mp4" data-start="0" data-duration="2" data-end="2" data-track-index="10" data-playback-rate="2"></audio>
+</div></body></html>`;
+
+    const videoElements = parseVideoElements(html);
+    const extracted = await extractAllVideoFrames(videoElements, projectDir, {
+      fps: 10,
+      outputDir: join(projectDir, "extracted"),
+      format: "png",
+      timelineEnd: 2,
+    });
+    expect(extracted.errors).toEqual([]);
+
+    const audioElements = parseAudioElements(html);
+    const audioPath = join(projectDir, "audio.m4a");
+    const audio = await processCompositionAudio(
+      audioElements,
+      projectDir,
+      join(projectDir, "audio-work"),
+      audioPath,
+      2,
+    );
+    expect(audio.success).toBe(true);
+
+    const framesDir = join(projectDir, "timeline-frames");
+    mkdirSync(framesDir);
+    const lookup = createFrameLookupTable(videoElements, extracted.extracted);
+    for (let frame = 0; frame < 20; frame += 1) {
+      const framePath = lookup.getFrame("picture", frame / 10);
+      if (!framePath) throw new Error(`missing picture frame ${frame}`);
+      copyFileSync(framePath, join(framesDir, `frame_${String(frame + 1).padStart(5, "0")}.png`));
+    }
+    ffmpeg([
+      "-framerate",
+      "10",
+      "-i",
+      join(framesDir, "frame_%05d.png"),
+      "-i",
+      audioPath,
+      "-c:v",
+      "libx264",
+      "-pix_fmt",
+      "yuv420p",
+      "-c:a",
+      "copy",
+      "-t",
+      "2",
+      "-y",
+      output,
+    ]);
+
+    const duration = ffprobeDuration(output);
+    expect(duration).toBeWithin(1.95, 2.05);
+    const proofTimes = [0.25, 0.75, 1.25, 1.75];
+    const colors = proofTimes.map((time) => dominant(sampleRgb(output, time)));
+    expect(colors).toEqual(["red", "green", "blue", "yellow"]);
+    const frequencies = proofTimes.map((time) => sampleFrequency(output, time));
+    for (const [actual, expected] of frequencies.map((value, index) => [
+      value,
+      [440, 660, 880, 1100][index]!,
+    ])) {
+      expect(actual).toBeWithin(expected - 30, expected + 30);
+    }
+    console.log(
+      `[playback-rate-proof] ${JSON.stringify({
+        output,
+        sha256: createHash("sha256").update(readFileSync(output)).digest("hex"),
+        duration,
+        proofTimes,
+        colors,
+        frequencies,
+      })}`,
+    );
+  },
+  120_000,
+);
diff --git a/scripts/creator-editing-capabilities.test.mjs b/scripts/creator-editing-capabilities.test.mjs
new file mode 100644
index 000000000..abfa6fd5d
--- /dev/null
+++ b/scripts/creator-editing-capabilities.test.mjs
@@ -0,0 +1,377 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+const read = (path) => readFile(new URL(`../${path}`, import.meta.url), "utf8");
+
+const files = {
+  router: "skills/hyperframes/SKILL.md",
+  keyframes: "skills/hyperframes-keyframes/SKILL.md",
+  cli: "skills/hyperframes-cli/SKILL.md",
+  audio: "skills/hyperframes-audio/SKILL.md",
+  webAudioTransport: "packages/core/src/runtime/webAudioTransport.ts",
+  coreClips: "skills/hyperframes-core/references/tracks-and-clips.md",
+  generalVideo: "skills/general-video/SKILL.md",
+  editingRecipes: "skills/hyperframes-core/references/creator-editing-recipes.md",
+  runtimeMedia: "packages/core/src/runtime/media.ts",
+  runtimeInit: "packages/core/src/runtime/init.ts",
+  timingNumbers: "packages/core/src/runtime/playbackRate.ts",
+  clipTree: "packages/core/src/runtime/clipTree.ts",
+  timeline: "packages/core/src/runtime/timeline.ts",
+  timingCompiler: "packages/core/src/compiler/timingCompiler.ts",
+  mediaWindow: "packages/engine/src/services/mediaTimelineWindow.ts",
+  videoExtractor: "packages/engine/src/services/videoFrameExtractor.ts",
+  audioMixer: "packages/engine/src/services/audioMixer.ts",
+  webAudioTransportTest: "packages/core/src/runtime/webAudioTransport.test.ts",
+  audioFxTest: "packages/core/src/runtime/audioFx.test.ts",
+};
+
+function requiresAll(text, patterns, surface) {
+  for (const pattern of patterns) {
+    assert.match(text, pattern, `${surface} is missing ${pattern}`);
+  }
+}
+
+test("router loads the owning skills for creator picture and sound edits", async () => {
+  const router = await read(files.router);
+  requiresAll(
+    router,
+    [
+      /cut this footage/i,
+      /trim[\s\S]{0,80}splice[\s\S]{0,80}reorder|trim[\s\S]{0,80}reorder[\s\S]{0,80}splice/i,
+      /source range/i,
+      /punch[- ]in.*punch[- ]out/i,
+      /multi-state zoom|smooth.*zoom.*reframe/i,
+      /Ken Burns/i,
+      /camera move/i,
+      /match cut/i,
+      /whip pan/i,
+      /fade.*crossfade/i,
+      /duck.*automation.*effects|automation.*duck.*effects/i,
+      /picture and sound|video and audio/i,
+    ],
+    files.router,
+  );
+  assert.match(router, /cut.*trim.*splice.*reorder[\s\S]{0,500}hyperframes-core/i);
+  assert.match(
+    router,
+    /zoom.*punch.*reframe.*Ken Burns.*camera move[\s\S]{0,500}hyperframes-keyframes/i,
+  );
+  assert.match(
+    router,
+    /match cut.*whip pan[\s\S]{0,500}hyperframes-animation[\s\S]{0,300}hyperframes-keyframes[\s\S]{0,300}hyperframes-registry/i,
+  );
+  assert.match(router, /fade.*crossfade.*gain.*duck[\s\S]{0,700}hyperframes-audio/i);
+  assert.match(
+    router,
+    /picture and sound[\s\S]{0,700}hyperframes-core[\s\S]{0,300}hyperframes-audio/i,
+  );
+  assert.match(router, /media-use[\s\S]{0,180}sourc|sourc[\s\S]{0,180}media-use/i);
+});
+
+test("keyframes states truthful creator capabilities and ownership boundaries", async () => {
+  const keyframes = await read(files.keyframes);
+  requiresAll(
+    keyframes,
+    [
+      /hard cut/i,
+      /trim[\s\S]{0,80}splice[\s\S]{0,80}reorder|trim[\s\S]{0,80}reorder[\s\S]{0,80}splice/i,
+      /punch[- ]in.*punch[- ]out/i,
+      /multi-state zoom|multiple zoom.*reframe states/i,
+      /Ken Burns/i,
+      /camera move/i,
+      /match cut/i,
+      /whip pan/i,
+      /data-start/,
+      /data-duration/,
+      /data-media-start/,
+      /hyperframes-core/,
+      /hyperframes-audio/,
+    ],
+    files.keyframes,
+  );
+  assert.match(
+    keyframes,
+    /source[\s\S]{0,80}cut[\s\S]{0,80}trim[\s\S]{0,80}reorder[\s\S]{0,500}hyperframes-core/i,
+  );
+  assert.match(keyframes, /non-timed|non-clip/);
+  assert.match(keyframes, /wrapper inside the clip|inner.*wrapper/i);
+  assert.match(keyframes, /speed ramps?[\s\S]{0,300}(not supported|preprocess)/i);
+  assert.match(keyframes, /arbitrary mid-source freeze[\s\S]{0,300}(not supported|preprocess)/i);
+  assert.doesNotMatch(keyframes, /keyframe(?:d|ing)?\s+(?:the\s+)?data-playback-rate/i);
+});
+
+test("CLI requires domain skills before authoring or diagnosing creator edits", async () => {
+  const cli = await read(files.cli);
+  assert.match(
+    cli,
+    /before[\s\S]{0,120}(zoom|punch-in)[\s\S]{0,180}(reframe|camera)[\s\S]{0,180}keyframe[\s\S]{0,220}read `?\/hyperframes-keyframes/i,
+  );
+  assert.match(cli, /before `?hyperframes keyframes`?[\s\S]{0,180}read `?\/hyperframes-keyframes/i);
+  assert.match(cli, /cut.*trim.*splice.*source timing[\s\S]{0,250}hyperframes-core/i);
+  assert.match(
+    cli,
+    /fade[\s\S]{0,100}crossfade[\s\S]{0,100}volume automation[\s\S]{0,100}carve[\s\S]{0,100}FX[\s\S]{0,300}hyperframes-audio/i,
+  );
+});
+
+test("audio skill owns placed-track fades, automation, ducking, and effects", async () => {
+  const audio = await read(files.audio);
+  requiresAll(
+    audio,
+    [
+      /fade[- ]in.*fade[- ]out/i,
+      /crossfade/i,
+      /track gain|track volume/i,
+      /duck/i,
+      /data-automation/,
+      /gain.*EQ.*compressor.*limiter.*gate.*saturat.*delay.*reverb.*chorus.*phaser.*bitcrush/is,
+      /clip timing.*hyperframes-core|hyperframes-core.*clip timing/is,
+      /sourcing.*media-use|media-use.*sourcing/is,
+    ],
+    files.audio,
+  );
+  assert.match(audio, /constant.*playback rate|data-playback-rate/i);
+  assert.match(audio, /speed ramps?[\s\S]{0,220}(not supported|preprocess)/i);
+});
+
+test("WebAudio scheduling combines per-element and global transport playback rates", async () => {
+  const webAudioTransport = await read(files.webAudioTransport);
+  assert.match(
+    webAudioTransport,
+    /mediaRate[\s\S]{0,120}readElementPlaybackRate\(el\)[\s\S]{0,160}sourceRate\s*=\s*safeRate\s*\*\s*mediaRate/i,
+  );
+});
+
+test("keyframes routes visual crop and mask handoffs without claiming temporal source edits", async () => {
+  const keyframes = await read(files.keyframes);
+  requiresAll(
+    keyframes,
+    [
+      /interpolat(?:e|ed|ing)[\s\S]{0,100}(clip-path|mask)[\s\S]{0,100}(crop|reframe)/i,
+      /directional wipe cut/i,
+      /iris[\s\S]{0,40}reveal cut|reveal[\s\S]{0,40}iris cut/i,
+      /split-screen handoff/i,
+      /polygon[\s\S]{0,50}mask transition|mask[\s\S]{0,50}polygon transition/i,
+      /visual transition[\s\S]{0,120}(not|isn't|is not)[\s\S]{0,80}(temporal|source)[\s\S]{0,80}(trim|splice)/i,
+      /hyperframes-core[\s\S]{0,160}(timeline|clip timing)/i,
+    ],
+    files.keyframes,
+  );
+});
+
+test("core and general-video author temporal edits as duplicated source-range clips", async () => {
+  const [coreClips, generalVideo, router, keyframes] = await Promise.all([
+    read(files.coreClips),
+    read(files.generalVideo),
+    read(files.router),
+    read(files.keyframes),
+  ]);
+  for (const [surface, text] of [
+    [files.coreClips, coreClips],
+    [files.generalVideo, generalVideo],
+  ]) {
+    requiresAll(
+      text,
+      [
+        /duplicate[\s\S]{0,120}(same|one)[\s\S]{0,80}(video|media) source/i,
+        /data-media-start[\s\S]{0,120}data-duration/i,
+        /data-start/,
+        /hard cut[\s\S]{0,100}trim[\s\S]{0,100}splice[\s\S]{0,100}reorder/i,
+        /separate(?:ly)? authored audio[\s\S]{0,180}(identical|same)[\s\S]{0,100}(range|timing)/i,
+      ],
+      surface,
+    );
+  }
+  assert.match(router, /cut this footage[\s\S]{0,300}hyperframes-core/i);
+  requiresAll(keyframes, [/zoom/i, /punch/i, /pan/i, /crop|mask|clip-path/i], files.keyframes);
+  assert.match(keyframes, /inner[\s\S]{0,80}wrapper/i);
+  assert.match(keyframes, /not a temporal source trim or[\s\S]{0,40}splice/i);
+});
+
+test("creator editing recipes are copyable, owned, mathematical, and limitation-safe", async () => {
+  const recipes = await read(files.editingRecipes).catch(() => "");
+  const recipeNames = [
+    "Hard cut",
+    "Trim in/out",
+    "Split / splice",
+    "Duplicate / reuse same source",
+    "Reorder",
+    "Freeze / hold",
+    "Constant speed / slow motion",
+    "Zoom / punch",
+    "Pan / Ken Burns",
+    "Crop / reframe",
+    "Clip-path wipe / reveal / mask / split-screen",
+    "Crossfade",
+    "Volume fades / ducking",
+    "Audio alignment",
+  ];
+  for (let index = 0; index < recipeNames.length; index += 1) {
+    const start = recipes.indexOf(`## ${recipeNames[index]}`);
+    const next =
+      index + 1 < recipeNames.length
+        ? recipes.indexOf(`## ${recipeNames[index + 1]}`)
+        : recipes.length;
+    assert.ok(start >= 0, `missing recipe: ${recipeNames[index]}`);
+    const section = recipes.slice(start, next);
+    requiresAll(
+      section,
+      [
+        /```(?:html|js)/,
+        /Timeline math:/i,
+        /Source math:/i,
+        /Audio follows:/i,
+        /Owner:/i,
+        /Limit:/i,
+      ],
+      recipeNames[index],
+    );
+  }
+  requiresAll(
+    recipes,
+    [
+      /data-start/,
+      /data-duration/,
+      /data-media-start/,
+      /data-playback-rate/,
+      /consumed source\s*=\s*timeline duration\s*[×*]\s*rate/i,
+      /natural timeline duration\s*=\s*remaining source\s*\/\s*rate/i,
+      /separate audio track/i,
+      /final-source[\s\S]{0,100}subcomp[\s\S]{0,100}visual pose/i,
+      /arbitrary mid-source[\s\S]{0,120}preprocess/i,
+      /distinct tracks[\s\S]{0,120}overlap[\s\S]{0,120}opposing/i,
+      /same-track overlap[\s\S]{0,80}invalid/i,
+      /inner wrapper[\s\S]{0,100}not[\s\S]{0,50}(clip element|timed clip)/i,
+      /source cuts[\s\S]{0,80}hyperframes-core/i,
+    ],
+    files.editingRecipes,
+  );
+  const [core, general] = await Promise.all([
+    read("skills/hyperframes-core/SKILL.md"),
+    read(files.generalVideo),
+  ]);
+  assert.match(core, /creator-editing-recipes\.md/);
+  assert.match(general, /creator-editing-recipes\.md/);
+  assert.doesNotMatch(recipes, /data-(?:media-end|source-end|trim-start|trim-end)/);
+});
+
+test("every preview reader shares the non-negative media-start helper", async () => {
+  for (const path of [
+    files.runtimeMedia,
+    files.runtimeInit,
+    "packages/core/src/runtime/clipTree.ts",
+    "packages/core/src/runtime/timeline.ts",
+    "packages/core/src/runtime/startResolver.ts",
+  ]) {
+    const source = await read(path);
+    assert.match(
+      source,
+      /readElementPlaybackStart|readMediaStart|resolveNaturalMediaTimelineDuration/,
+    );
+  }
+});
+
+test("crossfade and volume recipes contain executable opposing envelopes", async () => {
+  const recipes = await read(files.editingRecipes);
+  const crossfade = recipes.slice(
+    recipes.indexOf("## Crossfade"),
+    recipes.indexOf("## Volume fades / ducking"),
+  );
+  requiresAll(
+    crossfade,
+    [
+      /data-track-index="0"[\s\S]*data-track-index="1"/,
+      /class="inner"/,
+      /gsap\.timeline\(\{\s*paused:\s*true\s*\}\)/,
+      /window\.__timelines/,
+      /autoAlpha|opacity/,
+      /<audio[\s\S]*<audio/,
+      /data-automation='/,
+    ],
+    "crossfade recipe",
+  );
+  const crossfadeAutomation = [...crossfade.matchAll(/data-automation='([^']+)'/g)];
+  assert.equal(crossfadeAutomation.length, 2);
+  for (const match of crossfadeAutomation) JSON.parse(match[1]);
+  const volume = recipes.slice(
+    recipes.indexOf("## Volume fades / ducking"),
+    recipes.indexOf("## Audio alignment"),
+  );
+  requiresAll(
+    volume,
+    [/fade-in/i, /fade-out/i, /duck down/i, /hold/i, /duck up/i, /data-automation='/],
+    "volume recipe",
+  );
+  JSON.parse(volume.match(/data-automation='([^']+)'/)?.[1] ?? "");
+});
+
+test("natural media duration is rate-scaled across every preview surface", async () => {
+  for (const path of [
+    files.runtimeInit,
+    "packages/core/src/runtime/clipTree.ts",
+    "packages/core/src/runtime/timeline.ts",
+  ]) {
+    assert.match(await read(path), /resolveNaturalMediaTimelineDuration/);
+  }
+});
+
+// fallow-ignore-next-line complexity
+test("every temporal source-range recipe includes matching audio markup", async () => {
+  const recipes = await read(files.editingRecipes);
+  for (const name of [
+    "Hard cut",
+    "Trim in/out",
+    "Split / splice",
+    "Duplicate / reuse same source",
+    "Reorder",
+  ]) {
+    const start = recipes.indexOf(`## ${name}`);
+    const next = recipes.indexOf("## ", start + 3);
+    const section = recipes.slice(start, next < 0 ? recipes.length : next);
+    const videos = [...section.matchAll(/<video[\s\S]*?<\/video>/g)].map((m) => m[0]);
+    const audios = [...section.matchAll(/<audio[\s\S]*?<\/audio>/g)].map((m) => m[0]);
+    assert.ok(
+      videos.length > 0 && audios.length >= videos.length,
+      `${name}: matching audio missing`,
+    );
+    for (const video of videos) {
+      for (const attr of ["src", "data-start", "data-duration", "data-media-start"]) {
+        const value = video.match(new RegExp(`${attr}="([^"]+)"`))?.[1];
+        assert.ok(
+          value && audios.some((audio) => audio.includes(`${attr}="${value}"`)),
+          `${name}: audio mismatch ${attr}`,
+        );
+      }
+    }
+  }
+});
+
+test("all literal timing readers use one strict finite-number contract", async () => {
+  assert.match(await read(files.timingNumbers), /parseStrictFiniteTimingNumber/);
+  for (const path of [
+    files.clipTree,
+    files.timeline,
+    files.runtimeInit,
+    files.timingCompiler,
+    files.mediaWindow,
+    files.videoExtractor,
+    files.audioMixer,
+  ]) {
+    assert.match(
+      await read(path),
+      /parseStrictFiniteTimingNumber/,
+      `${path} bypasses strict timing`,
+    );
+  }
+});
+
+test("attribute mocks dispatch by name instead of answering every attribute", async () => {
+  const webAudio = await read(files.webAudioTransportTest);
+  const audioFx = await read(files.audioFxTest);
+  assert.doesNotMatch(webAudio, /getAttribute:\s*\(\)\s*=>\s*(?:"1"|src)/);
+  assert.doesNotMatch(audioFx, /getAttribute:\s*\(\)\s*=>\s*"\{not json"/);
+  assert.match(webAudio, /name\s*===\s*"data-playback-rate"/);
+  assert.match(webAudio, /name\s*===\s*"src"/);
+  assert.match(audioFx, /name\s*===\s*HF_AUDIO_FX_ATTR/);
+});
diff --git a/skills-manifest.json b/skills-manifest.json
index c2a8e5f6a..39217fc33 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -14,11 +14,11 @@
       "files": 2
     },
     "general-video": {
-      "hash": "49f5216832cb8e91",
+      "hash": "16898c02677d09bc",
       "files": 4
     },
     "hyperframes": {
-      "hash": "756a72f58fa3739b",
+      "hash": "d64583e4aa8011f7",
       "files": 17
     },
     "hyperframes-animation": {
@@ -26,23 +26,23 @@
       "files": 121
     },
     "hyperframes-audio": {
-      "hash": "534cea75fe0f2bc6",
+      "hash": "c96ccac4b1127b8c",
       "files": 6
     },
     "hyperframes-cli": {
-      "hash": "dc900e2ef0aa16b2",
+      "hash": "d124991b0a27f02d",
       "files": 11
     },
     "hyperframes-core": {
-      "hash": "4ca81d4092effc62",
-      "files": 19
+      "hash": "ec542db377d8b213",
+      "files": 20
     },
     "hyperframes-creative": {
       "hash": "0068574ecd376e60",
       "files": 78
     },
     "hyperframes-keyframes": {
-      "hash": "d00744ff0e669624",
+      "hash": "6bc62531ecea9a52",
       "files": 3
     },
     "hyperframes-registry": {
diff --git a/skills/general-video/SKILL.md b/skills/general-video/SKILL.md
index 9a6da43ac..8830870bb 100644
--- a/skills/general-video/SKILL.md
+++ b/skills/general-video/SKILL.md
@@ -59,6 +59,15 @@ Do not invent synonyms for these states. An ongoing “just build it” signal i
 - For `flow: automation`, choose the route and state it in one line in the first progress update.
 - For a specific edit, make the edit without inventing a new route.
 
+For a hard cut, trim, splice, or reorder of existing footage, duplicate the same
+video source into multiple clip elements. On each copy, set the source range
+with `data-media-start` plus `data-duration`, then set authored placement/order
+with `data-start`. Separately authored audio follows the identical clip ranges
+and timing on matching `<audio>` elements. `/hyperframes-core` owns this temporal
+edit; use `/hyperframes-keyframes` only for visual-property animation such as
+zoom, punch, pan, crop, mask, or `clip-path` on an inner wrapper.
+Copy the full contracts from `../hyperframes-core/references/creator-editing-recipes.md`.
+
 ### Companion flow
 
 When `flow: companion`:
diff --git a/skills/hyperframes-audio/SKILL.md b/skills/hyperframes-audio/SKILL.md
index 95ccc63a4..48d2b0766 100644
--- a/skills/hyperframes-audio/SKILL.md
+++ b/skills/hyperframes-audio/SKILL.md
@@ -2,6 +2,7 @@
 name: hyperframes-audio
 description: >
   Use when audio already placed in a HyperFrames composition needs to be mixed:
+  fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking,
   a music bed that fights a voiceover (voiceover carve), effects on a track
   (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser,
   bitcrush), or automation envelopes drawn on a track's volume or any effect
@@ -23,6 +24,20 @@ same Web Audio graph — the studio in a live context, the engine in an offline
 inside the browser it already drives. There is one implementation of each effect,
 so what you hear while scrubbing is what gets written. You never tune twice.
 
+Clip timing remains `/hyperframes-core`: audio/video trims and source ranges use
+`data-start`, `data-duration`, and `data-media-start`, and crossfades overlap
+clips on different tracks. This skill owns placed-track fade-in/fade-out,
+crossfade envelopes, track gain/track volume, volume and effect automation,
+ducking/voiceover carve, and the effect chain. `/media-use` owns sourcing,
+generation, and preprocessing.
+
+Constant `data-playback-rate` (`0.1..5`) is render-safe for picture and
+pitch-preserved sound when matching audio/video elements use the same timing,
+source offset, and rate. Source speed ramps are not supported because there is
+no rate envelope; preprocess a derived synchronized asset. HyperFrames does not
+provide automatic waveform sync or drift correction.
+For copyable cut/crossfade/retime recipes, use `/hyperframes-core` → `references/creator-editing-recipes.md`.
+
 Three attributes carry everything, all on the audio/video element itself:
 
 | Attribute         | Holds                                                     |
@@ -31,6 +46,9 @@ Three attributes carry everything, all on the audio/video element itself:
 | `data-automation` | envelopes on this track's volume or its effect parameters |
 | `data-fx-carve`   | the carve's own settings, so it can be re-derived         |
 
+The shipped effect families are gain, EQ (highpass, lowpass, peaking, shelves),
+compressor, limiter, gate, saturate, delay, reverb, chorus, phaser, and bitcrush.
+
 Exact JSON for each, and the rules a lane must satisfy: `references/attributes.md`.
 Every effect with its parameters, ranges and units: `references/fx-registry.md`.
 How to work out what is wrong with a file you cannot hear:
diff --git a/skills/hyperframes-cli/SKILL.md b/skills/hyperframes-cli/SKILL.md
index 0c05d814d..3636ccc13 100644
--- a/skills/hyperframes-cli/SKILL.md
+++ b/skills/hyperframes-cli/SKILL.md
@@ -25,6 +25,20 @@ Run commands as `npx hyperframes ...` unless project instructions provide a wrap
 8. **Render only after approval:** use draft quality for iteration and high quality for delivery.
 9. **Verify the output:** confirm the file exists, is non-empty, and has a plausible duration.
 
+## Mandatory creator-edit cross-references
+
+- Before authoring or diagnosing a zoom, punch-in/punch-out, reframe, camera
+  move, or any keyframe motion, read `/hyperframes-keyframes` first.
+- Before `hyperframes keyframes`, read `/hyperframes-keyframes`; the command
+  surfaces animation trajectories and does not diagnose clip cuts.
+- For a cut, trim, splice, reorder, or source timing edit, read
+  `/hyperframes-core` and use its clip/timeline contract.
+- For fade-in/fade-out, crossfade, track gain, volume automation, ducking,
+  voiceover carve, or FX on placed audio, read `/hyperframes-audio`. Load core
+  alongside it when clip placement or picture timing also changes.
+- Use `/media-use` only to source/generate media or preprocess a derived asset.
+  Copy creator edit markup from `/hyperframes-core` → `references/creator-editing-recipes.md`.
+
 ```bash
 # Fast iteration check; repeat while authoring as needed.
 npx hyperframes lint
diff --git a/skills/hyperframes-core/SKILL.md b/skills/hyperframes-core/SKILL.md
index 3e44a4e54..d66272fde 100644
--- a/skills/hyperframes-core/SKILL.md
+++ b/skills/hyperframes-core/SKILL.md
@@ -11,25 +11,26 @@ This skill is the **technical contract** — how to build one hyperframes projec
 
 ## References
 
-| File                                 | Read it to…                                                                                                                                                                        |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `references/minimal-composition.md`  | start from the smallest renderable composition skeleton                                                                                                                            |
-| `references/composition-patterns.md` | choose monolithic vs modular; structure a modular `index.html`; pick a sub-comp archetype                                                                                          |
-| `references/data-attributes.md`      | look up any `data-*` (root / clip / sub-comp host / legacy aliases); use `class="clip"`                                                                                            |
-| `references/tracks-and-clips.md`     | pick `data-track-index`, handle same-track overlap / z-index, time a clip relative to another                                                                                      |
-| `references/sub-compositions.md`     | wire a sub-composition (host attrs, `<template>`, per-instance vars) and animate inside it                                                                                         |
-| `references/variables-and-media.md`  | declare variables; place `<video>`/`<audio>`, set volume, trim                                                                                                                     |
-| `references/determinism-rules.md`    | build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit                                                                                  |
-| `references/full-screen-motion.md`   | author full-frame motion with shared backgrounds                                                                                                                                   |
-| `references/storyboard-format.md`    | author a `STORYBOARD.md` plan (+ the parsed manifest)                                                                                                                              |
-| `references/review-loop.md`          | run the plan → sketch → build review passes on a live board — shared by every storyboard-planning workflow                                                                         |
-| `references/production-loop.md`      | take an approved plan to a delivered video — the stage dependencies (audio, frames, assembly, transitions, captions, verify, deliver) a freeform build follows directly            |
-| `references/brief-contract.md`       | the brief's ground rules — mode derivation (collaborative / autonomous), shared field registry, question invariants (the asking itself lives in `/hyperframes` → the intent layer) |
-| `references/brief-format.md`         | author `BRIEF.md` — the confirmed intent document a workflow's Setup writes and every later step reads                                                                             |
-| `references/script-format.md`        | author the optional `SCRIPT.md` locked narration                                                                                                                                   |
-| `references/subagent-dispatch.md`    | map subagent dispatch verbs (parallel fan-out / background / wait) to your harness                                                                                                 |
-| `references/frame-worker-core.md`    | the shared frame-worker role contract — each narrative workflow's packet builder prepends it to that workflow's `sub-agents/frame-worker.md` delta                                 |
-| `references/tailwind.md`             | work in a Tailwind v4 project (`init --tailwind`; runtime contract differs from Studio's v3)                                                                                       |
+| File                                    | Read it to…                                                                                                                                                                        |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `references/minimal-composition.md`     | start from the smallest renderable composition skeleton                                                                                                                            |
+| `references/composition-patterns.md`    | choose monolithic vs modular; structure a modular `index.html`; pick a sub-comp archetype                                                                                          |
+| `references/data-attributes.md`         | look up any `data-*` (root / clip / sub-comp host / legacy aliases); use `class="clip"`                                                                                            |
+| `references/tracks-and-clips.md`        | pick `data-track-index`, handle same-track overlap / z-index, time a clip relative to another                                                                                      |
+| `references/creator-editing-recipes.md` | copy truthful cut/trim/reorder/retime/freeze/camera/mask/crossfade/audio editing recipes and their limits                                                                          |
+| `references/sub-compositions.md`        | wire a sub-composition (host attrs, `<template>`, per-instance vars) and animate inside it                                                                                         |
+| `references/variables-and-media.md`     | declare variables; place `<video>`/`<audio>`, set volume, trim                                                                                                                     |
+| `references/determinism-rules.md`       | build a seekable timeline; determinism bans; the animatable-property allowlist; layout / text fit                                                                                  |
+| `references/full-screen-motion.md`      | author full-frame motion with shared backgrounds                                                                                                                                   |
+| `references/storyboard-format.md`       | author a `STORYBOARD.md` plan (+ the parsed manifest)                                                                                                                              |
+| `references/review-loop.md`             | run the plan → sketch → build review passes on a live board — shared by every storyboard-planning workflow                                                                         |
+| `references/production-loop.md`         | take an approved plan to a delivered video — the stage dependencies (audio, frames, assembly, transitions, captions, verify, deliver) a freeform build follows directly            |
+| `references/brief-contract.md`          | the brief's ground rules — mode derivation (collaborative / autonomous), shared field registry, question invariants (the asking itself lives in `/hyperframes` → the intent layer) |
+| `references/brief-format.md`            | author `BRIEF.md` — the confirmed intent document a workflow's Setup writes and every later step reads                                                                             |
+| `references/script-format.md`           | author the optional `SCRIPT.md` locked narration                                                                                                                                   |
+| `references/subagent-dispatch.md`       | map subagent dispatch verbs (parallel fan-out / background / wait) to your harness                                                                                                 |
+| `references/frame-worker-core.md`       | the shared frame-worker role contract — each narrative workflow's packet builder prepends it to that workflow's `sub-agents/frame-worker.md` delta                                 |
+| `references/tailwind.md`                | work in a Tailwind v4 project (`init --tailwind`; runtime contract differs from Studio's v3)                                                                                       |
 
 For animation runtime specifics (GSAP API, Lottie, Three.js, etc.) go to `hyperframes-animation` → `adapters/<runtime>.md`.
 
diff --git a/skills/hyperframes-core/references/creator-editing-recipes.md b/skills/hyperframes-core/references/creator-editing-recipes.md
new file mode 100644
index 000000000..93408fe52
--- /dev/null
+++ b/skills/hyperframes-core/references/creator-editing-recipes.md
@@ -0,0 +1,341 @@
+# Creator Editing Recipes
+
+Use these copyable contracts after `tracks-and-clips.md`. Global math: **consumed source = timeline duration × rate**; **natural timeline duration = remaining source / rate**. Audio is always a separate audio track.
+
+## Hard cut
+
+```html
+<video
+  id="a"
+  src="take.mp4"
+  data-start="0"
+  data-duration="2"
+  data-media-start="4"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<video
+  id="b"
+  src="take.mp4"
+  data-start="2"
+  data-duration="3"
+  data-media-start="10"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<audio
+  src="take.mp4"
+  data-start="0"
+  data-duration="2"
+  data-media-start="4"
+  data-track-index="10"
+></audio>
+<audio
+  src="take.mp4"
+  data-start="2"
+  data-duration="3"
+  data-media-start="10"
+  data-track-index="10"
+></audio>
+```
+
+Timeline math: B starts at A start + duration. Source math: each range starts at `data-media-start`; consumed source = timeline duration × rate. Audio follows: duplicate matching `<audio>` ranges/timing. Owner: `/hyperframes-core`. Limit: adjacent windows only; same-track overlap is invalid.
+
+## Trim in/out
+
+```html
+<video
+  src="take.mp4"
+  data-start="1"
+  data-duration="3"
+  data-media-start="6"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<audio
+  src="take.mp4"
+  data-start="1"
+  data-duration="3"
+  data-media-start="6"
+  data-track-index="10"
+></audio>
+```
+
+Timeline math: visible window is `[1,4]`. Source math: in=6, out=6+3 at 1x; never invent source-end syntax. Audio follows: matching separate audio track uses the same three attributes. Owner: `/hyperframes-core`. Limit: use another clip for another range.
+
+## Split / splice
+
+```html
+<video
+  src="take.mp4"
+  data-start="0"
+  data-duration="2"
+  data-media-start="0"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<video
+  src="take.mp4"
+  data-start="2"
+  data-duration="2"
+  data-media-start="8"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<audio
+  src="take.mp4"
+  data-start="0"
+  data-duration="2"
+  data-media-start="0"
+  data-track-index="10"
+></audio>
+<audio
+  src="take.mp4"
+  data-start="2"
+  data-duration="2"
+  data-media-start="8"
+  data-track-index="10"
+></audio>
+```
+
+Timeline math: splice at t=2. Source math: independent source offsets select kept pieces. Audio follows: split matching audio identically. Owner: `/hyperframes-core`. Limit: source cuts are core, never keyframes.
+
+## Duplicate / reuse same source
+
+```html
+<video
+  src="take.mp4"
+  data-start="0"
+  data-duration="1"
+  data-media-start="2"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<video
+  src="take.mp4"
+  data-start="4"
+  data-duration="1"
+  data-media-start="2"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<audio
+  src="take.mp4"
+  data-start="0"
+  data-duration="1"
+  data-media-start="2"
+  data-track-index="10"
+></audio>
+<audio
+  src="take.mp4"
+  data-start="4"
+  data-duration="1"
+  data-media-start="2"
+  data-track-index="10"
+></audio>
+```
+
+Timeline math: copies may occupy different starts. Source math: identical offsets reuse identical source. Audio follows: duplicate the separate audio track too. Owner: `/hyperframes-core`. Limit: every element needs a unique id when ids are present.
+
+## Reorder
+
+```html
+<video
+  src="take.mp4"
+  data-start="0"
+  data-duration="2"
+  data-media-start="10"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<video
+  src="take.mp4"
+  data-start="2"
+  data-duration="2"
+  data-media-start="2"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<audio
+  src="take.mp4"
+  data-start="0"
+  data-duration="2"
+  data-media-start="10"
+  data-track-index="10"
+></audio>
+<audio
+  src="take.mp4"
+  data-start="2"
+  data-duration="2"
+  data-media-start="2"
+  data-track-index="10"
+></audio>
+```
+
+Timeline math: `data-start` defines authored order. Source math: source offsets need not be chronological. Audio follows: reorder identical matching audio windows. Owner: `/hyperframes-core`. Limit: same-track overlap is invalid.
+
+## Freeze / hold
+
+```html
+<img src="held-frame.png" data-start="2" data-duration="1" data-track-index="0" class="clip" />
+```
+
+Timeline math: the still owns its hold duration. Source math: final-source frame, subcomp final state, and visual pose holds are supported. Audio follows: continue, trim, or silence audio deliberately. Owner: `/hyperframes-core` + `/media-use`. Limit: arbitrary mid-source freeze requires preprocess of a still/segment.
+
+## Constant speed / slow motion
+
+```html
+<video
+  src="take.mp4"
+  data-start="0"
+  data-duration="2"
+  data-media-start="4"
+  data-playback-rate="0.5"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+```
+
+Timeline math: duration is authored timeline time. Source math: consumed source = timeline duration × rate; natural timeline duration = remaining source / rate. Audio follows: matching separate audio track uses the same constant rate. Owner: `/hyperframes-core`. Limit: normalized 0.1..5 constant only; no speed ramp envelope.
+
+## Zoom / punch
+
+```js
+tl.to("#clip .inner", { scale: 1.35, xPercent: -8, duration: 0.18 }, 1);
+```
+
+Timeline math: tween positions are composition seconds. Source math: unchanged; the core clip still selects source time. Audio follows: unchanged unless separately edited. Owner: `/hyperframes-keyframes`. Limit: target the inner wrapper, not the timed clip element.
+
+## Pan / Ken Burns
+
+```js
+tl.fromTo(
+  "#clip .inner",
+  { scale: 1.05, xPercent: 0 },
+  { scale: 1.2, xPercent: -12, duration: 4, ease: "none" },
+  0,
+);
+```
+
+Timeline math: move spans four authored seconds. Source math: unchanged. Audio follows: matching clip timing remains separate. Owner: `/hyperframes-keyframes`. Limit: authored geometry, not automatic face tracking.
+
+## Crop / reframe
+
+```js
+tl.to("#clip .inner", { clipPath: "inset(8% 12% 6% 10%)", xPercent: -4, duration: 1 }, 2);
+```
+
+Timeline math: crop interpolates over `[2,3]`. Source math: unchanged. Audio follows: no automatic change. Owner: `/hyperframes-keyframes`. Limit: inner wrapper only, not temporal trim.
+
+## Clip-path wipe / reveal / mask / split-screen
+
+```js
+tl.fromTo(
+  "#next .inner",
+  { clipPath: "polygon(0 0,0 0,0 100%,0 100%)" },
+  { clipPath: "polygon(0 0,100% 0,100% 100%,0 100%)", duration: 0.5 },
+  2,
+);
+```
+
+Timeline math: overlap placed clips for the 0.5s handoff. Source math: each clip keeps its own range. Audio follows: place matching audio on its own tracks. Owner: `/hyperframes-keyframes` + `/hyperframes-animation`. Limit: visual mask/polygon/split-screen only; source cuts stay `/hyperframes-core`.
+
+## Crossfade
+
+```html
+<div id="a-visual" class="inner">
+  <video
+    id="a"
+    data-start="0"
+    data-duration="3"
+    data-track-index="0"
+    src="a.mp4"
+    muted
+    playsinline
+  ></video>
+</div>
+<div id="b-visual" class="inner">
+  <video
+    id="b"
+    data-start="2.5"
+    data-duration="3"
+    data-track-index="1"
+    src="b.mp4"
+    muted
+    playsinline
+  ></video>
+</div>
+<audio
+  src="a.mp4"
+  data-start="0"
+  data-duration="3"
+  data-track-index="10"
+  data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":1},{"t":2.5,"v":1},{"t":3,"v":0}]}]}'
+></audio>
+<audio
+  src="b.mp4"
+  data-start="2.5"
+  data-duration="3"
+  data-track-index="11"
+  data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":0},{"t":0.5,"v":1},{"t":3,"v":1}]}]}'
+></audio>
+<script>
+  const tl = gsap.timeline({ paused: true });
+  tl.set("#b-visual", { autoAlpha: 0 }, 0)
+    .to("#a-visual", { autoAlpha: 0, duration: 0.5 }, 2.5)
+    .to("#b-visual", { autoAlpha: 1, duration: 0.5 }, 2.5);
+  window.__timelines = window.__timelines || {};
+  window.__timelines.main = tl;
+</script>
+```
+
+Timeline math: distinct tracks overlap by 0.5s with opposing opacity envelopes. Source math: each source range remains independent. Audio follows: opposing volume envelopes on distinct audio tracks. Owner: `/hyperframes-core` + `/hyperframes-keyframes` + `/hyperframes-audio`. Limit: same-track overlap is invalid.
+
+## Volume fades / ducking
+
+```html
+<audio
+  src="music.wav"
+  data-start="0"
+  data-duration="5"
+  data-track-index="10"
+  data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":0},{"t":1,"v":1},{"t":2,"v":1},{"t":2.2,"v":0.3},{"t":3,"v":0.3},{"t":3.2,"v":1},{"t":4,"v":1},{"t":5,"v":0}]}]}'
+></audio>
+```
+
+Timeline math: lane `t` is clip-local authored time: fade-in 0–1, duck down 2–2.2, hold 2.2–3, duck up 3–3.2, fade-out 4–5. Source math: source selection still uses core attributes. Audio follows: the explicit down-hold-up envelope affects this separate audio track. Owner: `/hyperframes-audio`. Limit: automation is not source retiming.
+
+## Audio alignment
+
+```html
+<video
+  src="take.mp4"
+  data-start="3"
+  data-duration="2"
+  data-media-start="8"
+  data-playback-rate="2"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+<audio
+  src="take.mp4"
+  data-start="3"
+  data-duration="2"
+  data-media-start="8"
+  data-playback-rate="2"
+  data-track-index="10"
+></audio>
+```
+
+Timeline math: picture and sound share start/duration. Source math: both consume four source seconds. Audio follows: identical timing, range, and rate on the separate audio track. Owner: `/hyperframes-core` + `/hyperframes-audio`. Limit: no waveform auto-sync or drift correction.
diff --git a/skills/hyperframes-core/references/tracks-and-clips.md b/skills/hyperframes-core/references/tracks-and-clips.md
index 991135a95..9203c80ef 100644
--- a/skills/hyperframes-core/references/tracks-and-clips.md
+++ b/skills/hyperframes-core/references/tracks-and-clips.md
@@ -43,6 +43,18 @@ When adding a new clip to an existing composition:
 
 `data-media-start` (on `<video>`/`<audio>`) is an offset _into the source media_. Use it to skip the first few seconds of a media file without trimming the file itself.
 
+## Cut one source into multiple ranges
+
+For a hard cut, trim, splice, or reorder, duplicate the same video source into
+multiple clip elements. Each copy selects its source range with
+`data-media-start` plus `data-duration`, and places that range on the authored
+timeline with `data-start`. Change the source offsets and placement order; do
+not try to keyframe source cutting.
+
+Separately authored audio gives each audio copy the identical source range and
+timing as its matching video clip (`data-media-start`, `data-duration`, and
+`data-start`). Video stays muted; the separate audio elements carry sound.
+
 ## Relative Timing
 
 `data-start` accepts a clip ID instead of a number, meaning "start when that clip ends". Add `+ N` / `- N` to offset; negative produces overlap (useful for crossfades).
diff --git a/skills/hyperframes-keyframes/SKILL.md b/skills/hyperframes-keyframes/SKILL.md
index cc981fae8..ce7697e8b 100644
--- a/skills/hyperframes-keyframes/SKILL.md
+++ b/skills/hyperframes-keyframes/SKILL.md
@@ -1,9 +1,10 @@
 ---
 name: hyperframes-keyframes
 description: >
-  Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP
-  timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw,
-  text trails, 3D depth, or `hyperframes keyframes` diagnostics.
+  Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe,
+  Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe
+  2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths,
+  masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.
   Don't use for broad scene strategy, brand design, media sourcing, captions, or
   general video planning.
 ---
@@ -14,6 +15,38 @@ Keyframes are a pose contract: visible states, continuous subject identity, seek
 
 Use `hyperframes-animation` for broad scene recipes. Use `hyperframes-cli` for full command docs. Use `references/keyframe-patterns.md` only when choosing implementation mechanisms, not visual style.
 
+## Creator editing boundary
+
+Keyframes own visual motion, not clip assembly. Source-range hard cuts, trim,
+splice, and reorder belong to `/hyperframes-core`: author one media element per
+kept range, place it with `data-start` and `data-duration`, and select its source
+offset with `data-media-start`. Adjacent ranges make a hard cut. A crossfade
+uses overlapping clips on different tracks plus visual opacity keyframes; sound
+fades use `/hyperframes-audio`.
+
+| Creator request                         | Truthful mechanism                                                                                                                                                                                                          |
+| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Punch-in / punch-out                    | Keyframe `scale` with `x`/`y` or percentage translation on a non-timed visual/crop wrapper inside the clip. Use a set/short tween for a hard punch and a tween for a smooth move.                                           |
+| Smooth multi-state zoom or reframe      | Keep one subject wrapper alive and author multiple zoom/reframe states as a pose ladder with per-segment easing.                                                                                                            |
+| Pan, reframe, or Ken Burns camera move  | Animate wrapper translation plus scale. Geometry is authored; this is not face tracking or automatic semantic reframing.                                                                                                    |
+| Chained camera moves                    | Chain labeled transform beats on one registered seek-safe timeline.                                                                                                                                                         |
+| Match cut or whip pan                   | `/hyperframes-animation` owns the visual handoff; `/hyperframes-registry` supplies primitives; keyframes preserve authored geometry, direction, and velocity. There is no automatic matching-frame discovery.               |
+| Crop and mask reframe                   | Interpolate `clip-path` or a mask on an inner visual wrapper to crop/reframe without changing source time. Polygon keyframes can form a polygon/mask transition.                                                            |
+| Directional wipe cut or iris/reveal cut | Animate a mask/clip boundary across overlapping visual clips; `/hyperframes-animation` owns the handoff choreography.                                                                                                       |
+| Split-screen handoff                    | Keep both visual clips placed by core, then keyframe their inner crop/mask wrappers and divider geometry.                                                                                                                   |
+| Constant source retime                  | `/hyperframes-core` owns normalized `data-playback-rate` (`0.1..5`) for render-safe picture and pitch-preserved sound. It is constant for the whole media element.                                                          |
+| Source speed ramps                      | Not supported: there is no time-varying playback-rate envelope. Preprocess a derived media asset, then place it through core.                                                                                               |
+| Freeze / hold                           | A visual pose, final source frame, or finished sub-composition can hold. Arbitrary mid-source freeze is not supported; preprocess a still/derived segment, place it as its own clip, then resume with another source range. |
+
+When editing picture and sound together, load `/hyperframes-core`, this skill for
+visual motion, and `/hyperframes-audio` for fades, crossfades, volume automation,
+ducking/carve, or effects on the placed tracks.
+
+A visual transition or cropping treatment is not a temporal source trim or
+splice. `/hyperframes-core` owns the timeline, clip timing, and source ranges;
+keyframes only animate the visible handoff or crop on wrappers inside those clips.
+For copyable combined picture/sound recipes, use `/hyperframes-core` → `references/creator-editing-recipes.md`.
+
 ## Procedure
 
 1. Identify the animated subject, visible states, final state, and runtime.
diff --git a/skills/hyperframes/SKILL.md b/skills/hyperframes/SKILL.md
index fd2168c22..d683d10bd 100644
--- a/skills/hyperframes/SKILL.md
+++ b/skills/hyperframes/SKILL.md
@@ -97,6 +97,21 @@ Use the bare name without `/`. If the command fails, surface the error; do not r
 | Registry blocks and components                                                                                      | `/hyperframes-registry`  |
 | Figma assets, tokens, components, or storyboard frames as reconstructed motion                                      | `/figma`                 |
 
+Creator edit phrases are cross-domain requests. Load every skill named in the matching row:
+
+| Creator request                                                                                   | Required domains                                                                                                                                                                  |
+| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| “cut this footage”, hard cut, trim, splice, reorder, or use a source range                        | `/general-video` + `/hyperframes-core`; core owns `data-start`, `data-duration`, `data-media-start`, and track layout.                                                            |
+| zoom in here, punch-in / punch-out, smooth multi-state zoom or reframe, Ken Burns, or camera move | `/general-video` + `/hyperframes-core` + `/hyperframes-keyframes`; animate the inner visual/crop wrapper, not the timed clip.                                                     |
+| match cut or whip pan camera transition                                                           | `/general-video` + `/hyperframes-animation` + `/hyperframes-keyframes` + `/hyperframes-registry`; search/install a transition primitive before hand-authoring.                    |
+| fade, crossfade, track gain/volume, automation, duck/carve, or audio effects                      | `/general-video` + `/hyperframes-core` + `/hyperframes-audio`; core places clips, audio mixes placed tracks.                                                                      |
+| picture and sound edits that combine cuts with camera motion or mixing                            | `/general-video` + `/hyperframes-core` + `/hyperframes-keyframes` when there is visual motion + `/hyperframes-audio` when sound is faded, mixed, ducked, automated, or processed. |
+| source or generate media, or preprocess an unsupported speed ramp/mid-source freeze               | `/media-use`; sourcing/generation/preprocessing only, never placed-track mixing.                                                                                                  |
+
+Constant `data-playback-rate` is render-safe for picture and pitch-preserved
+sound. It does not make source speed ramps keyframeable; preprocess ramps.
+For copyable edit contracts, load `/hyperframes-core` → `references/creator-editing-recipes.md`.
+
 Broad feedback about how photographic media looks or behaves also routes to
 `/media-use`, even when the user never says “color grading” or “effect”: fix
 dark/flat/boring footage, stylize a clip, hide a face, or improve a media