@hyperframes/producer 0.8.185 → 0.8.186

package/dist/index.js

@@ -6004,7 +6004,10 @@ function stripCompilerMountBootstrap(source) {
     ""
   );
 }
-function detectRenderModeHints(html) {
+function runtimeRoot(document2) {
+  return document2.querySelector('[data-composition-id][data-root="true"]') ?? document2.querySelector("[data-composition-id]");
+}
+function detectRenderModeHints(html, pageMotionBlur) {
   const reasons = [];
   const { document: document2 } = parseHTML4(html);
   if (document2.querySelector("canvas[layoutsubtree]")) {
@@ -6012,6 +6015,11 @@ function detectRenderModeHints(html) {
       code: "htmlInCanvas",
       message: "Detected html-in-canvas API (layoutsubtree canvas). Chrome does not support concurrent drawElementImage across multiple workers; render is pinned to a single worker."
     });
+  } else if (pageMotionBlur !== "off" && runtimeRoot(document2)?.getAttribute("data-motion-blur") === "on") {
+    reasons.push({
+      code: "captureMotionBlur",
+      message: 'Detected capture motion blur (data-motion-blur="on"), which draws each frame with html-in-canvas; routed through screenshot capture mode.'
+    });
   }
   if (document2.querySelector("iframe")) {
     reasons.push({
@@ -7043,7 +7051,7 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
     /(<(?:video|audio)\b[^>]*?)\s+preload\s*=\s*["']none["']/gi,
     "$1"
   );
-  const renderModeHints = detectRenderModeHints(sanitizedHtml);
+  const renderModeHints = detectRenderModeHints(sanitizedHtml, options.pageMotionBlur);
   const hasShaderTransitions = detectShaderTransitionUsage(sanitizedHtml);
   const usesThreeDTransforms = detectThreeDTransformUsage(sanitizedHtml);
   const usesMixBlendMode = detectMixBlendModeUsage(sanitizedHtml);
@@ -7528,6 +7536,7 @@ async function runCompileStage(input) {
     abortSignal,
     variables: input.variables,
     urlByAbsentLocalPath: input.urlByAbsentLocalPath,
+    pageMotionBlur: input.pageMotionBlur,
     animatedGifCacheDir: cfg.extractCacheDir ? join14(cfg.extractCacheDir, "animated-gif") : void 0,
     ffmpegProcessTimeout: cfg.ffmpegProcessTimeout
   });
@@ -7824,6 +7833,7 @@ async function runProbeStage(input) {
         variables: job.config.variables,
         deviceScaleFactor,
         motionBlur,
+        pageMotionBlur: job.config.pageMotionBlur,
         requiresWebGpu: compositionRequiresWebGpu(compiled.html),
         subTimelineWaitMemo
       };
@@ -11084,6 +11094,10 @@ function assertMotionBlurSupported(motionBlur, route) {
     `[MotionBlur] sub-frame motion blur is not supported on the "${route}" capture route: ${reason}`
   );
 }
+function pageMotionBlurForRoute(route) {
+  if (route.hasHdrContent) return "hdr-render";
+  return route.useLayeredComposite ? "layered-composite" : void 0;
+}
 
 // src/services/render/outputScaleRoute.ts
 var UNSUPPORTED_REASON2 = {
@@ -12157,7 +12171,8 @@ async function executeRenderPipeline(input) {
         needsAlpha,
         log,
         assertNotAborted,
-        variables: job.config.variables
+        variables: job.config.variables,
+        pageMotionBlur: job.config.pageMotionBlur
       })
     );
     let compiled = compileResult.compiled;
@@ -12461,14 +12476,17 @@ async function executeRenderPipeline(input) {
       variables: job.config.variables,
       deviceScaleFactor,
       motionBlur: job.config.motionBlur,
+      pageMotionBlur: job.config.pageMotionBlur,
       ...videoCaptureBeyondViewport !== void 0 ? { captureBeyondViewport: videoCaptureBeyondViewport } : {}
     };
     resolvedCaptureBeyondViewport = captureOptions.captureBeyondViewport ?? resolvedCaptureBeyondViewport;
     if (resolvedCaptureBeyondViewport !== void 0) {
       updateCaptureObservability({ captureBeyondViewport: resolvedCaptureBeyondViewport });
     }
+    let routePageMotionBlur;
     const buildCaptureOptions = () => ({
       ...captureOptions,
+      ...routePageMotionBlur ? { pageMotionBlur: routePageMotionBlur } : {},
       videoMetadataHints,
       skipReadinessVideoIds: videoReadinessSkipIds,
       subTimelineWaitMemo,
@@ -12502,6 +12520,7 @@ async function executeRenderPipeline(input) {
     const nativeHdrIds = /* @__PURE__ */ new Set([...nativeHdrVideoIds, ...nativeHdrImageIds]);
     const hasHdrContent = Boolean(effectiveHdr && nativeHdrIds.size > 0);
     if (hasHdrContent) assertOutputScaleSupported(deviceScaleFactor, "hdr_layered");
+    routePageMotionBlur = pageMotionBlurForRoute({ hasHdrContent, useLayeredComposite: false });
     const deSingleMinFramesRaw = process.env.HF_DE_SINGLE_MIN_FRAMES;
     const deSingleMinFramesNum = deSingleMinFramesRaw === void 0 || deSingleMinFramesRaw.trim() === "" ? 900 : Number(deSingleMinFramesRaw);
     const deSingleMinFrames = Number.isFinite(deSingleMinFramesNum) ? deSingleMinFramesNum : 900;
@@ -12904,6 +12923,7 @@ async function executeRenderPipeline(input) {
       hasShaderTransitions: compiled.hasShaderTransitions && !isGif,
       isPngSequence
     });
+    routePageMotionBlur = pageMotionBlurForRoute({ hasHdrContent, useLayeredComposite });
     const inversionFallback = resolveInversionRetryPlan({
       deWorkerInversion,
       preInversionWorkerCount: preRoutingWorkerCount,
@@ -14100,7 +14120,8 @@ function buildSyntheticRenderJob(input) {
     hdrMode: input.hdrMode,
     strictness: input.strictness,
     producerConfig: input.producerConfig,
-    variables: input.variables
+    variables: input.variables,
+    pageMotionBlur: "off"
   };
   return createRenderJob(renderConfig);
 }
@@ -14224,6 +14245,7 @@ function buildChunkCaptureOptions(input) {
     skipReadinessVideoIds: input.skipReadinessVideoIds,
     videoMetadataHints: input.videoMetadataHints,
     ...videoCaptureBeyondViewport !== void 0 ? { captureBeyondViewport: videoCaptureBeyondViewport } : {},
+    pageMotionBlur: "distributed-render",
     // A fixed warmup count keeps `beginFrameTimeTicks` host-independent.
     lockWarmupTicks: true,
     requiresWebGpu: compositionRequiresWebGpu3(input.html)
@@ -15886,7 +15908,8 @@ async function compilePlanComposition(projectDir, config, planDir, options) {
     // Distributed renders must not capture host-specific system fonts —
     // the Lambda/worker filesystem won't have the same fonts installed.
     allowSystemFontCapture: false,
-    variables: config.variables
+    variables: config.variables,
+    pageMotionBlur: job.config.pageMotionBlur
   });
   logPlanStage(log, "compile", stageStarted);
   let compiled = compileResult.compiled;
@@ -16597,6 +16620,7 @@ function assertRequestOptionScalars(options) {
   }
   assertOptionalEnum(options, "strictness", ["strict", "best-effort"]);
   assertOptionalEnum(options, "hdrMode", ["auto", "force-hdr", "force-sdr"]);
+  assertOptionalEnum(options, "pageMotionBlur", ["off"]);
   if (options.videoFrameFormat !== void 0 && !isVideoFrameFormat2(options.videoFrameFormat)) {
     throw new Error("Render request videoFrameFormat is invalid");
   }

package/dist/public-server.js

@@ -6023,7 +6023,10 @@ function stripCompilerMountBootstrap(source) {
     ""
   );
 }
-function detectRenderModeHints(html) {
+function runtimeRoot(document2) {
+  return document2.querySelector('[data-composition-id][data-root="true"]') ?? document2.querySelector("[data-composition-id]");
+}
+function detectRenderModeHints(html, pageMotionBlur) {
   const reasons = [];
   const { document: document2 } = parseHTML4(html);
   if (document2.querySelector("canvas[layoutsubtree]")) {
@@ -6031,6 +6034,11 @@ function detectRenderModeHints(html) {
       code: "htmlInCanvas",
       message: "Detected html-in-canvas API (layoutsubtree canvas). Chrome does not support concurrent drawElementImage across multiple workers; render is pinned to a single worker."
     });
+  } else if (pageMotionBlur !== "off" && runtimeRoot(document2)?.getAttribute("data-motion-blur") === "on") {
+    reasons.push({
+      code: "captureMotionBlur",
+      message: 'Detected capture motion blur (data-motion-blur="on"), which draws each frame with html-in-canvas; routed through screenshot capture mode.'
+    });
   }
   if (document2.querySelector("iframe")) {
     reasons.push({
@@ -7062,7 +7070,7 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
     /(<(?:video|audio)\b[^>]*?)\s+preload\s*=\s*["']none["']/gi,
     "$1"
   );
-  const renderModeHints = detectRenderModeHints(sanitizedHtml);
+  const renderModeHints = detectRenderModeHints(sanitizedHtml, options.pageMotionBlur);
   const hasShaderTransitions = detectShaderTransitionUsage(sanitizedHtml);
   const usesThreeDTransforms = detectThreeDTransformUsage(sanitizedHtml);
   const usesMixBlendMode = detectMixBlendModeUsage(sanitizedHtml);
@@ -7547,6 +7555,7 @@ async function runCompileStage(input) {
     abortSignal,
     variables: input.variables,
     urlByAbsentLocalPath: input.urlByAbsentLocalPath,
+    pageMotionBlur: input.pageMotionBlur,
     animatedGifCacheDir: cfg.extractCacheDir ? join14(cfg.extractCacheDir, "animated-gif") : void 0,
     ffmpegProcessTimeout: cfg.ffmpegProcessTimeout
   });
@@ -7843,6 +7852,7 @@ async function runProbeStage(input) {
         variables: job.config.variables,
         deviceScaleFactor,
         motionBlur,
+        pageMotionBlur: job.config.pageMotionBlur,
         requiresWebGpu: compositionRequiresWebGpu(compiled.html),
         subTimelineWaitMemo
       };
@@ -11057,6 +11067,10 @@ function assertMotionBlurSupported(motionBlur, route) {
     `[MotionBlur] sub-frame motion blur is not supported on the "${route}" capture route: ${reason}`
   );
 }
+function pageMotionBlurForRoute(route) {
+  if (route.hasHdrContent) return "hdr-render";
+  return route.useLayeredComposite ? "layered-composite" : void 0;
+}
 
 // src/services/render/outputScaleRoute.ts
 var UNSUPPORTED_REASON2 = {
@@ -12130,7 +12144,8 @@ async function executeRenderPipeline(input) {
         needsAlpha,
         log,
         assertNotAborted,
-        variables: job.config.variables
+        variables: job.config.variables,
+        pageMotionBlur: job.config.pageMotionBlur
       })
     );
     let compiled = compileResult.compiled;
@@ -12434,14 +12449,17 @@ async function executeRenderPipeline(input) {
       variables: job.config.variables,
       deviceScaleFactor,
       motionBlur: job.config.motionBlur,
+      pageMotionBlur: job.config.pageMotionBlur,
       ...videoCaptureBeyondViewport !== void 0 ? { captureBeyondViewport: videoCaptureBeyondViewport } : {}
     };
     resolvedCaptureBeyondViewport = captureOptions.captureBeyondViewport ?? resolvedCaptureBeyondViewport;
     if (resolvedCaptureBeyondViewport !== void 0) {
       updateCaptureObservability({ captureBeyondViewport: resolvedCaptureBeyondViewport });
     }
+    let routePageMotionBlur;
     const buildCaptureOptions = () => ({
       ...captureOptions,
+      ...routePageMotionBlur ? { pageMotionBlur: routePageMotionBlur } : {},
       videoMetadataHints,
       skipReadinessVideoIds: videoReadinessSkipIds,
       subTimelineWaitMemo,
@@ -12475,6 +12493,7 @@ async function executeRenderPipeline(input) {
     const nativeHdrIds = /* @__PURE__ */ new Set([...nativeHdrVideoIds, ...nativeHdrImageIds]);
     const hasHdrContent = Boolean(effectiveHdr && nativeHdrIds.size > 0);
     if (hasHdrContent) assertOutputScaleSupported(deviceScaleFactor, "hdr_layered");
+    routePageMotionBlur = pageMotionBlurForRoute({ hasHdrContent, useLayeredComposite: false });
     const deSingleMinFramesRaw = process.env.HF_DE_SINGLE_MIN_FRAMES;
     const deSingleMinFramesNum = deSingleMinFramesRaw === void 0 || deSingleMinFramesRaw.trim() === "" ? 900 : Number(deSingleMinFramesRaw);
     const deSingleMinFrames = Number.isFinite(deSingleMinFramesNum) ? deSingleMinFramesNum : 900;
@@ -12877,6 +12896,7 @@ async function executeRenderPipeline(input) {
       hasShaderTransitions: compiled.hasShaderTransitions && !isGif,
       isPngSequence
     });
+    routePageMotionBlur = pageMotionBlurForRoute({ hasHdrContent, useLayeredComposite });
     const inversionFallback = resolveInversionRetryPlan({
       deWorkerInversion,
       preInversionWorkerCount: preRoutingWorkerCount,
@@ -14234,6 +14254,7 @@ function assertRequestOptionScalars(options) {
   }
   assertOptionalEnum(options, "strictness", ["strict", "best-effort"]);
   assertOptionalEnum(options, "hdrMode", ["auto", "force-hdr", "force-sdr"]);
+  assertOptionalEnum(options, "pageMotionBlur", ["off"]);
   if (options.videoFrameFormat !== void 0 && !isVideoFrameFormat2(options.videoFrameFormat)) {
     throw new Error("Render request videoFrameFormat is invalid");
   }

package/dist/renderRequest.d.ts

@@ -38,6 +38,7 @@ export interface RenderRequestOptions {
     videoBitrate?: string;
     videoFrameFormat?: VideoFrameFormat;
     hdrMode?: RenderConfig["hdrMode"];
+    pageMotionBlur?: RenderConfig["pageMotionBlur"];
     variables?: Record<string, unknown>;
     outputResolution?: CanvasResolution;
     outputResolutionAspectAgnostic?: boolean;

package/dist/services/htmlCompiler.d.ts

@@ -26,7 +26,7 @@ export interface CompiledComposition {
     hasAncestorBackgroundImage: boolean;
 }
 export declare function injectSdkPositionEditsRenderScript(html: string): string;
-export type RenderModeHintCode = "iframe" | "requestAnimationFrame" | "htmlInCanvas";
+export type RenderModeHintCode = "iframe" | "requestAnimationFrame" | "htmlInCanvas" | "captureMotionBlur";
 export interface RenderModeHint {
     code: RenderModeHintCode;
     message: string;
@@ -35,7 +35,7 @@ export interface RenderModeHints {
     recommendScreenshot: boolean;
     reasons: RenderModeHint[];
 }
-export declare function detectRenderModeHints(html: string): RenderModeHints;
+export declare function detectRenderModeHints(html: string, pageMotionBlur?: "off"): RenderModeHints;
 export declare function detectThreeDTransformUsage(html: string): boolean;
 /**
  * Background-image signals on ancestors of the composition root.
@@ -191,6 +191,7 @@ export interface CompileForRenderOptions {
      * `window.__hfVariables` injection covers script reads, not var() in CSS.
      */
     variables?: Record<string, unknown>;
+    pageMotionBlur?: "off";
 }
 /**
  * Compile an HTML composition project into a single self-contained HTML string

package/dist/services/render/motionBlurRoute.d.ts

@@ -16,7 +16,7 @@
  * requested on one. There is nothing to reject, and threading it through the frozen plan
  * is a feature rather than a fix.
  */
-import type { MotionBlurOptions } from "@hyperframes/engine";
+import type { MotionBlurOptions, PageMotionBlurOff } from "@hyperframes/engine";
 import type { CapturePlan } from "./capturePlan.js";
 /**
  * Throw a named error when motion blur was asked for on a route that cannot deliver it.
@@ -25,3 +25,13 @@ import type { CapturePlan } from "./capturePlan.js";
  * is a render that accepts `motionBlur` and returns frames with no blur in them.
  */
 export declare function assertMotionBlurSupported(motionBlur: MotionBlurOptions | undefined, route: CapturePlan["kind"]): void;
+/**
+ * Why the page's own capture blur (`data-motion-blur="on"`) must stand down on this route, or
+ * undefined when it can run. The layered compositor screenshots each DOM layer after hiding the
+ * others; blur draws the whole composition into a canvas that those hides do not reach, so a
+ * layer comes out wrong (HDR: backgrounds and overlays lost).
+ */
+export declare function pageMotionBlurForRoute(route: {
+    hasHdrContent: boolean;
+    useLayeredComposite: boolean;
+}): PageMotionBlurOff | undefined;

package/dist/services/render/stages/compileStage.d.ts

@@ -80,6 +80,8 @@ export interface CompileStageInput {
     variables?: Record<string, unknown>;
     /** Absolute project paths not on disk, readable at these URLs instead. */
     urlByAbsentLocalPath?: ReadonlyMap<string, string>;
+    /** See RenderConfig.pageMotionBlur; decides whether the page renders through screenshots. */
+    pageMotionBlur?: "off";
 }
 export interface CompileStageResult {
     compiled: CompiledComposition;

package/dist/services/renderOrchestrator.d.ts

@@ -94,6 +94,7 @@ export interface RenderConfig {
      * and JPEG samples would be averaged after a lossy quantization.
      */
     motionBlur?: MotionBlurOptions;
+    pageMotionBlur?: "off";
     workers?: number;
     useGpu?: boolean;
     debug?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/producer",
-  "version": "0.8.185",
+  "version": "0.8.186",
   "description": "HTML-to-video rendering engine using Chrome's BeginFrame API",
   "repository": {
     "type": "git",
@@ -35,11 +35,11 @@
     "postcss": "^8.4.0",
     "puppeteer": "^25.2.1",
     "puppeteer-core": "^25.2.1",
-    "@hyperframes/lint": "0.8.185",
-    "@hyperframes/parsers": "0.8.185",
-    "@hyperframes/studio-server": "0.8.185",
-    "@hyperframes/engine": "0.8.185",
-    "@hyperframes/core": "0.8.185"
+    "@hyperframes/engine": "0.8.186",
+    "@hyperframes/lint": "0.8.186",
+    "@hyperframes/parsers": "0.8.186",
+    "@hyperframes/core": "0.8.186",
+    "@hyperframes/studio-server": "0.8.186"
   },
   "devDependencies": {
     "@types/node": "^25.0.10",
@@ -48,7 +48,7 @@
     "tsx": "^4.21.0",
     "typescript": "^5.7.2",
     "vitest": "^4.1.11",
-    "@hyperframes/aws-lambda": "0.8.185"
+    "@hyperframes/aws-lambda": "0.8.186"
   },
   "engines": {
     "node": ">=22"