@hyperframes/producer 0.4.7 → 0.4.9

package/dist/public-server.js

@@ -5117,12 +5117,12 @@ var require_common = __commonJS({
       createDebug.skips = [];
       createDebug.formatters = {};
       function selectColor(namespace) {
-        let hash = 0;
+        let hash2 = 0;
         for (let i = 0; i < namespace.length; i++) {
-          hash = (hash << 5) - hash + namespace.charCodeAt(i);
-          hash |= 0;
+          hash2 = (hash2 << 5) - hash2 + namespace.charCodeAt(i);
+          hash2 |= 0;
         }
-        return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
+        return createDebug.colors[Math.abs(hash2) % createDebug.colors.length];
       }
       createDebug.selectColor = selectColor;
       function createDebug(namespace) {
@@ -54350,25 +54350,25 @@ var require_data = __commonJS({
     var notmodified_1 = __importDefault2(require_notmodified());
     var debug6 = (0, debug_1.default)("get-uri:data");
     var DataReadable = class extends stream_1.Readable {
-      constructor(hash, buf) {
+      constructor(hash2, buf) {
         super();
         this.push(buf);
         this.push(null);
-        this.hash = hash;
+        this.hash = hash2;
       }
     };
     var data = async ({ href: uri }, { cache } = {}) => {
       const shasum = (0, crypto_1.createHash)("sha1");
       shasum.update(uri);
-      const hash = shasum.digest("hex");
-      debug6('generated SHA1 hash for "data:" URI: %o', hash);
-      if (cache?.hash === hash) {
-        debug6("got matching cache SHA1 hash: %o", hash);
+      const hash2 = shasum.digest("hex");
+      debug6('generated SHA1 hash for "data:" URI: %o', hash2);
+      if (cache?.hash === hash2) {
+        debug6("got matching cache SHA1 hash: %o", hash2);
         throw new notmodified_1.default();
       } else {
         debug6('creating Readable stream from "data:" URI buffer');
         const { buffer } = (0, data_uri_to_buffer_1.dataUriToBuffer)(uri);
-        return new DataReadable(hash, Buffer.from(buffer));
+        return new DataReadable(hash2, Buffer.from(buffer));
       }
     };
     exports.data = data;
@@ -75363,14 +75363,14 @@ var require_dist10 = __commonJS({
             (0, quickjs_emscripten_1.getQuickJS)(),
             this.loadPacFile()
           ]);
-          const hash = crypto3.createHash("sha1").update(code).digest("hex");
-          if (this.resolver && this.resolverHash === hash) {
+          const hash2 = crypto3.createHash("sha1").update(code).digest("hex");
+          if (this.resolver && this.resolverHash === hash2) {
             debug6("Same sha1 hash for code - contents have not changed, reusing previous proxy resolver");
             return this.resolver;
           }
           debug6("Creating new proxy resolver instance");
           this.resolver = (0, pac_resolver_1.createPacResolver)(qjs, code, this.opts);
-          this.resolverHash = hash;
+          this.resolverHash = hash2;
           return this.resolver;
         } catch (err) {
           if (this.resolver && err.code === "ENOTMODIFIED") {
@@ -102433,6 +102433,7 @@ var mediaRules = [
     const timedTagPositions = [];
     for (const tag of tags) {
       if (tag.name === "video" || tag.name === "audio") continue;
+      if (readAttr(tag.raw, "data-composition-id")) continue;
       if (readAttr(tag.raw, "data-start")) {
         timedTagPositions.push({
           name: tag.name,
@@ -103539,7 +103540,8 @@ function lintHyperframeHtml(html, options = {}) {
 }
 
 // ../core/src/compiler/rewriteSubCompPaths.ts
-import { join as join4, resolve as resolve6, dirname as dirname4 } from "path";
+import { posix } from "path";
+var { join: join4, resolve: resolve6, dirname: dirname4 } = posix;
 var PATH_ATTRS = ["src", "href"];
 var CSS_URL_RE = /\burl\(\s*(["']?)([^)"']+)\1\s*\)/g;
 function isAbsoluteOrSpecial(val) {
@@ -103706,11 +103708,19 @@ async function pageScreenshotCapture(page, options) {
   });
   return Buffer.from(result.data, "base64");
 }
+var TRANSPARENT_BG_STYLE_ID = "__hf_transparent_bg__";
 async function initTransparentBackground(page) {
   const client = await getCdpSession(page);
   await client.send("Emulation.setDefaultBackgroundColorOverride", {
     color: { r: 0, g: 0, b: 0, a: 0 }
   });
+  await page.evaluate((styleId) => {
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = "html,body,[data-composition-id]{background:transparent !important;background-color:transparent !important;background-image:none !important;}";
+    document.head.appendChild(style);
+  }, TRANSPARENT_BG_STYLE_ID);
 }
 async function captureAlphaPng(page, width, height) {
   const client = await getCdpSession(page);
@@ -103724,6 +103734,57 @@ async function captureAlphaPng(page, width, height) {
   });
   return Buffer.from(result.data, "base64");
 }
+var DOM_LAYER_MASK_STYLE_ID = "__hf_dom_layer_mask__";
+async function applyDomLayerMask(page, showIds, extraHideIds) {
+  await page.evaluate(
+    (args) => {
+      const existing = document.getElementById(args.styleId);
+      if (existing) existing.remove();
+      const showSelectors = [];
+      for (const id of args.show) {
+        const escaped = CSS.escape(id);
+        showSelectors.push(`#${escaped}`, `#${escaped} *`);
+        const renderEscaped = CSS.escape(`__render_frame_${id}__`);
+        showSelectors.push(`#${renderEscaped}`, `#${renderEscaped} *`);
+      }
+      const massHideRule = "body *{visibility:hidden !important;}";
+      const showRule = showSelectors.length === 0 ? "" : `${showSelectors.join(",")}{visibility:visible !important;}`;
+      const style = document.createElement("style");
+      style.id = args.styleId;
+      style.textContent = `${massHideRule}
+${showRule}`;
+      document.head.appendChild(style);
+      for (const id of args.hide) {
+        const el = document.getElementById(id);
+        if (el) {
+          el.style.setProperty("visibility", "hidden", "important");
+        }
+        const img = document.getElementById(`__render_frame_${id}__`);
+        if (img) {
+          img.style.setProperty("visibility", "hidden", "important");
+        }
+      }
+    },
+    { show: showIds, hide: extraHideIds, styleId: DOM_LAYER_MASK_STYLE_ID }
+  );
+}
+async function removeDomLayerMask(page, extraHideIds) {
+  await page.evaluate(
+    (args) => {
+      const style = document.getElementById(args.styleId);
+      if (style) style.remove();
+      for (const id of args.hide) {
+        const el = document.getElementById(id);
+        if (el) {
+          el.style.removeProperty("visibility");
+        }
+        const img = document.getElementById(`__render_frame_${id}__`);
+        if (img) img.style.removeProperty("visibility");
+      }
+    },
+    { hide: extraHideIds, styleId: DOM_LAYER_MASK_STYLE_ID }
+  );
+}
 async function injectVideoFramesBatch(page, updates) {
   if (updates.length === 0) return;
   await page.evaluate(
@@ -103764,6 +103825,7 @@ async function injectVideoFramesBatch(page, updates) {
         img.style.objectPosition = computedStyle.objectPosition;
         img.style.zIndex = computedStyle.zIndex;
         for (const property of visualProperties) {
+          if (property === "opacity") continue;
           if (sourceIsStatic && (property === "top" || property === "left" || property === "right" || property === "bottom" || property === "inset")) {
             continue;
           }
@@ -104667,6 +104729,10 @@ function isHdrColorSpace(cs) {
   if (!cs) return false;
   return cs.colorPrimaries.includes("bt2020") || cs.colorSpace.includes("bt2020") || cs.colorTransfer === "smpte2084" || cs.colorTransfer === "arib-std-b67";
 }
+function detectTransfer(cs) {
+  if (cs?.colorTransfer === "smpte2084") return "pq";
+  return "hlg";
+}
 var DEFAULT_HDR10_MASTERING = {
   masterDisplay: "G(13250,34500)B(7500,3000)R(34000,16000)WP(15635,16450)L(10000000,1)",
   maxCll: "1000,400"
@@ -105161,10 +105227,10 @@ import { finished } from "stream/promises";
 var downloadPathCache = /* @__PURE__ */ new Map();
 var inFlightDownloads = /* @__PURE__ */ new Map();
 function getFilenameFromUrl(url) {
-  const hash = createHash("md5").update(url).digest("hex").slice(0, 12);
+  const hash2 = createHash("md5").update(url).digest("hex").slice(0, 12);
   const urlObj = new URL(url);
   const ext = extname2(urlObj.pathname) || ".mp4";
-  return `download_${hash}${ext}`;
+  return `download_${hash2}${ext}`;
 }
 async function downloadToTemp(url, destDir, timeoutMs = 3e5) {
   const cachedPath = downloadPathCache.get(url);
@@ -105665,34 +105731,6 @@ function createVideoFrameInjector(frameLookup, config2) {
     }
   };
 }
-async function hideVideoElements(page, videoIds) {
-  if (videoIds.length === 0) return;
-  await page.evaluate((ids) => {
-    for (const id of ids) {
-      const el = document.getElementById(id);
-      if (el) {
-        el.style.setProperty("visibility", "hidden", "important");
-        el.style.setProperty("opacity", "0", "important");
-        const img = document.getElementById(`__render_frame_${id}__`);
-        if (img) img.style.setProperty("visibility", "hidden", "important");
-      }
-    }
-  }, videoIds);
-}
-async function showVideoElements(page, videoIds) {
-  if (videoIds.length === 0) return;
-  await page.evaluate((ids) => {
-    for (const id of ids) {
-      const el = document.getElementById(id);
-      if (el) {
-        el.style.removeProperty("visibility");
-        el.style.removeProperty("opacity");
-        const img = document.getElementById(`__render_frame_${id}__`);
-        if (img) img.style.removeProperty("visibility");
-      }
-    }
-  }, videoIds);
-}
 async function queryElementStacking(page, nativeHdrVideoIds) {
   const hdrIds = Array.from(nativeHdrVideoIds);
   return page.evaluate((hdrIdList) => {
@@ -105710,14 +105748,103 @@ async function queryElementStacking(page, nativeHdrVideoIds) {
       }
       return 0;
     }
+    function getEffectiveBorderRadius(node) {
+      function resolveRadius(value, el) {
+        if (value.includes("%")) {
+          const pct = parseFloat(value) / 100;
+          const htmlEl = el;
+          const w = htmlEl.offsetWidth || 0;
+          const h = htmlEl.offsetHeight || 0;
+          return pct * Math.min(w, h);
+        }
+        return parseFloat(value) || 0;
+      }
+      const selfCs = window.getComputedStyle(node);
+      const selfRadii = [
+        resolveRadius(selfCs.borderTopLeftRadius, node),
+        resolveRadius(selfCs.borderTopRightRadius, node),
+        resolveRadius(selfCs.borderBottomRightRadius, node),
+        resolveRadius(selfCs.borderBottomLeftRadius, node)
+      ];
+      if (selfRadii[0] > 0 || selfRadii[1] > 0 || selfRadii[2] > 0 || selfRadii[3] > 0) {
+        return selfRadii;
+      }
+      let current = node.parentElement;
+      while (current) {
+        const cs = window.getComputedStyle(current);
+        if (cs.overflow !== "visible") {
+          const tl = resolveRadius(cs.borderTopLeftRadius, current);
+          const tr = resolveRadius(cs.borderTopRightRadius, current);
+          const brr = resolveRadius(cs.borderBottomRightRadius, current);
+          const bl = resolveRadius(cs.borderBottomLeftRadius, current);
+          if (tl > 0 || tr > 0 || brr > 0 || bl > 0) {
+            return [tl, tr, brr, bl];
+          }
+        }
+        current = current.parentElement;
+      }
+      return [0, 0, 0, 0];
+    }
+    function getEffectiveOpacity(node) {
+      let opacity = 1;
+      let current = node;
+      while (current) {
+        const cs = window.getComputedStyle(current);
+        const val = parseFloat(cs.opacity);
+        opacity *= Number.isNaN(val) ? 1 : val;
+        current = current.parentElement;
+      }
+      return opacity;
+    }
+    function getViewportMatrix(node) {
+      const chain = [];
+      let current = node;
+      while (current instanceof HTMLElement) {
+        chain.push(current);
+        const next = current.offsetParent ?? current.parentElement;
+        if (next === current) break;
+        current = next;
+      }
+      let mat = new DOMMatrix();
+      for (let i = chain.length - 1; i >= 0; i--) {
+        const htmlEl = chain[i];
+        if (!htmlEl) continue;
+        mat = mat.translate(htmlEl.offsetLeft, htmlEl.offsetTop);
+        const cs = window.getComputedStyle(htmlEl);
+        if (cs.transform && cs.transform !== "none") {
+          const origin = cs.transformOrigin.split(" ");
+          const ox = resolveLength(origin[0] ?? "0", htmlEl.offsetWidth);
+          const oy = resolveLength(origin[1] ?? "0", htmlEl.offsetHeight);
+          try {
+            const t = new DOMMatrix(cs.transform);
+            if (Number.isFinite(t.a) && Number.isFinite(t.b) && Number.isFinite(t.c) && Number.isFinite(t.d) && Number.isFinite(t.e) && Number.isFinite(t.f)) {
+              mat = mat.translate(ox, oy).multiply(t).translate(-ox, -oy);
+            }
+          } catch {
+          }
+        }
+      }
+      return mat.toString();
+    }
+    function resolveLength(value, basis) {
+      if (value.endsWith("%")) {
+        const pct = parseFloat(value) / 100;
+        return Number.isFinite(pct) ? pct * basis : 0;
+      }
+      const n = parseFloat(value);
+      return Number.isFinite(n) ? n : 0;
+    }
     for (const el of elements) {
       const id = el.id;
       if (!id) continue;
       const rect = el.getBoundingClientRect();
       const style = window.getComputedStyle(el);
       const zIndex = getEffectiveZIndex(el);
-      const opacity = parseFloat(style.opacity) || 1;
+      const isHdrEl = hdrSet.has(id);
+      const opacityStartNode = isHdrEl ? el.parentElement : el;
+      const opacity = opacityStartNode ? getEffectiveOpacity(opacityStartNode) : 1;
       const visible = style.visibility !== "hidden" && style.display !== "none" && rect.width > 0 && rect.height > 0;
+      const htmlEl = el instanceof HTMLElement ? el : null;
       results.push({
         id,
         zIndex,
@@ -105725,9 +105852,16 @@ async function queryElementStacking(page, nativeHdrVideoIds) {
         y: Math.round(rect.y),
         width: Math.round(rect.width),
         height: Math.round(rect.height),
+        layoutWidth: htmlEl?.offsetWidth || Math.round(rect.width),
+        layoutHeight: htmlEl?.offsetHeight || Math.round(rect.height),
         opacity,
         visible,
-        isHdr: hdrSet.has(id)
+        isHdr: hdrSet.has(id),
+        // For HDR elements, use the full accumulated viewport matrix so the
+        // affine blit can apply rotation/scale/translate properly. For DOM
+        // elements, the element-level transform is sufficient for reference.
+        transform: isHdrEl ? getViewportMatrix(el) : style.transform || "none",
+        borderRadius: isHdrEl ? getEffectiveBorderRadius(el) : [0, 0, 0, 0]
       });
     }
     return results;
@@ -106485,6 +106619,99 @@ function blitRgb48leRegion(canvas, source2, dx, dy, sw, sh, canvasWidth, canvasH
     }
   }
 }
+function blitRgb48leAffine(canvas, source2, matrix, srcW, srcH, canvasW, canvasH, opacity, borderRadius) {
+  const a = matrix[0];
+  const b = matrix[1];
+  const c = matrix[2];
+  const d = matrix[3];
+  const tx = matrix[4];
+  const ty = matrix[5];
+  if (a === void 0 || b === void 0 || c === void 0 || d === void 0 || tx === void 0 || ty === void 0)
+    return;
+  const det = a * d - b * c;
+  if (Math.abs(det) < 1e-10) return;
+  const invA = d / det;
+  const invB = -b / det;
+  const invC = -c / det;
+  const invD = a / det;
+  const invTx = -(invA * tx + invC * ty);
+  const invTy = -(invB * tx + invD * ty);
+  const op = opacity ?? 1;
+  const hasMask = borderRadius !== void 0;
+  const corners = [
+    [tx, ty],
+    [a * srcW + tx, b * srcW + ty],
+    [c * srcH + tx, d * srcH + ty],
+    [a * srcW + c * srcH + tx, b * srcW + d * srcH + ty]
+  ];
+  let minX = canvasW, maxX = 0, minY = canvasH, maxY = 0;
+  for (const corner of corners) {
+    const cx = corner[0] ?? 0;
+    const cy = corner[1] ?? 0;
+    if (cx < minX) minX = cx;
+    if (cx > maxX) maxX = cx;
+    if (cy < minY) minY = cy;
+    if (cy > maxY) maxY = cy;
+  }
+  const startX = Math.max(0, Math.floor(minX));
+  const endX = Math.min(canvasW, Math.ceil(maxX));
+  const startY = Math.max(0, Math.floor(minY));
+  const endY = Math.min(canvasH, Math.ceil(maxY));
+  for (let dy = startY; dy < endY; dy++) {
+    for (let dx = startX; dx < endX; dx++) {
+      const sx = invA * dx + invC * dy + invTx;
+      const sy = invB * dx + invD * dy + invTy;
+      if (sx < 0 || sy < 0 || sx >= srcW || sy >= srcH) continue;
+      let effectiveOp = op;
+      if (hasMask) {
+        const ma = roundedRectAlpha(sx, sy, srcW, srcH, borderRadius);
+        if (ma <= 0) continue;
+        effectiveOp *= ma;
+      }
+      const x0 = Math.floor(sx);
+      const y0 = Math.floor(sy);
+      const fx = sx - x0;
+      const fy = sy - y0;
+      const x1 = Math.min(x0 + 1, srcW - 1);
+      const y1 = Math.min(y0 + 1, srcH - 1);
+      const off00 = (y0 * srcW + x0) * 6;
+      const off10 = (y0 * srcW + x1) * 6;
+      const off01 = (y1 * srcW + x0) * 6;
+      const off11 = (y1 * srcW + x1) * 6;
+      const w00 = (1 - fx) * (1 - fy);
+      const w10 = fx * (1 - fy);
+      const w01 = (1 - fx) * fy;
+      const w11 = fx * fy;
+      const sr = source2.readUInt16LE(off00) * w00 + source2.readUInt16LE(off10) * w10 + source2.readUInt16LE(off01) * w01 + source2.readUInt16LE(off11) * w11;
+      const sg = source2.readUInt16LE(off00 + 2) * w00 + source2.readUInt16LE(off10 + 2) * w10 + source2.readUInt16LE(off01 + 2) * w01 + source2.readUInt16LE(off11 + 2) * w11;
+      const sb = source2.readUInt16LE(off00 + 4) * w00 + source2.readUInt16LE(off10 + 4) * w10 + source2.readUInt16LE(off01 + 4) * w01 + source2.readUInt16LE(off11 + 4) * w11;
+      const dstOff = (dy * canvasW + dx) * 6;
+      if (effectiveOp >= 0.999) {
+        canvas.writeUInt16LE(Math.round(sr), dstOff);
+        canvas.writeUInt16LE(Math.round(sg), dstOff + 2);
+        canvas.writeUInt16LE(Math.round(sb), dstOff + 4);
+      } else {
+        const invEff = 1 - effectiveOp;
+        const dr = canvas.readUInt16LE(dstOff);
+        const dg = canvas.readUInt16LE(dstOff + 2);
+        const db = canvas.readUInt16LE(dstOff + 4);
+        canvas.writeUInt16LE(Math.round(sr * effectiveOp + dr * invEff), dstOff);
+        canvas.writeUInt16LE(Math.round(sg * effectiveOp + dg * invEff), dstOff + 2);
+        canvas.writeUInt16LE(Math.round(sb * effectiveOp + db * invEff), dstOff + 4);
+      }
+    }
+  }
+}
+function parseTransformMatrix(css) {
+  if (!css || css === "none") return null;
+  const match2 = css.match(
+    /^matrix\(\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,]+),\s*([^,)]+)\s*\)$/
+  );
+  if (!match2) return null;
+  const values = match2.slice(1, 7).map(Number);
+  if (!values.every(Number.isFinite)) return null;
+  return values;
+}
 
 // ../engine/src/utils/layerCompositor.ts
 function groupIntoLayers(elements) {
@@ -106505,6 +106732,637 @@ function groupIntoLayers(elements) {
   return layers;
 }
 
+// ../engine/src/utils/shaderTransitions.ts
+var PQ_M1 = 0.1593017578125;
+var PQ_M2 = 78.84375;
+var PQ_C1 = 0.8359375;
+var PQ_C2 = 18.8515625;
+var PQ_C3 = 18.6875;
+function pqEotf(signal) {
+  const sp = Math.pow(Math.max(0, signal), 1 / PQ_M2);
+  const num = Math.max(sp - PQ_C1, 0);
+  const den = PQ_C2 - PQ_C3 * sp;
+  return den > 0 ? Math.pow(num / den, 1 / PQ_M1) : 0;
+}
+function pqOetf(linear) {
+  const lp = Math.pow(Math.max(0, linear), PQ_M1);
+  return Math.pow((PQ_C1 + PQ_C2 * lp) / (1 + PQ_C3 * lp), PQ_M2);
+}
+function hlgEotf(signal) {
+  const a = 0.17883277;
+  const b = 1 - 4 * a;
+  const c = 0.5 - a * Math.log(4 * a);
+  if (signal <= 0.5) {
+    return signal * signal / 3;
+  }
+  return (Math.exp((signal - c) / a) + b) / 12;
+}
+function hlgOetf(linear) {
+  const a = 0.17883277;
+  const b = 1 - 4 * a;
+  const c = 0.5 - a * Math.log(4 * a);
+  if (linear <= 1 / 12) {
+    return Math.sqrt(3 * linear);
+  }
+  return a * Math.log(12 * linear - b) + c;
+}
+function buildLut(fn) {
+  const lut = new Uint16Array(65536);
+  for (let i = 0; i < 65536; i++) {
+    lut[i] = Math.round(fn(i / 65535) * 65535);
+  }
+  return lut;
+}
+var HLG_OOTF_LW = 1e3;
+var HLG_OOTF_GAMMA = 1.2 * Math.pow(1.111, Math.log2(HLG_OOTF_LW / 1e3));
+function hlgSceneToPqDisplay(sceneLinear) {
+  const displayNits = HLG_OOTF_LW * Math.pow(Math.max(0, sceneLinear), HLG_OOTF_GAMMA);
+  return displayNits / 1e4;
+}
+function pqDisplayToHlgScene(displayNormalized) {
+  const displayNits = displayNormalized * 1e4;
+  return Math.pow(Math.max(0, displayNits / HLG_OOTF_LW), 1 / HLG_OOTF_GAMMA);
+}
+var hlgToPqLut = null;
+var pqToHlgLut = null;
+function getHlgToPqLut() {
+  if (!hlgToPqLut) hlgToPqLut = buildLut((v) => pqOetf(hlgSceneToPqDisplay(hlgEotf(v))));
+  return hlgToPqLut;
+}
+function getPqToHlgLut() {
+  if (!pqToHlgLut) pqToHlgLut = buildLut((v) => hlgOetf(pqDisplayToHlgScene(pqEotf(v))));
+  return pqToHlgLut;
+}
+function convertTransfer(buf, from2, to) {
+  if (from2 === to) return;
+  const lut = from2 === "hlg" ? getHlgToPqLut() : getPqToHlgLut();
+  const len = buf.length / 2;
+  for (let i = 0; i < len; i++) {
+    const off = i * 2;
+    buf.writeUInt16LE(lut[buf.readUInt16LE(off)] ?? 0, off);
+  }
+}
+function sampleRgb48le(buf, u, v, w, h) {
+  const uc = Math.max(0, Math.min(1, u));
+  const vc = Math.max(0, Math.min(1, v));
+  const sx = uc * (w - 1);
+  const sy = vc * (h - 1);
+  const x0 = Math.floor(sx);
+  const y0 = Math.floor(sy);
+  const x1 = Math.min(x0 + 1, w - 1);
+  const y1 = Math.min(y0 + 1, h - 1);
+  const fx = sx - x0;
+  const fy = sy - y0;
+  const w00 = (1 - fx) * (1 - fy);
+  const w10 = fx * (1 - fy);
+  const w01 = (1 - fx) * fy;
+  const w11 = fx * fy;
+  const off00 = (y0 * w + x0) * 6;
+  const off10 = (y0 * w + x1) * 6;
+  const off01 = (y1 * w + x0) * 6;
+  const off11 = (y1 * w + x1) * 6;
+  const r = Math.round(
+    buf.readUInt16LE(off00) * w00 + buf.readUInt16LE(off10) * w10 + buf.readUInt16LE(off01) * w01 + buf.readUInt16LE(off11) * w11
+  );
+  const g = Math.round(
+    buf.readUInt16LE(off00 + 2) * w00 + buf.readUInt16LE(off10 + 2) * w10 + buf.readUInt16LE(off01 + 2) * w01 + buf.readUInt16LE(off11 + 2) * w11
+  );
+  const b = Math.round(
+    buf.readUInt16LE(off00 + 4) * w00 + buf.readUInt16LE(off10 + 4) * w10 + buf.readUInt16LE(off01 + 4) * w01 + buf.readUInt16LE(off11 + 4) * w11
+  );
+  return [r, g, b];
+}
+function mix16(a, b, t) {
+  return Math.round(a * (1 - t) + b * t);
+}
+function clamp16(v) {
+  return Math.max(0, Math.min(65535, v));
+}
+function smoothstep(edge0, edge1, x) {
+  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+function hash(x, y) {
+  return (Math.sin(x * 127.1 + y * 311.7) * 43758.5453 % 1 + 1) % 1;
+}
+function vnoise(px, py) {
+  const ix = Math.floor(px);
+  const iy = Math.floor(py);
+  let fx = px - ix;
+  let fy = py - iy;
+  fx = fx * fx * fx * (fx * (fx * 6 - 15) + 10);
+  fy = fy * fy * fy * (fy * (fy * 6 - 15) + 10);
+  const h00 = hash(ix, iy);
+  const h10 = hash(ix + 1, iy);
+  const h01 = hash(ix, iy + 1);
+  const h11 = hash(ix + 1, iy + 1);
+  return h00 * (1 - fx) * (1 - fy) + h10 * fx * (1 - fy) + h01 * (1 - fx) * fy + h11 * fx * fy;
+}
+var ROT_A = 0.8;
+var ROT_B = 0.6;
+function fbm(px, py) {
+  let value = 0;
+  let amplitude = 0.5;
+  let x = px;
+  let y = py;
+  for (let i = 0; i < 5; i++) {
+    value += amplitude * vnoise(x, y);
+    const nx = ROT_A * x - ROT_B * y;
+    const ny = ROT_B * x + ROT_A * y;
+    x = nx * 2.02;
+    y = ny * 2.02;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+var TRANSITIONS = {};
+var crossfade = (from2, to, out, w, h, p) => {
+  const inv = 1 - p;
+  for (let i = 0; i < w * h; i++) {
+    const o = i * 6;
+    out.writeUInt16LE(Math.round(from2.readUInt16LE(o) * inv + to.readUInt16LE(o) * p), o);
+    out.writeUInt16LE(
+      Math.round(from2.readUInt16LE(o + 2) * inv + to.readUInt16LE(o + 2) * p),
+      o + 2
+    );
+    out.writeUInt16LE(
+      Math.round(from2.readUInt16LE(o + 4) * inv + to.readUInt16LE(o + 4) * p),
+      o + 4
+    );
+  }
+};
+TRANSITIONS["crossfade"] = crossfade;
+var flashThroughWhite = (from2, to, out, w, h, p) => {
+  const toWhite = smoothstep(0, 0.45, p);
+  const fromWhite = 1 - smoothstep(0.5, 1, p);
+  const blend = smoothstep(0.35, 0.65, p);
+  for (let i = 0; i < w * h; i++) {
+    const o = i * 6;
+    const fromR = mix16(from2.readUInt16LE(o), 65535, toWhite);
+    const fromG = mix16(from2.readUInt16LE(o + 2), 65535, toWhite);
+    const fromB = mix16(from2.readUInt16LE(o + 4), 65535, toWhite);
+    const toR = mix16(to.readUInt16LE(o), 65535, fromWhite);
+    const toG = mix16(to.readUInt16LE(o + 2), 65535, fromWhite);
+    const toB = mix16(to.readUInt16LE(o + 4), 65535, fromWhite);
+    out.writeUInt16LE(mix16(fromR, toR, blend), o);
+    out.writeUInt16LE(mix16(fromG, toG, blend), o + 2);
+    out.writeUInt16LE(mix16(fromB, toB, blend), o + 4);
+  }
+};
+TRANSITIONS["flash-through-white"] = flashThroughWhite;
+var chromaticSplit = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const cx = ux - 0.5;
+    const cy = uy - 0.5;
+    const fromShift = p * 0.06;
+    const fr = sampleRgb48le(from2, ux + cx * fromShift, uy + cy * fromShift, w, h)[0];
+    const fg = sampleRgb48le(from2, ux, uy, w, h)[1];
+    const fb = sampleRgb48le(from2, ux - cx * fromShift, uy - cy * fromShift, w, h)[2];
+    const toShift = (1 - p) * 0.06;
+    const tr = sampleRgb48le(to, ux - cx * toShift, uy - cy * toShift, w, h)[0];
+    const tg = sampleRgb48le(to, ux, uy, w, h)[1];
+    const tb = sampleRgb48le(to, ux + cx * toShift, uy + cy * toShift, w, h)[2];
+    out.writeUInt16LE(clamp16(mix16(fr, tr, p)), o);
+    out.writeUInt16LE(clamp16(mix16(fg, tg, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fb, tb, p)), o + 4);
+  }
+};
+TRANSITIONS["chromatic-split"] = chromaticSplit;
+var sdfIris = (from2, to, out, w, h, p) => {
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const ax = (ux - 0.5) * (w / h);
+    const ay = uy - 0.5;
+    const d = Math.sqrt(ax * ax + ay * ay);
+    const radius = p * 1.2;
+    const fw = 3e-3;
+    const edge = smoothstep(radius + fw, radius - fw, d);
+    const ring1 = Math.exp(-Math.abs(d - radius) * 25);
+    const ring2 = Math.exp(-Math.abs(d - radius + 0.04) * 20) * 0.5;
+    const ring3 = Math.exp(-Math.abs(d - radius + 0.08) * 15) * 0.25;
+    const glow = (ring1 + ring2 + ring3) * p * (1 - p) * 4;
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, ux, uy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, edge) + accentBright[0] * glow * 0.6), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, edge) + accentBright[1] * glow * 0.6), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, edge) + accentBright[2] * glow * 0.6), o + 4);
+  }
+};
+TRANSITIONS["sdf-iris"] = sdfIris;
+function glitchRand(x, y) {
+  return (Math.sin(x * 12.9898 + y * 78.233) * 43758.5453 % 1 + 1) % 1;
+}
+var glitch = (from2, to, out, w, h, p) => {
+  const intensity = p * (1 - p) * 4;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const lineY = Math.floor(uy * 60) / 60;
+    const lineDisp = (glitchRand(lineY, Math.floor(p * 17)) - 0.5) * 0.18 * intensity;
+    const blockX = Math.floor(ux * 12);
+    const blockY = Math.floor(uy * 8);
+    const progressStep = Math.floor(p * 11);
+    const br = glitchRand(blockX + progressStep, blockY + progressStep);
+    const ba = (br >= 0.83 ? 1 : 0) * intensity;
+    const bdx = (glitchRand(blockX * 2.1, blockY * 2.1) - 0.5) * 0.35 * ba;
+    const bdy = (glitchRand(blockX * 3.7, blockY * 3.7) - 0.5) * 0.35 * ba;
+    const uvx = Math.max(0, Math.min(1, ux + lineDisp + bdx));
+    const uvy = Math.max(0, Math.min(1, uy + bdy));
+    const shift = intensity * 0.035;
+    const r = sampleRgb48le(from2, uvx + shift, uvy, w, h)[0];
+    const g = sampleRgb48le(from2, uvx, uvy, w, h)[1];
+    const b = sampleRgb48le(from2, uvx - shift, uvy, w, h)[2];
+    let cr = r / 65535;
+    let cg = g / 65535;
+    let cb = b / 65535;
+    const scanline = (uy * h * 0.5 % 1 + 1) % 1 >= 0.5 ? 0.05 * intensity : 0;
+    cr -= scanline;
+    cg -= scanline;
+    cb -= scanline;
+    const flicker = 1 + (glitchRand(Math.floor(p * 23), 0) - 0.5) * 0.3 * intensity;
+    cr *= flicker;
+    cg *= flicker;
+    cb *= flicker;
+    const levels = 256 - (256 - 8) * (intensity * 0.5);
+    cr = Math.floor(cr * levels) / levels;
+    cg = Math.floor(cg * levels) / levels;
+    cb = Math.floor(cb * levels) / levels;
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    out.writeUInt16LE(clamp16(mix16(Math.round(cr * 65535), toR, p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(cg * 65535), toG, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(cb * 65535), toB, p)), o + 4);
+  }
+};
+TRANSITIONS["glitch"] = glitch;
+function aces(x) {
+  return Math.max(0, Math.min(1, x * (2.51 * x + 0.03) / (x * (2.43 * x + 0.59) + 0.14)));
+}
+var lightLeak = (from2, to, out, w, h, p) => {
+  const accent = [5e4 / 65535, 25e3 / 65535, 5e3 / 65535];
+  const accentBright = [65535 / 65535, 55e3 / 65535, 35e3 / 65535];
+  const lpx = 1.3;
+  const lpy = -0.2;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const dx = ux - lpx;
+    const dy = uy - lpy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const leak = Math.max(0, Math.min(1, Math.exp(-dist * 1.8) * p * 4));
+    const warmR = accent[0] + (accentBright[0] - accent[0]) * dist * 0.7;
+    const warmG = accent[1] + (accentBright[1] - accent[1]) * dist * 0.7;
+    const warmB = accent[2] + (accentBright[2] - accent[2]) * dist * 0.7;
+    const flare = Math.exp(-Math.abs(uy - (-0.2 + ux * 0.3)) * 15) * leak * 0.3;
+    const [fr, fg, fb] = sampleRgb48le(from2, ux, uy, w, h);
+    const fromR = fr / 65535;
+    const fromG = fg / 65535;
+    const fromB = fb / 65535;
+    const overR = aces(fromR + warmR * leak * 3 + accentBright[0] * flare);
+    const overG = aces(fromG + warmG * leak * 3 + accentBright[1] * flare);
+    const overB = aces(fromB + warmB * leak * 3 + accentBright[2] * flare);
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    const blend = smoothstep(0.15, 0.85, p);
+    out.writeUInt16LE(clamp16(mix16(Math.round(overR * 65535), toR, blend)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(overG * 65535), toG, blend)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(overB * 65535), toB, blend)), o + 4);
+  }
+};
+TRANSITIONS["light-leak"] = lightLeak;
+var crossWarpMorph = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const dispX = fbm(ux * 3, uy * 3) - 0.5;
+    const dispY = fbm(ux * 3 + 7.3, uy * 3 + 3.7) - 0.5;
+    const fromUx = Math.max(0, Math.min(1, ux + dispX * p * 0.5));
+    const fromUy = Math.max(0, Math.min(1, uy + dispY * p * 0.5));
+    const toUx = Math.max(0, Math.min(1, ux - dispX * (1 - p) * 0.5));
+    const toUy = Math.max(0, Math.min(1, uy - dispY * (1 - p) * 0.5));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, fromUy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, toUy, w, h);
+    const n = fbm(ux * 4 + 3.1, uy * 4 + 1.7);
+    const blend = smoothstep(0.4, 0.6, n + p * 1.2 - 0.6);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, blend)), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, blend)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, blend)), o + 4);
+  }
+};
+TRANSITIONS["cross-warp-morph"] = crossWarpMorph;
+var whipPan = (from2, to, out, w, h, p) => {
+  const fromOff = p * 1.5;
+  const toOff = (1 - p) * 1.5;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    let fromR = 0, fromG = 0, fromB = 0;
+    for (let s = 0; s < 10; s++) {
+      const f = s / 10;
+      const fuv = Math.max(0, Math.min(1, ux + fromOff + p * 0.08 * f));
+      const [r, g, b] = sampleRgb48le(from2, fuv, uy, w, h);
+      fromR += r;
+      fromG += g;
+      fromB += b;
+    }
+    fromR /= 10;
+    fromG /= 10;
+    fromB /= 10;
+    let toR = 0, toG = 0, toB = 0;
+    for (let s = 0; s < 10; s++) {
+      const f = s / 10;
+      const tuv = Math.max(0, Math.min(1, ux - toOff - (1 - p) * 0.08 * f));
+      const [r, g, b] = sampleRgb48le(to, tuv, uy, w, h);
+      toR += r;
+      toG += g;
+      toB += b;
+    }
+    toR /= 10;
+    toG /= 10;
+    toB /= 10;
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromR), Math.round(toR), p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromG), Math.round(toG), p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromB), Math.round(toB), p)), o + 4);
+  }
+};
+TRANSITIONS["whip-pan"] = whipPan;
+var cinematicZoom = (from2, to, out, w, h, p) => {
+  const fromS = p * 0.08;
+  const toS = (1 - p) * 0.06;
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const dx = ux - 0.5;
+    const dy = uy - 0.5;
+    let fr = 0, fg = 0, fb = 0;
+    for (let s = 0; s < 12; s++) {
+      const f = s / 12;
+      const rr = sampleRgb48le(
+        from2,
+        ux - dx * fromS * 1.06 * f,
+        uy - dy * fromS * 1.06 * f,
+        w,
+        h
+      )[0];
+      const gg = sampleRgb48le(from2, ux - dx * fromS * f, uy - dy * fromS * f, w, h)[1];
+      const bb = sampleRgb48le(
+        from2,
+        ux - dx * fromS * 0.94 * f,
+        uy - dy * fromS * 0.94 * f,
+        w,
+        h
+      )[2];
+      fr += rr;
+      fg += gg;
+      fb += bb;
+    }
+    fr /= 12;
+    fg /= 12;
+    fb /= 12;
+    let tr = 0, tg = 0, tb = 0;
+    for (let s = 0; s < 12; s++) {
+      const f = s / 12;
+      const rr = sampleRgb48le(to, ux + dx * toS * 1.06 * f, uy + dy * toS * 1.06 * f, w, h)[0];
+      const gg = sampleRgb48le(to, ux + dx * toS * f, uy + dy * toS * f, w, h)[1];
+      const bb = sampleRgb48le(to, ux + dx * toS * 0.94 * f, uy + dy * toS * 0.94 * f, w, h)[2];
+      tr += rr;
+      tg += gg;
+      tb += bb;
+    }
+    tr /= 12;
+    tg /= 12;
+    tb /= 12;
+    out.writeUInt16LE(clamp16(mix16(Math.round(fr), Math.round(tr), p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fg), Math.round(tg), p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fb), Math.round(tb), p)), o + 4);
+  }
+};
+TRANSITIONS["cinematic-zoom"] = cinematicZoom;
+var gravitationalLens = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const uvx = ux - 0.5;
+    const uvy = uy - 0.5;
+    const dist = Math.sqrt(uvx * uvx + uvy * uvy);
+    const pull = p * 2;
+    const warpStr = pull * 0.3 / (dist + 0.1);
+    const warpedX = Math.max(0, Math.min(1, ux - uvx * warpStr));
+    const warpedY = Math.max(0, Math.min(1, uy - uvy * warpStr));
+    const [, ag] = sampleRgb48le(from2, warpedX, warpedY, w, h);
+    const horizon = smoothstep(0, 0.3, dist / (1 - p * 0.85 + 1e-3));
+    const shift = pull * 0.02 / (dist + 0.2);
+    const rSampX = Math.max(0, Math.min(1, ux - uvx * (warpStr + shift)));
+    const rSampY = Math.max(0, Math.min(1, uy - uvy * (warpStr + shift)));
+    const bSampX = Math.max(0, Math.min(1, ux - uvx * (warpStr - shift)));
+    const bSampY = Math.max(0, Math.min(1, uy - uvy * (warpStr - shift)));
+    const ar = sampleRgb48le(from2, rSampX, rSampY, w, h)[0];
+    const ab = sampleRgb48le(from2, bSampX, bSampY, w, h)[2];
+    const lensedR = Math.round(ar * horizon);
+    const lensedG = Math.round(ag * horizon);
+    const lensedB = Math.round(ab * horizon);
+    const [toR, toG, toB] = sampleRgb48le(to, ux, uy, w, h);
+    const blend = smoothstep(0.3, 0.9, p);
+    out.writeUInt16LE(clamp16(mix16(lensedR, toR, blend)), o);
+    out.writeUInt16LE(clamp16(mix16(lensedG, toG, blend)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(lensedB, toB, blend)), o + 4);
+  }
+};
+TRANSITIONS["gravitational-lens"] = gravitationalLens;
+var rippleWaves = (from2, to, out, w, h, p) => {
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const uvx = ux - 0.5;
+    const uvy = uy - 0.5;
+    const dist = Math.sqrt(uvx * uvx + uvy * uvy);
+    const nux = uvx + 1e-3;
+    const nuy = uvy + 1e-3;
+    const nlen = Math.sqrt(nux * nux + nuy * nuy);
+    const dirx = nux / nlen;
+    const diry = nuy / nlen;
+    const fromAmp = p * 0.04;
+    const fw1 = Math.exp(Math.sin(dist * 25 - p * 12) - 1);
+    const fw2 = Math.exp(Math.sin(dist * 50 - p * 18) - 1) * 0.5;
+    const fromUx = Math.max(0, Math.min(1, ux + dirx * (fw1 + fw2) * fromAmp));
+    const fromUy = Math.max(0, Math.min(1, uy + diry * (fw1 + fw2) * fromAmp));
+    const toAmp = (1 - p) * 0.04;
+    const tw1 = Math.exp(Math.sin(dist * 25 + p * 12) - 1);
+    const tw2 = Math.exp(Math.sin(dist * 50 + p * 18) - 1) * 0.5;
+    const toUx = Math.max(0, Math.min(1, ux - dirx * (tw1 + tw2) * toAmp));
+    const toUy = Math.max(0, Math.min(1, uy - diry * (tw1 + tw2) * toAmp));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, fromUy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, toUy, w, h);
+    const peak = fw1 * p;
+    const tintR = accentBright[0] * peak * 0.1;
+    const tintG = accentBright[1] * peak * 0.1;
+    const tintB = accentBright[2] * peak * 0.1;
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromR + tintR), toR, p)), o);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromG + tintG), toG, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(Math.round(fromB + tintB), toB, p)), o + 4);
+  }
+};
+TRANSITIONS["ripple-waves"] = rippleWaves;
+var swirlVortex = (from2, to, out, w, h, p) => {
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const uvx = ux - 0.5;
+    const uvy = uy - 0.5;
+    const dist = Math.sqrt(uvx * uvx + uvy * uvy);
+    const warp = fbm(ux * 4, uy * 4) * 0.5;
+    const fromAng = p * (1 - dist) * 10 + warp * p * 3;
+    const fs8 = Math.sin(fromAng);
+    const fc = Math.cos(fromAng);
+    const fromUx = Math.max(0, Math.min(1, uvx * fc - uvy * fs8 + 0.5));
+    const fromUy = Math.max(0, Math.min(1, uvx * fs8 + uvy * fc + 0.5));
+    const toAng = -(1 - p) * (1 - dist) * 10 - warp * (1 - p) * 3;
+    const ts = Math.sin(toAng);
+    const tc = Math.cos(toAng);
+    const toUx = Math.max(0, Math.min(1, uvx * tc - uvy * ts + 0.5));
+    const toUy = Math.max(0, Math.min(1, uvx * ts + uvy * tc + 0.5));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, fromUy, w, h);
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, toUy, w, h);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, p)), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, p)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, p)), o + 4);
+  }
+};
+TRANSITIONS["swirl-vortex"] = swirlVortex;
+var thermalDistortion = (from2, to, out, w, h, p) => {
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const heat = p * 1.5;
+    const yFade = smoothstep(1, 0, uy);
+    const shimmer = Math.sin(uy * 40 + fbm(ux * 6, uy * 6) * 8) * fbm(ux * 3 + 0, uy * 3 + p * 2);
+    const dispX = shimmer * heat * 0.03 * yFade;
+    const fromUx = Math.max(0, Math.min(1, ux + dispX));
+    const [fromR, fromG, fromB] = sampleRgb48le(from2, fromUx, uy, w, h);
+    const invShimmer = Math.sin(uy * 40 + fbm(ux * 6 + 3, uy * 6 + 3) * 8) * fbm(ux * 3 + 3, uy * 3 + p * 2);
+    const dispX2 = invShimmer * (1 - p) * 0.03 * yFade;
+    const toUx = Math.max(0, Math.min(1, ux + dispX2));
+    const [toR, toG, toB] = sampleRgb48le(to, toUx, uy, w, h);
+    const haze = heat * yFade * 0.15 * (1 - p);
+    out.writeUInt16LE(clamp16(mix16(fromR, toR, p) + Math.round(accentBright[0] * haze)), o);
+    out.writeUInt16LE(clamp16(mix16(fromG, toG, p) + Math.round(accentBright[1] * haze)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(fromB, toB, p) + Math.round(accentBright[2] * haze)), o + 4);
+  }
+};
+TRANSITIONS["thermal-distortion"] = thermalDistortion;
+var domainWarp = (from2, to, out, w, h, p) => {
+  const accentDark = [25e3, 8e3, 2e3];
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const qx = fbm(ux * 3, uy * 3);
+    const qy = fbm(ux * 3 + 5.2, uy * 3 + 1.3);
+    const rx = fbm(ux * 3 + qx * 4 + 1.7, uy * 3 + qy * 4 + 9.2);
+    const ry = fbm(ux * 3 + qx * 4 + 8.3, uy * 3 + qy * 4 + 2.8);
+    const n = fbm(ux * 3 + rx * 2, uy * 3 + ry * 2);
+    const warpDirX = (qx - 0.5) * 0.4;
+    const warpDirY = (qy - 0.5) * 0.4;
+    const aUx = Math.max(0, Math.min(1, ux + warpDirX * p));
+    const aUy = Math.max(0, Math.min(1, uy + warpDirY * p));
+    const bUx = Math.max(0, Math.min(1, ux - warpDirX * (1 - p)));
+    const bUy = Math.max(0, Math.min(1, uy - warpDirY * (1 - p)));
+    const [aR, aG, aB] = sampleRgb48le(from2, aUx, aUy, w, h);
+    const [bR, bG, bB] = sampleRgb48le(to, bUx, bUy, w, h);
+    const e = smoothstep(p - 0.08, p + 0.08, n);
+    const ed = Math.abs(n - p);
+    const pStep = p >= 1 ? 1 : 0;
+    const em = smoothstep(0.1, 0, ed) * (1 - pStep);
+    const ecBlend = smoothstep(0, 0.1, ed);
+    const ecR = accentDark[0] + (accentBright[0] - accentDark[0]) * (1 - ecBlend);
+    const ecG = accentDark[1] + (accentBright[1] - accentDark[1]) * (1 - ecBlend);
+    const ecB = accentDark[2] + (accentBright[2] - accentDark[2]) * (1 - ecBlend);
+    out.writeUInt16LE(clamp16(mix16(bR, aR, e) + Math.round(ecR * em * 2)), o);
+    out.writeUInt16LE(clamp16(mix16(bG, aG, e) + Math.round(ecG * em * 2)), o + 2);
+    out.writeUInt16LE(clamp16(mix16(bB, aB, e) + Math.round(ecB * em * 2)), o + 4);
+  }
+};
+TRANSITIONS["domain-warp"] = domainWarp;
+function ridged(px, py) {
+  let value = 0;
+  let amplitude = 0.5;
+  let x = px;
+  let y = py;
+  for (let i = 0; i < 5; i++) {
+    value += amplitude * Math.abs(vnoise(x, y) * 2 - 1);
+    const nx = ROT_A * x - ROT_B * y;
+    const ny = ROT_B * x + ROT_A * y;
+    x = nx * 2.02;
+    y = ny * 2.02;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+var ridgedBurn = (from2, to, out, w, h, p) => {
+  const accent = [5e4, 25e3, 5e3];
+  const accentDark = [25e3, 8e3, 2e3];
+  const accentBright = [65535, 55e3, 35e3];
+  for (let i = 0; i < w * h; i++) {
+    const ux = i % w / w;
+    const uy = Math.floor(i / w) / h;
+    const o = i * 6;
+    const [aR, aG, aB] = sampleRgb48le(from2, ux, uy, w, h);
+    const [bR, bG, bB] = sampleRgb48le(to, ux, uy, w, h);
+    const n = ridged(ux * 4, uy * 4);
+    const e = smoothstep(p - 0.04, p + 0.04, n);
+    const heat = smoothstep(0.12, 0, Math.abs(n - p));
+    const pStep = p >= 1 ? 1 : 0;
+    const heatMasked = heat * (1 - pStep);
+    let burnR = accentDark[0] + (accent[0] - accentDark[0]) * smoothstep(0, 0.25, heatMasked);
+    let burnG = accentDark[1] + (accent[1] - accentDark[1]) * smoothstep(0, 0.25, heatMasked);
+    let burnB = accentDark[2] + (accent[2] - accentDark[2]) * smoothstep(0, 0.25, heatMasked);
+    const blend2 = smoothstep(0.25, 0.5, heatMasked);
+    burnR = burnR + (accentBright[0] - burnR) * blend2;
+    burnG = burnG + (accentBright[1] - burnG) * blend2;
+    burnB = burnB + (accentBright[2] - burnB) * blend2;
+    const blend3 = smoothstep(0.5, 1, heatMasked);
+    burnR = burnR + (65535 - burnR) * blend3;
+    burnG = burnG + (65535 - burnG) * blend3;
+    burnB = burnB + (65535 - burnB) * blend3;
+    const sparks = (vnoise(ux * 80, uy * 80) >= 0.92 ? 1 : 0) * heatMasked * 3;
+    out.writeUInt16LE(
+      clamp16(
+        mix16(bR, aR, e) + Math.round(burnR * heatMasked * 3.5) + Math.round(accentBright[0] * sparks)
+      ),
+      o
+    );
+    out.writeUInt16LE(
+      clamp16(
+        mix16(bG, aG, e) + Math.round(burnG * heatMasked * 3.5) + Math.round(accentBright[1] * sparks)
+      ),
+      o + 2
+    );
+    out.writeUInt16LE(
+      clamp16(
+        mix16(bB, aB, e) + Math.round(burnB * heatMasked * 3.5) + Math.round(accentBright[2] * sparks)
+      ),
+      o + 4
+    );
+  }
+};
+TRANSITIONS["ridged-burn"] = ridgedBurn;
+
 // src/services/renderOrchestrator.ts
 import { join as join15, dirname as dirname10, resolve as resolve10 } from "path";
 import { randomUUID } from "crypto";
@@ -108352,6 +109210,63 @@ function applyRenderModeHints(cfg, compiled, log = defaultLogger) {
     reasons: compiled.renderModeHints.reasons.map((reason) => reason.message)
   });
 }
