@remotion/web-renderer 4.0.485 → 4.0.487

package/LICENSE.md

@@ -0,0 +1,49 @@
+# Remotion License
+
+In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
+
+---
+
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+
+- [Free License](#free-license)
+- [Company License](#company-license)
+
+## Free License
+
+Copyright © 2026 [Remotion](https://www.remotion.dev)
+
+### Eligibility
+
+You are eligible to use Remotion for free if you are:
+
+- an individual
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
+- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
+
+### Allowed use cases
+
+Permission is hereby granted, free of charge, to any person eligible for the "Free License", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+
+### Disallowed use cases
+
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
+
+### Warranty notice
+
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+
+### Support
+
+Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
+
+## Company License
+
+You are required to obtain a Company License to use Remotion if you are not within the group of entities eligible for a Free License. This license will enable you to use Remotion for the allowed use cases specified in the Free License, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
+
+Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
+
+### FAQs
+
+Are you not sure whether you need a Company License because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).

package/dist/compose.d.ts

@@ -1,4 +1,4 @@
-export declare const compose: ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClipText, scale, }: {
+export declare const compose: ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -23,4 +23,5 @@ export declare const compose: ({ element, context, logLevel, parentRect, interna
     };
     onlyBackgroundClipText: boolean;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<void>;

package/dist/drawing/process-node.d.ts

@@ -5,7 +5,7 @@ export type ProcessNodeReturnValue = {
 } | {
     type: 'skip-children';
 };
-export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, rootElement, scale, }: {
+export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, rootElement, scale, waitForPageResponsiveness, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
@@ -31,4 +31,5 @@ export declare const processNode: ({ element, context, draw, logLevel, parentRec
     };
     rootElement: HTMLElement | SVGElement;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/text/handle-text-node.d.ts

@@ -1,5 +1,5 @@
 import type { ProcessNodeReturnValue } from '../process-node';
-export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, }: {
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -25,4 +25,5 @@ export declare const handleTextNode: ({ node, context, logLevel, parentRect, int
     rootElement: HTMLElement | SVGElement;
     onlyBackgroundClipText: boolean;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/text/text-decoration.d.ts

@@ -1,5 +1,5 @@
 type TextDecorationLine = 'underline' | 'overline' | 'line-through';
-export type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed';
+export type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
 export type TextDecoration = {
     lines: TextDecorationLine[];
     color: string;

package/dist/esm/index.mjs

@@ -1248,6 +1248,53 @@ var makeVideoSampleSourceCleanup = (encodingConfig) => {
   };
 };
 
+// src/page-responsiveness.ts
+var PRESET_INTERVALS = {
+  low: 100,
+  medium: 33,
+  high: 16
+};
+var resolvePageResponsivenessInterval = (pageResponsiveness) => {
+  if (pageResponsiveness === "disabled") {
+    return null;
+  }
+  if (pageResponsiveness === "low" || pageResponsiveness === "medium" || pageResponsiveness === "high") {
+    return PRESET_INTERVALS[pageResponsiveness];
+  }
+  if (typeof pageResponsiveness === "number") {
+    if (Number.isNaN(pageResponsiveness)) {
+      throw new Error("`pageResponsiveness` should not be NaN, but is NaN");
+    }
+    if (!Number.isFinite(pageResponsiveness)) {
+      throw new Error(`"pageResponsiveness" must be finite, but is ${pageResponsiveness}`);
+    }
+    if (pageResponsiveness <= 0) {
+      throw new Error(`"pageResponsiveness" must be greater than 0, but is ${pageResponsiveness}`);
+    }
+    return pageResponsiveness;
+  }
+  throw new Error(`"pageResponsiveness" must be one of "disabled", "low", "medium", "high", or a number, but got ${JSON.stringify(pageResponsiveness)}`);
+};
+var createPageResponsivenessController = ({
+  intervalInMilliseconds,
+  now,
+  wait
+}) => {
+  let lastYieldAt = now();
+  return {
+    waitIfNeeded: async () => {
+      if (intervalInMilliseconds === null) {
+        return;
+      }
+      if (now() - lastYieldAt < intervalInMilliseconds) {
+        return;
+      }
+      await wait();
+      lastYieldAt = now();
+    }
+  };
+};
+
 // src/render-operations-queue.ts
 var onlyOneRenderAtATimeQueue = {
   ref: Promise.resolve()
@@ -2045,6 +2092,38 @@ var filterRequiresPrecompositing = (filter) => {
   }
   return null;
 };
+var isReplacedElement = (element) => {
+  return element instanceof HTMLImageElement || element instanceof HTMLVideoElement || element instanceof HTMLCanvasElement || element instanceof HTMLIFrameElement || element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLObjectElement || element instanceof HTMLEmbedElement;
+};
+var canApplyCssTransforms = ({
+  element,
+  computedStyle
+}) => {
+  if (element instanceof SVGElement) {
+    return true;
+  }
+  if (computedStyle.display !== "inline") {
+    return true;
+  }
+  return isReplacedElement(element);
+};
+var makeTransformResetter = (element) => {
+  const { transform, scale, rotate } = element.style;
+  return (hasApplicableTransformCssValue) => {
+    if (hasApplicableTransformCssValue) {
+      element.style.transform = "none";
+      element.style.scale = "none";
+      element.style.rotate = "none";
+    }
+    return () => {
+      if (hasApplicableTransformCssValue) {
+        element.style.transform = transform;
+        element.style.scale = scale;
+        element.style.rotate = rotate;
+      }
+    };
+  };
+};
 var getInternalTransformOrigin = (transform) => {
   const centerX = transform.boundingClientRect.width / 2;
   const centerY = transform.boundingClientRect.height / 2;
@@ -2099,21 +2178,21 @@ var calculateTransforms = ({
         }
       });
     }
-    if (hasAnyTransformCssValue(computedStyle) || parent === element) {
-      const toParse = hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
+    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle, element: parent }) && hasAnyTransformCssValue(computedStyle);
+    if (hasApplicableTransformCssValue || parent === element) {
+      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
       const matrix = new DOMMatrix(toParse);
-      const { transform, scale, rotate } = parent.style;
+      const resetTransforms = makeTransformResetter(parent);
+      const { scale, rotate } = parent.style;
       const additionalMatrices = [];
-      if (rotate !== "" && rotate !== "none") {
+      if (hasApplicableTransformCssValue && rotate !== "" && rotate !== "none") {
         additionalMatrices.push(new DOMMatrix(`rotate(${rotate})`));
       }
-      if (scale !== "" && scale !== "none") {
+      if (hasApplicableTransformCssValue && scale !== "" && scale !== "none") {
         additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
       }
       additionalMatrices.push(matrix);
-      parent.style.transform = "none";
-      parent.style.scale = "none";
-      parent.style.rotate = "none";
+      const cleanup = resetTransforms(hasApplicableTransformCssValue);
       transforms.push({
         element: parent,
         transformOrigin: computedStyle.transformOrigin,
@@ -2122,9 +2201,7 @@ var calculateTransforms = ({
       });
       const parentRef = parent;
       toReset.push(() => {
-        parentRef.style.transform = transform;
-        parentRef.style.scale = scale;
-        parentRef.style.rotate = rotate;
+        cleanup();
         parentRef.style.transition = originalTransition;
       });
     } else {
@@ -2727,7 +2804,8 @@ var drawBackground = async ({
         logLevel,
         internalState,
         scale,
-        onlyBackgroundClipText: true
+        onlyBackgroundClipText: true,
+        waitForPageResponsiveness: null
       });
       onlyBackgroundClipText.setTransform(new DOMMatrix().scale(scale, scale));
       element.style.backgroundClip = originalBackgroundClip;
@@ -3921,7 +3999,8 @@ var processNode = async ({
   parentRect,
   internalState,
   rootElement,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   let __stack = [];
   try {
@@ -3985,8 +4064,12 @@ var processNode = async ({
         logLevel,
         internalState,
         scale,
-        onlyBackgroundClipText: false
+        onlyBackgroundClipText: false,
+        waitForPageResponsiveness
       });
+      if (waitForPageResponsiveness !== null) {
+        await waitForPageResponsiveness();
+      }
       let drawable = tempContext.canvas;
       const rectAfterTransforms = roundToExpandRect(scaleRect({
         scale,
@@ -4003,6 +4086,9 @@ var processNode = async ({
           tempContext,
           scale
         });
+        if (waitForPageResponsiveness !== null) {
+          await waitForPageResponsiveness();
+        }
       }
       if (precompositing.needs3DTransformViaWebGL) {
         const t = handle3dTransform({
@@ -4016,6 +4102,9 @@ var processNode = async ({
         if (t) {
           drawable = t;
         }
+        if (waitForPageResponsiveness !== null) {
+          await waitForPageResponsiveness();
+        }
       }
       const previousTransform = context.getTransform();
       context.setTransform(new DOMMatrix);
@@ -4032,6 +4121,9 @@ var processNode = async ({
         drawPrecomposedCanvas();
       }
       context.setTransform(previousTransform);
+      if (waitForPageResponsiveness !== null) {
+        await waitForPageResponsiveness();
+      }
       Internals6.Log.trace({
         logLevel,
         tag: "@remotion/web-renderer"
@@ -4134,10 +4226,7 @@ var getDefaultTextDecorationThickness = (fontSizePx) => {
   return Math.max(1, Number.isFinite(fontSizePx) ? fontSizePx / 16 : 1);
 };
 var getTextDecorationStyle = (style) => {
-  if (style === "wavy") {
-    return null;
-  }
-  if (style === "double" || style === "dotted" || style === "dashed") {
+  if (style === "double" || style === "dotted" || style === "dashed" || style === "wavy") {
     return style;
   }
   return "solid";
@@ -4147,9 +4236,6 @@ var parseTextDecoration = ({
   style
 }) => {
   const textDecorationStyle = getTextDecorationStyle(style.getPropertyValue("text-decoration-style").trim());
-  if (textDecorationStyle === null) {
-    return null;
-  }
   const textDecorationLine = style.getPropertyValue("text-decoration-line");
   const lineParts = textDecorationLine.split(/\s+/);
   const lines = textDecorationLines.filter((line) => lineParts.includes(line));
@@ -4223,6 +4309,34 @@ var getTextDecorationLineDashPattern = (style, thickness) => {
   }
   return [];
 };
+var drawWavyTextDecorationLine = ({
+  contextToDraw,
+  endX,
+  lineY,
+  startX,
+  thickness
+}) => {
+  const step = Math.max(2, thickness);
+  const amplitude = step;
+  const halfWavelength = step * 2;
+  const wavelength = halfWavelength * 2;
+  const phaseStartX = Math.floor(startX / wavelength) * wavelength;
+  contextToDraw.save();
+  contextToDraw.beginPath();
+  contextToDraw.rect(startX, lineY - amplitude - thickness, endX - startX, (amplitude + thickness) * 2);
+  contextToDraw.clip();
+  contextToDraw.beginPath();
+  contextToDraw.moveTo(phaseStartX, lineY);
+  let x = phaseStartX;
+  let direction = 1;
+  while (x < endX) {
+    contextToDraw.quadraticCurveTo(x + halfWavelength / 2, lineY + direction * amplitude * 2, x + halfWavelength, lineY);
+    x += halfWavelength;
+    direction = -direction;
+  }
+  contextToDraw.stroke();
+  contextToDraw.restore();
+};
 var strokeTextDecorationLine = ({
   contextToDraw,
   endX,
@@ -4264,6 +4378,17 @@ var drawTextDecoration = ({
         thickness: textDecoration.thickness,
         fontSizePx
       });
+      if (textDecoration.style === "wavy") {
+        contextToDraw.setLineDash([]);
+        drawWavyTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY,
+          startX,
+          thickness: textDecoration.thickness
+        });
+        continue;
+      }
       if (textDecoration.style === "double") {
         contextToDraw.setLineDash([]);
         strokeTextDecorationLine({
@@ -4426,7 +4551,8 @@ var handleTextNode = async ({
   internalState,
   rootElement,
   onlyBackgroundClipText,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -4443,7 +4569,8 @@ var handleTextNode = async ({
     parentRect,
     internalState,
     rootElement,
-    scale
+    scale,
+    waitForPageResponsiveness
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -4459,7 +4586,8 @@ var walkOverNode = ({
   internalState,
   rootElement,
   onlyBackgroundClipText,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -4470,7 +4598,8 @@ var walkOverNode = ({
       parentRect,
       internalState,
       rootElement,
-      scale
+      scale,
+      waitForPageResponsiveness
     });
   }
   if (node instanceof Text) {
@@ -4482,7 +4611,8 @@ var walkOverNode = ({
       internalState,
       rootElement,
       onlyBackgroundClipText,
-      scale
+      scale,
+      waitForPageResponsiveness
     });
   }
   throw new Error("Unknown node type");
@@ -4509,7 +4639,8 @@ var compose = async ({
   parentRect,
   internalState,
   onlyBackgroundClipText,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   let __stack = [];
   try {
@@ -4532,7 +4663,8 @@ var compose = async ({
         internalState,
         rootElement: element,
         onlyBackgroundClipText,
-        scale
+        scale,
+        waitForPageResponsiveness
       });
       if (val.type === "skip-children") {
         if (!skipToNextNonDescendant(treeWalker)) {
@@ -4546,6 +4678,9 @@ var compose = async ({
           break;
         }
       }
+      if (waitForPageResponsiveness !== null) {
+        await waitForPageResponsiveness();
+      }
     }
   } catch (_catch) {
     var _err = _catch, _hasErr = 1;
@@ -4563,7 +4698,8 @@ var createLayer = async ({
   onlyBackgroundClipText,
   cutout,
   htmlInCanvasContext,
-  onHtmlInCanvasLayerOutcome
+  onHtmlInCanvasLayerOutcome,
+  waitForPageResponsiveness
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
@@ -4599,7 +4735,8 @@ var createLayer = async ({
     parentRect: cutout,
     internalState,
     onlyBackgroundClipText,
-    scale
+    scale,
+    waitForPageResponsiveness
   });
   return context;
 };
@@ -4827,6 +4964,7 @@ var internalRenderMediaOnWeb = async ({
   transparent,
   onArtifact,
   onFrame,
+  pageResponsiveness,
   outputTarget: userDesiredOutputTarget,
   licenseKey,
   muted,
@@ -4838,6 +4976,7 @@ var internalRenderMediaOnWeb = async ({
   let __stack2 = [];
   try {
     validateScale(scale);
+    const pageResponsivenessIntervalInMilliseconds = resolvePageResponsivenessInterval(pageResponsiveness);
     let htmlInCanvasLayerOutcomeReported = false;
     const onHtmlInCanvasLayerOutcome = (outcome) => {
       if (htmlInCanvasLayerOutcomeReported) {
@@ -4949,6 +5088,19 @@ var internalRenderMediaOnWeb = async ({
       });
     }
     const internalState = __using(__stack2, makeInternalState(), 0);
+    const pageResponsivenessController = createPageResponsivenessController({
+      intervalInMilliseconds: pageResponsivenessIntervalInMilliseconds,
+      now: () => performance.now(),
+      wait: () => new Promise((resolve) => {
+        setTimeout(resolve, 0);
+      })
+    });
+    const waitForPageResponsiveness = async () => {
+      await pageResponsivenessController.waitIfNeeded();
+      if (signal?.aborted) {
+        throw new Error("renderMediaOnWeb() was cancelled");
+      }
+    };
     const keepalive = __using(__stack2, createBackgroundKeepalive({
       fps: resolved.fps,
       logLevel
@@ -5062,13 +5214,15 @@ var internalRenderMediaOnWeb = async ({
               onlyBackgroundClipText: false,
               cutout: new DOMRect(0, 0, resolved.width, resolved.height),
               htmlInCanvasContext,
-              onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
+              onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
+              waitForPageResponsiveness
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
             if (signal?.aborted) {
               throw new Error("renderMediaOnWeb() was cancelled");
             }
+            await waitForPageResponsiveness();
             const videoFrame = new VideoFrame(layer.canvas, {
               timestamp
             });
@@ -5085,6 +5239,7 @@ var internalRenderMediaOnWeb = async ({
                 expectedHeight: Math.round(resolved.height * scale),
                 expectedTimestamp: timestamp
               });
+              await waitForPageResponsiveness();
             }
           }
           const now = Date.now();
@@ -5110,11 +5265,10 @@ var internalRenderMediaOnWeb = async ({
               onArtifact
             });
           }
-          if (signal?.aborted) {
-            throw new Error("renderMediaOnWeb() was cancelled");
-          }
+          await waitForPageResponsiveness();
           const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp, sampleRate });
           internalState.addAudioMixingTime(performance.now() - audioCombineStart);
+          await waitForPageResponsiveness();
           const addSampleStart = performance.now();
           const encodingPromises = [];
           if (frameToEncode && videoSampleSource) {
@@ -5133,8 +5287,10 @@ var internalRenderMediaOnWeb = async ({
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
+          await waitForPageResponsiveness();
         }
         onProgress?.(getProgressPayload());
+        await waitForPageResponsiveness();
         videoSampleSource?.videoSampleSource.close();
         audioSampleSource?.audioSampleSource.close();
         await outputWithCleanup.output.finalize();
@@ -5222,6 +5378,7 @@ var renderMediaOnWeb = (options) => {
     transparent: options.transparent ?? false,
     onArtifact: options.onArtifact ?? null,
     onFrame: options.onFrame ?? null,
+    pageResponsiveness: options.pageResponsiveness ?? "medium",
     outputTarget: options.outputTarget ?? null,
     licenseKey: options.licenseKey ?? null,
     muted: options.muted ?? false,
@@ -5387,7 +5544,8 @@ async function internalRenderStillOnWeb({
         onlyBackgroundClipText: false,
         cutout: new DOMRect(0, 0, resolved.width, resolved.height),
         htmlInCanvasContext,
-        onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
+        onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
+        waitForPageResponsiveness: null
       });
       const { canvas } = capturedFrame;
       const assets = collectAssets.current.collectAssets();

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { getEncodableAudioCodecs, getEncodableVideoCodecs, type GetEncodableAudi
 export { getDefaultAudioCodecForContainer, getDefaultContainerForCodec, getDefaultVideoCodecForContainer, getSupportedAudioCodecsForContainer, getSupportedVideoCodecsForContainer, isAudioOnlyContainer, } from './mediabunny-mappings';
 export type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec, } from './mediabunny-mappings';
 export type { WebRendererOutputTarget } from './output-target';
+export type { WebRendererPageResponsiveness } from './page-responsiveness';
 export { renderMediaOnWeb } from './render-media-on-web';
 export type { RenderMediaOnWebOptions, RenderMediaOnWebProgress, RenderMediaOnWebProgressCallback, RenderMediaOnWebResult, WebRendererHardwareAcceleration, } from './render-media-on-web';
 export { renderStillOnWeb } from './render-still-on-web';

package/dist/page-responsiveness.d.ts

@@ -0,0 +1,9 @@
+export type WebRendererPageResponsiveness = 'disabled' | 'low' | 'medium' | 'high' | number;
+export declare const resolvePageResponsivenessInterval: (pageResponsiveness: unknown) => number | null;
+export declare const createPageResponsivenessController: ({ intervalInMilliseconds, now, wait, }: {
+    intervalInMilliseconds: number | null;
+    now: () => number;
+    wait: () => Promise<void>;
+}) => {
+    waitIfNeeded: () => Promise<void>;
+};

package/dist/render-media-on-web.d.ts

@@ -7,6 +7,7 @@ import type { InternalState } from './internal-state';
 import type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality } from './mediabunny-mappings';
 import { type WebRendererVideoCodec } from './mediabunny-mappings';
 import type { WebRendererOutputTarget } from './output-target';
+import { type WebRendererPageResponsiveness } from './page-responsiveness';
 import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
 import { type OnFrameCallback } from './validate-video-frame';
 export type InputPropsIfHasProps<Schema extends $ZodObject, Props> = $ZodObject extends Schema ? {} extends Props ? {
@@ -60,6 +61,7 @@ type OptionalRenderMediaOnWebOptions<Schema extends $ZodObject> = {
     transparent: boolean;
     onArtifact: WebRendererOnArtifact | null;
     onFrame: OnFrameCallback | null;
+    pageResponsiveness: WebRendererPageResponsiveness;
     outputTarget: WebRendererOutputTarget | null;
     licenseKey: string | null;
     isProduction: boolean;

package/dist/take-screenshot.d.ts

@@ -6,7 +6,7 @@ export type HtmlInCanvasLayerOutcome = {
     reason: string;
     shouldWarn: boolean;
 };
-export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, htmlInCanvasContext, onHtmlInCanvasLayerOutcome, }: {
+export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, htmlInCanvasContext, onHtmlInCanvasLayerOutcome, waitForPageResponsiveness, }: {
     element: HTMLElement | SVGElement;
     scale: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -32,4 +32,5 @@ export declare const createLayer: ({ element, scale, logLevel, internalState, on
     cutout: DOMRect;
     htmlInCanvasContext?: HtmlInCanvasContext | null | undefined;
     onHtmlInCanvasLayerOutcome?: ((outcome: HtmlInCanvasLayerOutcome) => void) | undefined;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/walk-over-node.d.ts

@@ -1,5 +1,5 @@
 import type { ProcessNodeReturnValue } from './drawing/process-node';
-export declare const walkOverNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, }: {
+export declare const walkOverNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
     node: Node;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -25,4 +25,5 @@ export declare const walkOverNode: ({ node, context, logLevel, parentRect, inter
     rootElement: HTMLElement | SVGElement;
     onlyBackgroundClipText: boolean;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<ProcessNodeReturnValue>;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.485",
+	"version": "4.0.487",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -19,22 +19,22 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@mediabunny/mp3-encoder": "1.50.3",
-		"@mediabunny/aac-encoder": "1.50.3",
-		"@mediabunny/flac-encoder": "1.50.3",
-		"@remotion/licensing": "4.0.485",
-		"remotion": "4.0.485",
-		"mediabunny": "1.50.3"
+		"@mediabunny/mp3-encoder": "1.50.7",
+		"@mediabunny/aac-encoder": "1.50.7",
+		"@mediabunny/flac-encoder": "1.50.7",
+		"@remotion/licensing": "4.0.487",
+		"remotion": "4.0.487",
+		"mediabunny": "1.50.7"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.485",
-		"@remotion/paths": "4.0.485",
-		"@remotion/player": "4.0.485",
-		"@remotion/media": "4.0.485",
-		"@remotion/shapes": "4.0.485",
-		"@remotion/three": "4.0.485",
-		"@remotion/transitions": "4.0.485",
+		"@remotion/eslint-config-internal": "4.0.487",
+		"@remotion/paths": "4.0.487",
+		"@remotion/player": "4.0.487",
+		"@remotion/media": "4.0.487",
+		"@remotion/shapes": "4.0.487",
+		"@remotion/three": "4.0.487",
+		"@remotion/transitions": "4.0.487",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",