+function blitHdrVideoLayer(canvas, el, time, fps, hdrFrameDirs, hdrStartTimes, width, height, log, sourceTransfer, targetTransfer) {
+  const frameDir = hdrFrameDirs.get(el.id);
+  const startTime = hdrStartTimes.get(el.id);
+  if (!frameDir || startTime === void 0) {
+    return;
+  }
+  const videoFrameIndex = Math.round((time - startTime) * fps) + 1;
+  if (videoFrameIndex < 1) return;
+  const maxIndex = getMaxFrameIndex(frameDir);
+  const effectiveIndex = maxIndex > 0 ? Math.min(videoFrameIndex, maxIndex) : videoFrameIndex;
+  const framePath = join15(frameDir, `frame_${String(effectiveIndex).padStart(4, "0")}.png`);
+  if (!existsSync15(framePath)) {
+    return;
+  }
+  try {
+    const { data: hdrRgb, width: srcW, height: srcH } = decodePngToRgb48le(readFileSync9(framePath));
+    if (sourceTransfer && targetTransfer && sourceTransfer !== targetTransfer) {
+      convertTransfer(hdrRgb, sourceTransfer, targetTransfer);
+    }
+    const viewportMatrix = parseTransformMatrix(el.transform);
+    const br = el.borderRadius;
+    const hasBorderRadius = br[0] > 0 || br[1] > 0 || br[2] > 0 || br[3] > 0;
+    const borderRadiusParam = hasBorderRadius ? br : void 0;
+    if (viewportMatrix) {
+      blitRgb48leAffine(
+        canvas,
+        hdrRgb,
+        viewportMatrix,
+        srcW,
+        srcH,
+        width,
+        height,
+        el.opacity < 0.999 ? el.opacity : void 0,
+        borderRadiusParam
+      );
+    } else {
+      blitRgb48leRegion(
+        canvas,
+        hdrRgb,
+        el.x,
+        el.y,
+        srcW,
+        srcH,
+        width,
+        height,
+        el.opacity < 0.999 ? el.opacity : void 0,
+        borderRadiusParam
+      );
+    }
+  } catch (err) {
+    if (log) {
+      log.debug(`HDR blit failed for ${el.id}`, {
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+  }
+}
 function createRenderJob(config2) {
   return {
     id: randomUUID(),
@@ -108622,6 +109537,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     perfStages.browserProbeMs = Date.now() - probeStart;
     job.duration = composition.duration;
     job.totalFrames = Math.ceil(composition.duration * job.config.fps);
+    const totalFrames = job.totalFrames;
     if (job.duration <= 0) {
       const diagnostics = [];
       try {
@@ -108679,7 +109595,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     const compiledDir = join15(workDir, "compiled");
     let extractionResult = null;
     const nativeHdrVideoIds = /* @__PURE__ */ new Set();
-    if (composition.videos.length > 0) {
+    const videoTransfers = /* @__PURE__ */ new Map();
+    if (job.config.hdr && composition.videos.length > 0) {
       await Promise.all(
         composition.videos.map(async (v) => {
           let videoPath = v.src;
@@ -108691,6 +109608,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
           const meta = await extractVideoMetadata(videoPath);
           if (isHdrColorSpace(meta.colorSpace)) {
             nativeHdrVideoIds.add(v.id);
+            videoTransfers.set(v.id, detectTransfer(meta.colorSpace));
           }
         })
       );
@@ -108732,13 +109650,19 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       perfStages.videoExtractMs = Date.now() - stage2Start;
     }
     let effectiveHdr;
-    if (frameLookup) {
+    if (job.config.hdr && frameLookup) {
       const colorSpaces = (extractionResult?.extracted ?? []).map((ext) => ext.metadata.colorSpace);
       const info = analyzeCompositionHdr(colorSpaces);
       if (info.hasHdr && info.dominantTransfer) {
         effectiveHdr = { transfer: info.dominantTransfer };
       }
     }
+    if (job.config.hdr && !effectiveHdr && nativeHdrVideoIds.size > 0) {
+      const firstTransfer = videoTransfers.values().next().value;
+      if (firstTransfer) {
+        effectiveHdr = { transfer: firstTransfer };
+      }
+    }
     if (effectiveHdr && outputFormat !== "mp4") {
       log.info(`[Render] HDR source detected but format is ${outputFormat} \u2014 using SDR`);
       effectiveHdr = void 0;
@@ -108789,15 +109713,15 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       format: needsAlpha ? "png" : "jpeg",
       quality: needsAlpha ? void 0 : job.config.quality === "draft" ? 80 : 95
     };
-    const workerCount = calculateOptimalWorkers(job.totalFrames, job.config.workers, cfg);
+    const workerCount = calculateOptimalWorkers(totalFrames, job.config.workers, cfg);
     const FORMAT_EXT = { mp4: ".mp4", webm: ".webm", mov: ".mov" };
     const videoExt = FORMAT_EXT[outputFormat] ?? ".mp4";
     const videoOnlyPath = join15(workDir, `video-only${videoExt}`);
-    const hasHdrVideo = effectiveHdr && composition.videos.length > 0 && frameLookup;
-    const encoderHdr = hasHdrVideo ? effectiveHdr : void 0;
+    const hasHdrContent = effectiveHdr && nativeHdrVideoIds.size > 0;
+    const encoderHdr = hasHdrContent ? effectiveHdr : void 0;
     const preset = getEncoderPreset(job.config.quality, outputFormat, encoderHdr);
     job.framesRendered = 0;
-    if (hasHdrVideo) {
+    if (hasHdrContent) {
       log.info("[Render] HDR layered composite: z-ordered DOM + native HLG video layers");
       const hdrVideoIds = composition.videos.filter((v) => nativeHdrVideoIds.has(v.id)).map((v) => v.id);
       const hdrVideoSrcPaths = /* @__PURE__ */ new Map();
@@ -108810,6 +109734,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         }
         hdrVideoSrcPaths.set(v.id, srcPath);
       }
+      if (!fileServer) throw new Error("fileServer must be initialized before HDR compositing");
       const domSession = await createCaptureSession(
         fileServer.url,
         framesDir,
@@ -108821,6 +109746,34 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       assertNotAborted();
       lastBrowserConsole = domSession.browserConsoleBuffer;
       await initTransparentBackground(domSession.page);
+      const transitionMeta = await domSession.page.evaluate(() => {
+        return window.__hf?.transitions ?? [];
+      });
+      const sceneElements = await domSession.page.evaluate(() => {
+        const scenes = document.querySelectorAll(".scene");
+        const map2 = {};
+        for (const scene of scenes) {
+          const els = scene.querySelectorAll("[data-start]");
+          map2[scene.id] = Array.from(els).map((e) => e.id);
+        }
+        return map2;
+      });
+      const transitionRanges = transitionMeta.map((t) => ({
+        ...t,
+        startFrame: Math.floor(t.time * job.config.fps),
+        endFrame: Math.ceil((t.time + t.duration) * job.config.fps)
+      }));
+      if (transitionRanges.length > 0) {
+        log.info("[Render] Detected shader transitions for HDR compositing", {
+          count: transitionRanges.length,
+          transitions: transitionRanges.map((t) => ({
+            shader: t.shader,
+            from: t.fromScene,
+            to: t.toScene,
+            frames: `${t.startFrame}-${t.endFrame}`
+          }))
+        });
+      }
       const hdrEncoder = await spawnStreamingEncoder(
         videoOnlyPath,
         {
@@ -108838,7 +109791,28 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         { ffmpegStreamingTimeout: 36e5 }
       );
       assertNotAborted();
-      const { execSync: execSync2 } = await import("child_process");
+      const hdrExtractionDims = /* @__PURE__ */ new Map();
+      const hdrVideoStartTimes = /* @__PURE__ */ new Map();
+      for (const v of composition.videos) {
+        if (hdrVideoIds.includes(v.id)) {
+          hdrVideoStartTimes.set(v.id, v.start);
+        }
+      }
+      const uniqueStartTimes = [...new Set(hdrVideoStartTimes.values())].sort((a, b) => a - b);
+      for (const seekTime of uniqueStartTimes) {
+        await domSession.page.evaluate((t) => {
+          if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
+        }, seekTime);
+        if (domSession.onBeforeCapture) {
+          await domSession.onBeforeCapture(domSession.page, seekTime);
+        }
+        const stacking = await queryElementStacking(domSession.page, nativeHdrVideoIds);
+        for (const el of stacking) {
+          if (el.isHdr && el.layoutWidth > 0 && el.layoutHeight > 0 && !hdrExtractionDims.has(el.id)) {
+            hdrExtractionDims.set(el.id, { width: el.layoutWidth, height: el.layoutHeight });
+          }
+        }
+      }
       const hdrFrameDirs = /* @__PURE__ */ new Map();
       for (const [videoId, srcPath] of hdrVideoSrcPaths) {
         const video = composition.videos.find((v) => v.id === videoId);
@@ -108846,24 +109820,190 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         const frameDir = join15(framesDir, `hdr_${videoId}`);
         mkdirSync10(frameDir, { recursive: true });
         const duration = video.end - video.start;
-        try {
-          execSync2(
-            `ffmpeg -ss ${video.mediaStart} -i "${srcPath}" -t ${duration} -r ${job.config.fps} -vf "scale=${width}:${height}:force_original_aspect_ratio=increase,crop=${width}:${height}" -pix_fmt rgb48le -c:v png "${join15(frameDir, "frame_%04d.png")}"`,
-            { maxBuffer: 1024 * 1024, stdio: ["pipe", "pipe", "pipe"] }
-          );
-        } catch (err) {
+        const dims = hdrExtractionDims.get(videoId) ?? { width, height };
+        const ffmpegArgs = [
+          "-ss",
+          String(video.mediaStart),
+          "-i",
+          srcPath,
+          "-t",
+          String(duration),
+          "-r",
+          String(job.config.fps),
+          "-vf",
+          `scale=${dims.width}:${dims.height}:force_original_aspect_ratio=increase,crop=${dims.width}:${dims.height}`,
+          "-pix_fmt",
+          "rgb48le",
+          "-c:v",
+          "png",
+          "-y",
+          join15(frameDir, "frame_%04d.png")
+        ];
+        const result = await runFfmpeg(ffmpegArgs, { signal: abortSignal });
+        if (!result.success) {
           log.warn("HDR frame pre-extraction failed; loop will fill with black", {
             videoId,
             srcPath,
-            error: err instanceof Error ? err.message : String(err)
+            stderr: result.stderr.slice(-400)
           });
         }
         hdrFrameDirs.set(videoId, frameDir);
       }
       assertNotAborted();
       try {
+        let countNonZeroAlpha2 = function(rgba) {
+          let n = 0;
+          for (let p = 3; p < rgba.length; p += 4) {
+            if (rgba[p] !== 0) n++;
+          }
+          return n;
+        }, countNonZeroRgb482 = function(buf) {
+          let n = 0;
+          for (let p = 0; p < buf.length; p += 6) {
+            if (buf[p] !== 0 || buf[p + 1] !== 0 || buf[p + 2] !== 0) n++;
+          }
+          return n;
+        };
+        var countNonZeroAlpha = countNonZeroAlpha2, countNonZeroRgb48 = countNonZeroRgb482;
         const beforeCaptureHook = domSession.onBeforeCapture;
-        for (let i = 0; i < job.totalFrames; i++) {
+        const cleanedUpVideos = /* @__PURE__ */ new Set();
+        const hdrVideoEndTimes = /* @__PURE__ */ new Map();
+        for (const v of composition.videos) {
+          if (hdrFrameDirs.has(v.id)) {
+            hdrVideoEndTimes.set(v.id, v.end);
+          }
+        }
+        const debugDumpEnabled = process.env.KEEP_TEMP === "1";
+        const debugDumpDir = debugDumpEnabled ? join15(framesDir, "debug-composite") : null;
+        if (debugDumpDir && !existsSync15(debugDumpDir)) {
+          mkdirSync10(debugDumpDir, { recursive: true });
+        }
+        async function compositeToBuffer(canvas, time, fullStacking, elementFilter, debugFrameIndex = -1) {
+          const filteredStacking = elementFilter ? fullStacking.filter((e) => elementFilter.has(e.id)) : fullStacking;
+          const layers = groupIntoLayers(filteredStacking);
+          const shouldLog = debugDumpEnabled && debugFrameIndex >= 0;
+          if (shouldLog) {
+            log.info("[diag] compositeToBuffer plan", {
+              frame: debugFrameIndex,
+              time: time.toFixed(3),
+              filterSize: elementFilter?.size,
+              fullStackingCount: fullStacking.length,
+              filteredCount: filteredStacking.length,
+              layerCount: layers.length,
+              layers: layers.map(
+                (l) => l.type === "hdr" ? {
+                  type: "hdr",
+                  id: l.element.id,
+                  z: l.element.zIndex,
+                  visible: l.element.visible,
+                  opacity: l.element.opacity,
+                  bounds: `${Math.round(l.element.x)},${Math.round(l.element.y)} ${Math.round(l.element.width)}x${Math.round(l.element.height)}`
+                } : { type: "dom", ids: l.elementIds }
+              )
+            });
+          }
+          for (let layerIdx = 0; layerIdx < layers.length; layerIdx++) {
+            const layer = layers[layerIdx];
+            if (layer.type === "hdr") {
+              const before2 = shouldLog ? countNonZeroRgb482(canvas) : 0;
+              blitHdrVideoLayer(
+                canvas,
+                layer.element,
+                time,
+                job.config.fps,
+                hdrFrameDirs,
+                hdrVideoStartTimes,
+                width,
+                height,
+                log,
+                videoTransfers.get(layer.element.id),
+                effectiveHdr?.transfer
+              );
+              if (shouldLog) {
+                const after2 = countNonZeroRgb482(canvas);
+                const frameDir = hdrFrameDirs.get(layer.element.id);
+                const startTime = hdrVideoStartTimes.get(layer.element.id) ?? 0;
+                const localTime = time - startTime;
+                const frameNum = Math.floor(localTime * job.config.fps) + 1;
+                const expectedFrame = frameDir ? join15(frameDir, `frame_${String(frameNum).padStart(4, "0")}.png`) : null;
+                log.info("[diag] hdr layer blit", {
+                  frame: debugFrameIndex,
+                  layerIdx,
+                  id: layer.element.id,
+                  pixelsAdded: after2 - before2,
+                  totalNonZero: after2,
+                  startTime,
+                  localTime: localTime.toFixed(3),
+                  hdrFrameNum: frameNum,
+                  expectedFrame,
+                  expectedFrameExists: expectedFrame ? existsSync15(expectedFrame) : false
+                });
+              }
+            } else {
+              const allElementIds = fullStacking.map((e) => e.id);
+              const layerIds = new Set(layer.elementIds);
+              const hideIds = allElementIds.filter((id) => !layerIds.has(id));
+              await domSession.page.evaluate((t) => {
+                if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
+              }, time);
+              if (beforeCaptureHook) {
+                await beforeCaptureHook(domSession.page, time);
+              }
+              await applyDomLayerMask(domSession.page, layer.elementIds, hideIds);
+              const domPng = await captureAlphaPng(domSession.page, width, height);
+              await removeDomLayerMask(domSession.page, hideIds);
+              try {
+                const { data: domRgba } = decodePng(domPng);
+                if (!effectiveHdr) {
+                  throw new Error(
+                    "Invariant violation: effectiveHdr is undefined inside HDR layer branch"
+                  );
+                }
+                const before2 = shouldLog ? countNonZeroRgb482(canvas) : 0;
+                const alphaPixels = shouldLog ? countNonZeroAlpha2(domRgba) : 0;
+                blitRgba8OverRgb48le(domRgba, canvas, width, height, effectiveHdr.transfer);
+                if (shouldLog && debugDumpDir) {
+                  const after2 = countNonZeroRgb482(canvas);
+                  const dumpName = `frame_${String(debugFrameIndex).padStart(4, "0")}_layer_${String(layerIdx).padStart(2, "0")}_dom.png`;
+                  const dumpPath = join15(debugDumpDir, dumpName);
+                  writeFileSync4(dumpPath, domPng);
+                  log.info("[diag] dom layer blit", {
+                    frame: debugFrameIndex,
+                    layerIdx,
+                    layerIds: layer.elementIds,
+                    hideCount: hideIds.length,
+                    pngBytes: domPng.length,
+                    alphaPixels,
+                    pixelsAdded: after2 - before2,
+                    totalNonZero: after2,
+                    dumpPath
+                  });
+                }
+              } catch (err) {
+                log.warn("DOM layer decode/blit failed; skipping overlay", {
+                  layerIds: layer.elementIds,
+                  error: err instanceof Error ? err.message : String(err)
+                });
+              }
+            }
+          }
+          if (shouldLog && debugDumpDir) {
+            const finalNonZero = countNonZeroRgb482(canvas);
+            log.info("[diag] compositeToBuffer end", {
+              frame: debugFrameIndex,
+              finalNonZeroPixels: finalNonZero,
+              totalPixels: width * height,
+              coverage: (finalNonZero / (width * height) * 100).toFixed(1) + "%"
+            });
+          }
+        }
+        const bufSize = width * height * 6;
+        const hasTransitions = transitionRanges.length > 0;
+        const transBufferA = hasTransitions ? Buffer.alloc(bufSize) : null;
+        const transBufferB = hasTransitions ? Buffer.alloc(bufSize) : null;
+        const transOutput = hasTransitions ? Buffer.alloc(bufSize) : null;
+        const normalCanvas = Buffer.alloc(bufSize);
+        for (let i = 0; i < totalFrames; i++) {
           assertNotAborted();
           const time = i / job.config.fps;
           await domSession.page.evaluate((t) => {
@@ -108873,81 +110013,118 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             await beforeCaptureHook(domSession.page, time);
           }
           const stackingInfo = await queryElementStacking(domSession.page, nativeHdrVideoIds);
-          const layers = groupIntoLayers(stackingInfo);
+          const activeTransition = transitionRanges.find(
+            (t) => i >= t.startFrame && i <= t.endFrame
+          );
           if (i % 30 === 0) {
             const hdrEl = stackingInfo.find((e) => e.isHdr);
-            const hdrInLayers = layers.some((l) => l.type === "hdr");
             log.debug("[Render] HDR layer composite frame", {
               frame: i,
               time: time.toFixed(2),
               hdrElement: hdrEl ? { z: hdrEl.zIndex, visible: hdrEl.visible, width: hdrEl.width } : null,
-              hdrLayerPresent: hdrInLayers,
-              layerCount: layers.length
+              stackingCount: stackingInfo.length,
+              activeTransition: activeTransition?.shader
             });
           }
-          const canvas = Buffer.alloc(width * height * 6);
-          for (const layer of layers) {
-            if (layer.type === "hdr") {
-              const el = layer.element;
-              const frameDir = hdrFrameDirs.get(el.id);
-              const video = composition.videos.find((v) => v.id === el.id);
-              if (!frameDir || !video) continue;
-              const videoFrameIndex = Math.round((time - video.start) * job.config.fps) + 1;
-              const maxIndex = getMaxFrameIndex(frameDir);
-              const inBounds = videoFrameIndex >= 1 && (maxIndex === 0 || videoFrameIndex <= maxIndex);
-              const framePath = inBounds ? join15(frameDir, `frame_${String(videoFrameIndex).padStart(4, "0")}.png`) : null;
-              if (framePath !== null && existsSync15(framePath)) {
-                try {
-                  const hdrRgb = decodePngToRgb48le(readFileSync9(framePath)).data;
-                  blitRgb48leRegion(
-                    canvas,
-                    hdrRgb,
-                    el.x,
-                    el.y,
-                    el.width,
-                    el.height,
-                    width,
-                    height,
-                    el.opacity < 0.999 ? el.opacity : void 0
-                  );
-                } catch (err) {
-                  log.warn("HDR layer decode/blit failed; skipping layer for frame", {
-                    frameIndex: i,
-                    videoId: el.id,
-                    framePath,
-                    error: err instanceof Error ? err.message : String(err)
-                  });
-                }
-              }
-            } else {
-              const allElementIds = stackingInfo.map((e) => e.id);
-              const layerIds = new Set(layer.elementIds);
-              const hideIds = allElementIds.filter(
-                (id) => !layerIds.has(id) || nativeHdrVideoIds.has(id)
-              );
-              await hideVideoElements(domSession.page, hideIds);
-              const domPng = await captureAlphaPng(domSession.page, width, height);
-              await showVideoElements(domSession.page, hideIds);
+          if (activeTransition && transBufferA && transBufferB && transOutput) {
+            const progress = activeTransition.endFrame === activeTransition.startFrame ? 1 : (i - activeTransition.startFrame) / (activeTransition.endFrame - activeTransition.startFrame);
+            const sceneAIds = new Set(sceneElements[activeTransition.fromScene] ?? []);
+            const sceneBIds = new Set(sceneElements[activeTransition.toScene] ?? []);
+            transBufferA.fill(0);
+            transBufferB.fill(0);
+            for (const [sceneBuf, sceneIds] of [
+              [transBufferA, sceneAIds],
+              [transBufferB, sceneBIds]
+            ]) {
               await domSession.page.evaluate((t) => {
                 if (window.__hf && typeof window.__hf.seek === "function") window.__hf.seek(t);
               }, time);
+              if (beforeCaptureHook) {
+                await beforeCaptureHook(domSession.page, time);
+              }
+              for (const el of stackingInfo) {
+                if (!el.isHdr || !sceneIds.has(el.id)) continue;
+                blitHdrVideoLayer(
+                  sceneBuf,
+                  el,
+                  time,
+                  job.config.fps,
+                  hdrFrameDirs,
+                  hdrVideoStartTimes,
+                  width,
+                  height,
+                  log,
+                  videoTransfers.get(el.id),
+                  effectiveHdr?.transfer
+                );
+              }
+              const showIds = Array.from(sceneIds);
+              const hideIds = stackingInfo.map((e) => e.id).filter((id) => !sceneIds.has(id) || nativeHdrVideoIds.has(id));
+              await applyDomLayerMask(domSession.page, showIds, hideIds);
+              const domPng = await captureAlphaPng(domSession.page, width, height);
+              await removeDomLayerMask(domSession.page, hideIds);
               try {
                 const { data: domRgba } = decodePng(domPng);
-                const hdrTransfer = effectiveHdr ? effectiveHdr.transfer : "hlg";
-                blitRgba8OverRgb48le(domRgba, canvas, width, height, hdrTransfer);
+                if (!effectiveHdr) {
+                  throw new Error(
+                    "Invariant violation: effectiveHdr is undefined inside hasHdrVideo branch"
+                  );
+                }
+                blitRgba8OverRgb48le(
+                  domRgba,
+                  sceneBuf,
+                  width,
+                  height,
+                  effectiveHdr.transfer
+                );
               } catch (err) {
-                log.warn("DOM layer decode/blit failed; skipping overlay for frame", {
+                log.warn("DOM layer decode/blit failed; skipping overlay for transition scene", {
                   frameIndex: i,
-                  layerIds: layer.elementIds,
+                  sceneIds: Array.from(sceneIds),
                   error: err instanceof Error ? err.message : String(err)
                 });
               }
             }
+            const transitionFn = TRANSITIONS[activeTransition.shader] ?? crossfade;
+            transitionFn(transBufferA, transBufferB, transOutput, width, height, progress);
+            hdrEncoder.writeFrame(transOutput);
+          } else {
+            normalCanvas.fill(0);
+            await compositeToBuffer(normalCanvas, time, stackingInfo, void 0, i);
+            if (debugDumpEnabled && debugDumpDir && i % 30 === 0) {
+              const previewPath = join15(
+                debugDumpDir,
+                `frame_${String(i).padStart(4, "0")}_final_rgb48le.bin`
+              );
+              writeFileSync4(previewPath, normalCanvas);
+            }
+            hdrEncoder.writeFrame(normalCanvas);
+          }
+          if (process.env.KEEP_TEMP !== "1") {
+            for (const [videoId, endTime] of hdrVideoEndTimes) {
+              if (time > endTime && !cleanedUpVideos.has(videoId)) {
+                const stillNeeded = activeTransition && (sceneElements[activeTransition.fromScene]?.includes(videoId) || sceneElements[activeTransition.toScene]?.includes(videoId));
+                if (!stillNeeded) {
+                  const frameDir = hdrFrameDirs.get(videoId);
+                  if (frameDir) {
+                    try {
+                      rmSync3(frameDir, { recursive: true, force: true });
+                    } catch (err) {
+                      log.warn("Failed to clean up HDR frame directory", {
+                        videoId,
+                        frameDir,
+                        error: err instanceof Error ? err.message : String(err)
+                      });
+                    }
+                  }
+                  cleanedUpVideos.add(videoId);
+                }
+              }
+            }
           }
-          hdrEncoder.writeFrame(canvas);
           job.framesRendered = i + 1;
-          if ((i + 1) % 10 === 0 || i + 1 === job.totalFrames) {
-            const frameProgress = (i + 1) / job.totalFrames;
+          if ((i + 1) % 10 === 0 || i + 1 === totalFrames) {
+            const frameProgress = (i + 1) / totalFrames;
             updateJobStatus(
               job,
               "rendering",
@@ -108990,7 +110167,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         assertNotAborted();
       }
       if (enableStreamingEncode && streamingEncoder) {
-        const reorderBuffer = createFrameReorderBuffer(0, job.totalFrames);
+        const reorderBuffer = createFrameReorderBuffer(0, totalFrames);
         const currentEncoder = streamingEncoder;
         if (workerCount > 1) {
           const tasks = distributeFrames(job.totalFrames, workerCount, workDir);
@@ -109047,7 +110224,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
             }
             assertNotAborted();
             lastBrowserConsole = session.browserConsoleBuffer;
-            for (let i = 0; i < job.totalFrames; i++) {
+            for (let i = 0; i < totalFrames; i++) {
               assertNotAborted();
               const time = i / job.config.fps;
               const { buffer } = await captureFrameToBuffer(session, i, time);
@@ -109055,7 +110232,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
               currentEncoder.writeFrame(buffer);
               reorderBuffer.advanceTo(i + 1);
               job.framesRendered = i + 1;
-              const frameProgress = (i + 1) / job.totalFrames;
+              const frameProgress = (i + 1) / totalFrames;
               const progress = 25 + frameProgress * 55;
               updateJobStatus(
                 job,
@@ -109228,12 +110405,12 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       chunkedEncode: enableChunkedEncode,
       chunkSizeFrames: enableChunkedEncode ? chunkedEncodeSize : null,
       compositionDurationSeconds: composition.duration,
-      totalFrames: job.totalFrames,
+      totalFrames,
       resolution: { width, height },
       videoCount: composition.videos.length,
       audioCount: composition.audios.length,
       stages: perfStages,
-      captureAvgMs: job.totalFrames > 0 ? Math.round((perfStages.captureMs ?? 0) / job.totalFrames) : void 0
+      captureAvgMs: totalFrames > 0 ? Math.round((perfStages.captureMs ?? 0) / totalFrames) : void 0
     };
     job.perfSummary = perfSummary;
     if (job.config.debug) {
@@ -109251,6 +110428,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         const debugOutput = join15(workDir, `output${videoExt}`);
         copyFileSync2(outputPath, debugOutput);
       }
+    } else if (process.env.KEEP_TEMP === "1") {
+      log.info("KEEP_TEMP=1 \u2014 leaving workDir on disk for inspection", { workDir });
     } else {
       await safeCleanup(
         "remove workDir",