@remotion/web-renderer 4.0.403 → 4.0.404

package/dist/background-keepalive.d.ts

@@ -0,0 +1,9 @@
+import { type LogLevel } from 'remotion';
+export type BackgroundKeepalive = {
+    waitForTick: () => Promise<void>;
+    [Symbol.dispose]: () => void;
+};
+export declare function createBackgroundKeepalive({ fps, logLevel }: {
+    fps: number;
+    logLevel: LogLevel;
+}): BackgroundKeepalive;

package/dist/drawing/elements-and-bounds.d.ts

@@ -0,0 +1,9 @@
+import type { Precompositing } from './calculate-transforms';
+export type ElementAndBounds = {
+    element: Element;
+    bounds: DOMRect;
+    transform: DOMMatrix;
+    parentRect: DOMRect;
+    precompositing: Precompositing;
+    establishes3DRenderingContext: DOMMatrix | null;
+};

package/dist/drawing/get-pretransform-rect.d.ts

@@ -1 +1 @@
-export declare function getPreTransformRect(targetRect: DOMRect, matrix: DOMMatrix): DOMRect;
+export declare function getPreTransformRect(targetRect: DOMRect, matrix: DOMMatrix): DOMRect | null;

package/dist/drawing/handle-3d-transform.d.ts

@@ -2,10 +2,10 @@ export declare const getPrecomposeRectFor3DTransform: ({ element, parentRect, ma
     element: HTMLElement | SVGElement;
     parentRect: DOMRect;
     matrix: DOMMatrix;
-}) => DOMRect;
-export declare const handle3dTransform: ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, internalState, }: {
+}) => DOMRect | null;
+export declare const handle3dTransform: ({ matrix, sourceRect, tempCanvas, rectAfterTransforms, internalState, }: {
     matrix: DOMMatrix;
-    precomposeRect: DOMRect;
+    sourceRect: DOMRect;
     tempCanvas: OffscreenCanvas;
     rectAfterTransforms: DOMRect;
     internalState: {

package/dist/drawing/precompose-and-draw.d.ts

@@ -0,0 +1,33 @@
+import type { Precompositing } from './calculate-transforms';
+import type { ElementAndBounds } from './elements-and-bounds';
+export declare const precompose: ({ element, logLevel, parentRect, internalState, precompositing, totalMatrix, rect, isIn3dRenderingContext, }: {
+    element: HTMLElement | SVGElement;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    parentRect: DOMRect;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
+    precompositing: Precompositing;
+    totalMatrix: DOMMatrix;
+    rect: DOMRect;
+    isIn3dRenderingContext: DOMMatrix | null;
+}) => Promise<{
+    drawable: OffscreenCanvas;
+    rectAfterTransforms: DOMRect;
+    elementsToBeRenderedIndependently: ElementAndBounds[];
+} | null>;

package/dist/drawing/renoun.d.ts

@@ -0,0 +1,125 @@
+/** Image format for encoded screenshot output. */
+export type ImageFormat = 'png' | 'jpeg' | 'webp';
+/** Options for rendering a screenshot to canvas. */
+export interface RenderOptions {
+    /**
+     * Canvas background color. Set to `null` (or omit) for a transparent canvas.
+     * When provided, the string is passed directly to `fillStyle`.
+     */
+    backgroundColor?: string | null;
+    /**
+     * Optional existing canvas to render into.
+     * When omitted, a new canvas element is created.
+     */
+    canvas?: HTMLCanvasElement;
+    /**
+     * Rendering scale factor. Defaults to `window.devicePixelRatio` (or `1`).
+     */
+    scale?: number;
+    /**
+     * Crop origin X (CSS pixels) relative to the element's left edge.
+     * Defaults to the element's left edge.
+     */
+    x?: number;
+    /**
+     * Crop origin Y (CSS pixels) relative to the element's top edge.
+     * Defaults to the element's top edge.
+     */
+    y?: number;
+    /**
+     * Output width in CSS pixels. Defaults to the element's width.
+     */
+    width?: number;
+    /**
+     * Output height in CSS pixels. Defaults to the element's height.
+     */
+    height?: number;
+    /**
+     * Controls how `position: fixed` elements outside the captured subtree are
+     * handled.
+     *
+     * - `none` – ignore all fixed elements outside `element`.
+     * - `intersecting` – include fixed elements whose bounding rect intersects the capture rect.
+     * - `all` – include all fixed elements that overlap the viewport.
+     */
+    includeFixed?: 'none' | 'intersecting' | 'all';
+    /**
+     * CSS selector used to skip elements from rendering.
+     * Defaults to `[data-screenshot-ignore]`. Set to `null` or an empty string
+     * to disable selector-based skipping.
+     */
+    ignoreSelector?: string | null;
+}
+/** Options for encoding a canvas to an image format. */
+export interface EncodeOptions {
+    /**
+     * Image format to encode. Defaults to `'png'`.
+     */
+    format?: ImageFormat;
+    /**
+     * Image quality for lossy formats (`jpeg`, `webp`). A number between `0` and `1`.
+     * Ignored for `png`. Defaults to `0.92`.
+     */
+    quality?: number;
+}
+/** Combined options for one-shot screenshot methods that render and encode. */
+export type ScreenshotOptions = RenderOptions & EncodeOptions;
+/**
+ * A promise-like object representing a screenshot capture. The underlying
+ * render happens once; subsequent calls to `.canvas()`, `.blob()`, or `.url()`
+ * reuse the same rendered canvas.
+ */
+export interface ScreenshotTask extends Promise<HTMLCanvasElement> {
+    /** Returns the rendered canvas. */
+    canvas(): Promise<HTMLCanvasElement>;
+    /** Encodes the rendered canvas to a Blob. */
+    blob(options?: EncodeOptions): Promise<Blob>;
+    /**
+     * Encodes the rendered canvas to a Blob and creates an object URL.
+     * Remember to call `URL.revokeObjectURL(url)` when done to avoid memory leaks.
+     */
+    url(options?: EncodeOptions): Promise<string>;
+}
+/**
+ * Renders a DOM element into a canvas using modern browser features.
+ *
+ * Returns a `ScreenshotTask` that is both a Promise and provides methods
+ * to encode the rendered canvas. The underlying render happens once;
+ * subsequent calls to `.canvas()`, `.blob()`, or `.url()` reuse the same result.
+ *
+ * This implementation targets evergreen browsers only and assumes a real DOM +
+ * Canvas2D environment (not Node.js).
+ *
+ * @example
+ * // Capture handle pattern - render once, encode multiple ways
+ * const shot = screenshot(element, { scale: 2 })
+ * const canvas = await shot.canvas()
+ * const pngBlob = await shot.blob({ format: 'png' })
+ * const webpUrl = await shot.url({ format: 'webp', quality: 0.9 })
+ *
+ * @example
+ * // Direct await returns the canvas
+ * const canvas = await screenshot(element)
+ *
+ * @example
+ * // One-shot convenience methods
+ * const canvas = await screenshot.canvas(element, { scale: 2 })
+ * const blob = await screenshot.blob(element, { format: 'jpeg', quality: 0.85 })
+ * const url = await screenshot.url(element, { format: 'png' })
+ */
+declare function screenshot(target: Element | string, options?: RenderOptions): ScreenshotTask;
+declare namespace screenshot {
+    var canvas: (target: string | Element, options?: RenderOptions | undefined) => Promise<HTMLCanvasElement>;
+}
+declare namespace screenshot {
+    var blob: (target: string | Element, options?: ScreenshotOptions | undefined) => Promise<Blob>;
+}
+declare namespace screenshot {
+    var url: (target: string | Element, options?: ScreenshotOptions | undefined) => Promise<string>;
+}
+export { screenshot };
+declare global {
+    interface CanvasRenderingContext2D {
+        _filterPolyfillValue?: string;
+    }
+}

package/dist/drawing/transform-in-3d.d.ts

@@ -1,9 +1,9 @@
 import type { HelperCanvasState } from '../internal-state';
-export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, internalState, }: {
-    untransformedRect: DOMRect;
+export declare const transformIn3d: ({ matrix, sourceCanvas, sourceRect, destRect, internalState, }: {
+    sourceRect: DOMRect;
     matrix: DOMMatrix;
     sourceCanvas: OffscreenCanvas;
-    rectAfterTransforms: DOMRect;
+    destRect: DOMRect;
     internalState: {
         getDrawn3dPixels: () => number;
         getPrecomposedTiles: () => number;
@@ -22,7 +22,4 @@ export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect,
         getAudioMixingTime: () => number;
         addAudioMixingTime: (time: number) => void;
     };
-}) => {
-    canvas: OffscreenCanvas;
-    rect: DOMRect;
-};
+}) => OffscreenCanvas;

package/dist/drawing/transform-origin.d.ts

@@ -0,0 +1,21 @@
+export type Transform = {
+    matrices: DOMMatrix[];
+    element: Element;
+    transformOrigin: string;
+    boundingClientRect: DOMRect | null;
+};
+export declare const parseTransformOriginOrPerspectiveOrigin: (transformOrigin: string) => {
+    x: number;
+    y: number;
+} | null;
+export declare const getInternalOrigin: (origin: string, boundingClientRect: DOMRect) => {
+    x: number;
+    y: number;
+};
+export declare const getGlobalOrigin: ({ origin, boundingClientRect, }: {
+    origin: string;
+    boundingClientRect: DOMRect;
+}) => {
+    x: number;
+    y: number;
+};

package/dist/drawing/transform-perspective-origin.d.ts

@@ -0,0 +1,17 @@
+export type Transform = {
+    matrices: DOMMatrix[];
+    element: Element;
+    transformOrigin: string;
+    boundingClientRect: DOMRect | null;
+};
+export declare const parseTransformOriginOrPerspectiveOrigin: (transformOrigin: string) => {
+    x: number;
+    y: number;
+} | null;
+export declare const getAbsoluteOrigin: ({ origin, boundingClientRect, }: {
+    origin: string;
+    boundingClientRect: DOMRect;
+}) => {
+    x: number;
+    y: number;
+};

package/dist/esm/index.mjs

@@ -359,7 +359,7 @@ var getEncodableAudioCodecs = async (container, options) => {
 };
 // src/render-media-on-web.tsx
 import { BufferTarget, StreamTarget } from "mediabunny";
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/add-sample.ts
 import { AudioSample, VideoSample } from "mediabunny";
@@ -488,6 +488,92 @@ var onlyInlineAudio = ({
   });
 };
 
+// src/background-keepalive.ts
+import { Internals } from "remotion";
+var WORKER_CODE = `
+let intervalId = null;
+self.onmessage = (e) => {
+	if (e.data.type === 'start') {
+		if (intervalId !== null) {
+			clearInterval(intervalId);
+		}
+		intervalId = setInterval(() => self.postMessage('tick'), e.data.intervalMs);
+	} else if (e.data.type === 'stop') {
+		if (intervalId !== null) {
+			clearInterval(intervalId);
+			intervalId = null;
+		}
+	}
+};
+`;
+function createBackgroundKeepalive({
+  fps,
+  logLevel
+}) {
+  const intervalMs = Math.round(1000 / fps);
+  let pendingResolvers = [];
+  let worker = null;
+  let disposed = false;
+  if (typeof Worker === "undefined") {
+    Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Web Workers not available. Rendering may pause when tab is backgrounded.");
+    return {
+      waitForTick: () => {
+        return new Promise((resolve) => {
+          setTimeout(resolve, intervalMs);
+        });
+      },
+      [Symbol.dispose]: () => {}
+    };
+  }
+  const blob = new Blob([WORKER_CODE], { type: "application/javascript" });
+  const workerUrl = URL.createObjectURL(blob);
+  worker = new Worker(workerUrl);
+  worker.onmessage = () => {
+    const resolvers = pendingResolvers;
+    pendingResolvers = [];
+    for (const resolve of resolvers) {
+      resolve();
+    }
+  };
+  worker.onerror = (event) => {
+    Internals.Log.error({ logLevel, tag: "@remotion/web-renderer" }, "Background keepalive worker encountered an error and will be terminated.", event);
+    const resolvers = pendingResolvers;
+    pendingResolvers = [];
+    for (const resolve of resolvers) {
+      resolve();
+    }
+    if (!disposed) {
+      disposed = true;
+      worker?.terminate();
+      worker = null;
+      URL.revokeObjectURL(workerUrl);
+    }
+  };
+  worker.postMessage({ type: "start", intervalMs });
+  return {
+    waitForTick: () => {
+      return new Promise((resolve) => {
+        pendingResolvers.push(resolve);
+      });
+    },
+    [Symbol.dispose]: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      worker?.postMessage({ type: "stop" });
+      worker?.terminate();
+      worker = null;
+      URL.revokeObjectURL(workerUrl);
+      const resolvers = pendingResolvers;
+      pendingResolvers = [];
+      for (const resolve of resolvers) {
+        resolve();
+      }
+    }
+  };
+}
+
 // src/create-audio-sample-source.ts
 import { AudioSampleSource } from "mediabunny";
 var createAudioSampleSource = ({
@@ -509,12 +595,12 @@ var createAudioSampleSource = ({
 import { createRef } from "react";
 import { flushSync as flushSync2 } from "react-dom";
 import ReactDOM from "react-dom/client";
-import { Internals as Internals2 } from "remotion";
+import { Internals as Internals3 } from "remotion";
 
 // src/update-time.tsx
 import { useImperativeHandle, useState } from "react";
 import { flushSync } from "react-dom";
-import { Internals } from "remotion";
+import { Internals as Internals2 } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var UpdateTime = ({
   children,
@@ -533,7 +619,7 @@ var UpdateTime = ({
       });
     }
   }));
-  return /* @__PURE__ */ jsx(Internals.RemotionRootContexts, {
+  return /* @__PURE__ */ jsx(Internals2.RemotionRootContexts, {
     audioEnabled,
     videoEnabled,
     logLevel,
@@ -596,7 +682,7 @@ async function createScaffold({
   div.style.pointerEvents = "none";
   const scaffoldClassName = `remotion-scaffold-${Math.random().toString(36).substring(2, 15)}`;
   div.className = scaffoldClassName;
-  const cleanupCSS = Internals2.CSSUtils.injectCSS(Internals2.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
+  const cleanupCSS = Internals3.CSSUtils.injectCSS(Internals3.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   document.body.appendChild(div);
   const { promise, resolve, reject } = withResolvers();
   const root = ReactDOM.createRoot(div, {
@@ -614,9 +700,9 @@ async function createScaffold({
   const timeUpdater = createRef();
   const collectAssets = createRef();
   flushSync2(() => {
-    root.render(/* @__PURE__ */ jsx2(Internals2.MaxMediaCacheSizeContext.Provider, {
+    root.render(/* @__PURE__ */ jsx2(Internals3.MaxMediaCacheSizeContext.Provider, {
       value: mediaCacheSizeInBytes,
-      children: /* @__PURE__ */ jsx2(Internals2.RemotionEnvironmentContext.Provider, {
+      children: /* @__PURE__ */ jsx2(Internals3.RemotionEnvironmentContext.Provider, {
         value: {
           isStudio: false,
           isRendering: true,
@@ -624,9 +710,9 @@ async function createScaffold({
           isReadOnlyStudio: false,
           isClientSideRendering: true
         },
-        children: /* @__PURE__ */ jsx2(Internals2.DelayRenderContextType.Provider, {
+        children: /* @__PURE__ */ jsx2(Internals3.DelayRenderContextType.Provider, {
           value: delayRenderScope,
-          children: /* @__PURE__ */ jsx2(Internals2.CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx2(Internals3.CompositionManager.Provider, {
             value: {
               compositions: [
                 {
@@ -662,7 +748,7 @@ async function createScaffold({
               },
               folders: []
             },
-            children: /* @__PURE__ */ jsx2(Internals2.RenderAssetManagerProvider, {
+            children: /* @__PURE__ */ jsx2(Internals3.RenderAssetManagerProvider, {
               collectAssets,
               children: /* @__PURE__ */ jsx2(UpdateTime, {
                 audioEnabled,
@@ -671,7 +757,7 @@ async function createScaffold({
                 compId: id,
                 initialFrame,
                 timeUpdater,
-                children: /* @__PURE__ */ jsx2(Internals2.CanUseRemotionHooks.Provider, {
+                children: /* @__PURE__ */ jsx2(Internals3.CanUseRemotionHooks.Provider, {
                   value: true,
                   children: /* @__PURE__ */ jsx2(Component, {
                     ...resolvedProps
@@ -799,58 +885,77 @@ function isNetworkError(error) {
   return false;
 }
 var HOST = "https://www.remotion.pro";
+var DEFAULT_MAX_RETRIES = 3;
+var exponentialBackoffMs = (attempt) => {
+  return 1000 * 2 ** (attempt - 1);
+};
+var sleep = (ms) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+};
 var registerUsageEvent = async ({
   host,
   succeeded,
   event,
   ...apiOrLicenseKey
 }) => {
-  const abortController = new AbortController;
-  const timeout = setTimeout(() => {
-    abortController.abort();
-  }, 1e4);
   const apiKey = "apiKey" in apiOrLicenseKey ? apiOrLicenseKey.apiKey : null;
   const licenseKey = "licenseKey" in apiOrLicenseKey ? apiOrLicenseKey.licenseKey : null;
-  try {
-    const res = await fetch(`${HOST}/api/track/register-usage-point`, {
-      method: "POST",
-      body: JSON.stringify({
-        event,
-        apiKey: licenseKey ?? apiKey,
-        host,
-        succeeded
-      }),
-      headers: {
-        "Content-Type": "application/json"
-      },
-      signal: abortController.signal
-    });
-    clearTimeout(timeout);
-    const json = await res.json();
-    if (json.success) {
-      return {
-        billable: json.billable,
-        classification: json.classification
-      };
-    }
-    if (!res.ok) {
-      throw new Error(json.error);
-    }
-    throw new Error("Unexpected response from server");
-  } catch (err) {
-    if (isNetworkError(err)) {
-      console.log("Failed to send usage event", err);
-    }
-    clearTimeout(timeout);
-    if (err instanceof Error && err.name === "AbortError") {
-      throw new Error("Request timed out after 10 seconds");
+  let lastError;
+  const totalAttempts = DEFAULT_MAX_RETRIES + 1;
+  for (let attempt = 1;attempt <= totalAttempts; attempt++) {
+    const abortController = new AbortController;
+    const timeout = setTimeout(() => {
+      abortController.abort();
+    }, 1e4);
+    try {
+      const res = await fetch(`${HOST}/api/track/register-usage-point`, {
+        method: "POST",
+        body: JSON.stringify({
+          event,
+          apiKey: licenseKey ?? apiKey,
+          host,
+          succeeded
+        }),
+        headers: {
+          "Content-Type": "application/json"
+        },
+        signal: abortController.signal
+      });
+      clearTimeout(timeout);
+      const json = await res.json();
+      if (json.success) {
+        return {
+          billable: json.billable,
+          classification: json.classification
+        };
+      }
+      if (!res.ok) {
+        throw new Error(json.error);
+      }
+      throw new Error(`Unexpected response from server: ${JSON.stringify(json)}`);
+    } catch (err) {
+      clearTimeout(timeout);
+      const error = err;
+      const isTimeout = error.name === "AbortError";
+      const isRetryable = isNetworkError(error) || isTimeout;
+      if (!isRetryable) {
+        throw err;
+      }
+      lastError = isTimeout ? new Error("Request timed out after 10 seconds") : error;
+      if (attempt < totalAttempts) {
+        const backoffMs = exponentialBackoffMs(attempt);
+        console.log(`Failed to send usage event (attempt ${attempt}/${totalAttempts}), retrying in ${backoffMs}ms...`, err);
+        await sleep(backoffMs);
+      }
     }
-    throw err;
   }
+  throw lastError;
 };
 
 // src/send-telemetry-event.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals4 } from "remotion";
 var sendUsageEvent = async ({
   licenseKey,
   succeeded,
@@ -861,7 +966,7 @@ var sendUsageEvent = async ({
     return;
   }
   if (licenseKey === null) {
-    Internals3.Log.warn({ logLevel: "warn", tag: "web-renderer" }, `Pass "licenseKey" to ${apiName}(). If you qualify for the Free License (https://remotion.dev/license), pass "free-license" instead.`);
+    Internals4.Log.warn({ logLevel: "warn", tag: "web-renderer" }, `Pass "licenseKey" to ${apiName}(). If you qualify for the Free License (https://remotion.dev/license), pass "free-license" instead.`);
   }
   await registerUsageEvent({
     licenseKey: licenseKey === "free-license" ? null : licenseKey,
@@ -1207,7 +1312,7 @@ var drawDomElement = (node) => {
 };
 
 // src/drawing/process-node.ts
-import { Internals as Internals5 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/drawing/has-transform.ts
 var hasTransformCssValue = (style) => {
@@ -2256,7 +2361,7 @@ var drawBorder = ({
 };
 
 // src/drawing/draw-box-shadow.ts
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 var parseBoxShadow = (boxShadowValue) => {
   if (!boxShadowValue || boxShadowValue === "none") {
     return [];
@@ -2321,7 +2426,7 @@ var drawBorderRadius = ({
       throw new Error("Failed to get context");
     }
     if (shadow.inset) {
-      Internals4.Log.warn({
+      Internals5.Log.warn({
         logLevel,
         tag: "@remotion/web-renderer"
       }, 'Detected "box-shadow" with "inset". This is not yet supported in @remotion/web-renderer');
@@ -2619,55 +2724,81 @@ var getBiggestBoundingClientRect = (element) => {
 
 // src/drawing/get-pretransform-rect.ts
 var MAX_SCALE_FACTOR = 100;
-function getPreTransformRect(targetRect, matrix) {
+var isScaleTooBig = (matrix) => {
   const origin = new DOMPoint(0, 0).matrixTransform(matrix);
   const unitX = new DOMPoint(1, 0).matrixTransform(matrix);
   const unitY = new DOMPoint(0, 1).matrixTransform(matrix);
   const basisX = { x: unitX.x - origin.x, y: unitX.y - origin.y };
   const basisY = { x: unitY.x - origin.x, y: unitY.y - origin.y };
-  const scaleX = Math.hypot(basisX.x, basisX.y);
-  const scaleY = Math.hypot(basisY.x, basisY.y);
-  const minScale = Math.min(scaleX, scaleY);
-  if (minScale < 1 / MAX_SCALE_FACTOR) {
-    return new DOMRect(0, 0, 0, 0);
-  }
-  const effective2D = new DOMMatrix([
-    basisX.x,
-    basisX.y,
-    basisY.x,
-    basisY.y,
-    origin.x,
-    origin.y
-  ]);
-  const inverse2D = effective2D.inverse();
-  const wasNotInvertible = isNaN(inverse2D.m11);
-  if (wasNotInvertible) {
-    return new DOMRect(0, 0, 0, 0);
+  const scaleX = 1 / Math.hypot(basisX.x, basisX.y);
+  const scaleY = 1 / Math.hypot(basisY.x, basisY.y);
+  const maxScale = Math.max(scaleX, scaleY);
+  if (maxScale > MAX_SCALE_FACTOR) {
+    return true;
+  }
+  return false;
+};
+function invertProjectivePoint(xp, yp, matrix) {
+  const A = matrix.m11 - xp * matrix.m14;
+  const B = matrix.m21 - xp * matrix.m24;
+  const C = xp * matrix.m44 - matrix.m41;
+  const D = matrix.m12 - yp * matrix.m14;
+  const E = matrix.m22 - yp * matrix.m24;
+  const F = yp * matrix.m44 - matrix.m42;
+  const det = A * E - B * D;
+  if (Math.abs(det) < 0.0000000001) {
+    return null;
+  }
+  const x = (C * E - B * F) / det;
+  const y = (A * F - C * D) / det;
+  return { x, y };
+}
+function getPreTransformRect(targetRect, matrix) {
+  if (isScaleTooBig(matrix)) {
+    return null;
   }
   const corners = [
-    new DOMPoint(targetRect.x, targetRect.y),
-    new DOMPoint(targetRect.x + targetRect.width, targetRect.y),
-    new DOMPoint(targetRect.x + targetRect.width, targetRect.y + targetRect.height),
-    new DOMPoint(targetRect.x, targetRect.y + targetRect.height)
+    { x: targetRect.x, y: targetRect.y },
+    { x: targetRect.x + targetRect.width, y: targetRect.y },
+    { x: targetRect.x + targetRect.width, y: targetRect.y + targetRect.height },
+    { x: targetRect.x, y: targetRect.y + targetRect.height }
   ];
-  const transformedCorners = corners.map((c) => c.matrixTransform(inverse2D));
-  const xs = transformedCorners.map((p) => p.x);
-  const ys = transformedCorners.map((p) => p.y);
-  return new DOMRect(Math.min(...xs), Math.min(...ys), Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
+  const invertedCorners = [];
+  for (const corner of corners) {
+    const inverted = invertProjectivePoint(corner.x, corner.y, matrix);
+    if (inverted === null) {
+      return null;
+    }
+    invertedCorners.push(inverted);
+  }
+  const xCoords = invertedCorners.map((p) => p.x);
+  const yCoords = invertedCorners.map((p) => p.y);
+  return new DOMRect(Math.min(...xCoords), Math.min(...yCoords), Math.max(...xCoords) - Math.min(...xCoords), Math.max(...yCoords) - Math.min(...yCoords));
 }
 
 // src/drawing/transform-in-3d.ts
 var vsSource = `
-		attribute vec2 aPosition;
-		attribute vec2 aTexCoord;
-		uniform mat4 uTransform;
-		uniform mat4 uProjection;
-		varying vec2 vTexCoord;
+    attribute vec2 aPosition;
+    attribute vec2 aTexCoord;
+    uniform mat4 uTransform;
+    uniform vec2 uResolution;
+    uniform vec2 uOffset;
+    varying vec2 vTexCoord;
 
-		void main() {
-				gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
-				vTexCoord = aTexCoord;
-		}
+    void main() {
+        vec4 pos = uTransform * vec4(aPosition, 0.0, 1.0);
+        pos.xy = pos.xy + uOffset * pos.w;
+
+        // Convert homogeneous coords to clip space
+        gl_Position = vec4(
+            (pos.x / uResolution.x) * 2.0 - pos.w,   // x
+            pos.w - (pos.y / uResolution.y) * 2.0,   // y (flipped)
+            0.0,
+            pos.w
+        );
+
+        vTexCoord = aTexCoord;
+    }
 `;
 var fsSource = `
 		precision mediump float;
@@ -2730,7 +2861,8 @@ var createHelperCanvas = ({
     aPosition: gl.getAttribLocation(program, "aPosition"),
     aTexCoord: gl.getAttribLocation(program, "aTexCoord"),
     uTransform: gl.getUniformLocation(program, "uTransform"),
-    uProjection: gl.getUniformLocation(program, "uProjection"),
+    uResolution: gl.getUniformLocation(program, "uResolution"),
+    uOffset: gl.getUniformLocation(program, "uOffset"),
     uTexture: gl.getUniformLocation(program, "uTexture")
   };
   gl.deleteShader(vertexShader);
@@ -2748,55 +2880,60 @@ var createHelperCanvas = ({
 var transformIn3d = ({
   matrix,
   sourceCanvas,
-  untransformedRect,
-  rectAfterTransforms,
+  sourceRect,
+  destRect,
   internalState
 }) => {
   const { canvas, gl, program, locations } = createHelperCanvas({
-    canvasWidth: rectAfterTransforms.width,
-    canvasHeight: rectAfterTransforms.height,
+    canvasWidth: destRect.width,
+    canvasHeight: destRect.height,
     helperCanvasState: internalState.helperCanvasState
   });
   gl.useProgram(program);
-  gl.viewport(0, 0, rectAfterTransforms.width, rectAfterTransforms.height);
+  gl.viewport(0, 0, destRect.width, destRect.height);
   gl.clearColor(0, 0, 0, 0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-  const vertexBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-  const vertices = new Float32Array([
-    untransformedRect.x,
-    untransformedRect.y,
+  const positionBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  const positions = new Float32Array([
+    sourceRect.x,
+    sourceRect.y,
+    sourceRect.x + sourceRect.width,
+    sourceRect.y,
+    sourceRect.x,
+    sourceRect.y + sourceRect.height,
+    sourceRect.x,
+    sourceRect.y + sourceRect.height,
+    sourceRect.x + sourceRect.width,
+    sourceRect.y,
+    sourceRect.x + sourceRect.width,
+    sourceRect.y + sourceRect.height
+  ]);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(locations.aPosition);
+  gl.vertexAttribPointer(locations.aPosition, 2, gl.FLOAT, false, 0, 0);
+  const texCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+  const texCoords = new Float32Array([
     0,
     0,
-    untransformedRect.x + untransformedRect.width,
-    untransformedRect.y,
     1,
     0,
-    untransformedRect.x,
-    untransformedRect.y + untransformedRect.height,
     0,
     1,
-    untransformedRect.x,
-    untransformedRect.y + untransformedRect.height,
     0,
     1,
-    untransformedRect.x + untransformedRect.width,
-    untransformedRect.y,
     1,
     0,
-    untransformedRect.x + untransformedRect.width,
-    untransformedRect.y + untransformedRect.height,
     1,
     1
   ]);
-  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-  gl.enableVertexAttribArray(locations.aPosition);
-  gl.vertexAttribPointer(locations.aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+  gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
   gl.enableVertexAttribArray(locations.aTexCoord);
-  gl.vertexAttribPointer(locations.aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+  gl.vertexAttribPointer(locations.aTexCoord, 2, gl.FLOAT, false, 0, 0);
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -2805,41 +2942,21 @@ var transformIn3d = ({
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
   const transformMatrix = matrix.toFloat32Array();
-  const zScale = 1e9;
-  const projectionMatrix = new Float32Array([
-    2 / rectAfterTransforms.width,
-    0,
-    0,
-    0,
-    0,
-    -2 / rectAfterTransforms.height,
-    0,
-    0,
-    0,
-    0,
-    -2 / zScale,
-    0,
-    -1 + 2 * -rectAfterTransforms.x / rectAfterTransforms.width,
-    1 - 2 * -rectAfterTransforms.y / rectAfterTransforms.height,
-    0,
-    1
-  ]);
   gl.uniformMatrix4fv(locations.uTransform, false, transformMatrix);
-  gl.uniformMatrix4fv(locations.uProjection, false, projectionMatrix);
+  gl.uniform2f(locations.uResolution, destRect.width, destRect.height);
+  gl.uniform2f(locations.uOffset, -destRect.x, -destRect.y);
   gl.uniform1i(locations.uTexture, 0);
   gl.drawArrays(gl.TRIANGLES, 0, 6);
   gl.disableVertexAttribArray(locations.aPosition);
   gl.disableVertexAttribArray(locations.aTexCoord);
   gl.deleteTexture(texture);
-  gl.deleteBuffer(vertexBuffer);
+  gl.deleteBuffer(positionBuffer);
+  gl.deleteBuffer(texCoordBuffer);
   gl.bindTexture(gl.TEXTURE_2D, null);
   gl.bindBuffer(gl.ARRAY_BUFFER, null);
   gl.disable(gl.BLEND);
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-  return {
-    canvas,
-    rect: rectAfterTransforms
-  };
+  return canvas;
 };
 
 // src/drawing/handle-3d-transform.ts
@@ -2850,6 +2967,9 @@ var getPrecomposeRectFor3DTransform = ({
 }) => {
   const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
   const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
+  if (!biggestPossiblePretransformRect) {
+    return null;
+  }
   const preTransformRect = getNarrowerRect({
     firstRect: unclampedBiggestBoundingClientRect,
     secondRect: biggestPossiblePretransformRect
@@ -2858,21 +2978,21 @@ var getPrecomposeRectFor3DTransform = ({
 };
 var handle3dTransform = ({
   matrix,
-  precomposeRect,
+  sourceRect,
   tempCanvas,
   rectAfterTransforms,
   internalState
 }) => {
-  const { canvas: transformed, rect: transformedRect } = transformIn3d({
-    untransformedRect: precomposeRect,
+  if (rectAfterTransforms.width <= 0 || rectAfterTransforms.height <= 0) {
+    return null;
+  }
+  const transformed = transformIn3d({
+    sourceRect,
     matrix,
     sourceCanvas: tempCanvas,
-    rectAfterTransforms,
+    destRect: rectAfterTransforms,
     internalState
   });
-  if (transformedRect.width <= 0 || transformedRect.height <= 0) {
-    return null;
-  }
   return transformed;
 };
 
@@ -2973,20 +3093,21 @@ var processNode = async ({
       const start = Date.now();
       let precomposeRect = null;
       if (precompositing.needsMaskImage) {
-        precomposeRect = getWiderRectAndExpand({
-          firstRect: precomposeRect,
-          secondRect: getPrecomposeRectForMask(element)
-        });
+        precomposeRect = roundToExpandRect(getPrecomposeRectForMask(element));
       }
       if (precompositing.needs3DTransformViaWebGL) {
-        precomposeRect = getWiderRectAndExpand({
-          firstRect: precomposeRect,
-          secondRect: getPrecomposeRectFor3DTransform({
-            element,
-            parentRect,
-            matrix: totalMatrix
-          })
+        const tentativePrecomposeRect = getPrecomposeRectFor3DTransform({
+          element,
+          parentRect,
+          matrix: totalMatrix
         });
+        if (!tentativePrecomposeRect) {
+          return { type: "continue", cleanupAfterChildren: null };
+        }
+        precomposeRect = roundToExpandRect(getWiderRectAndExpand({
+          firstRect: precomposeRect,
+          secondRect: tentativePrecomposeRect
+        }));
       }
       if (!precomposeRect) {
         throw new Error("Precompose rect not found");
@@ -3019,7 +3140,7 @@ var processNode = async ({
       if (precompositing.needs3DTransformViaWebGL) {
         const t = handle3dTransform({
           matrix: totalMatrix,
-          precomposeRect,
+          sourceRect: precomposeRect,
           tempCanvas: drawable,
           rectAfterTransforms,
           internalState
@@ -3033,7 +3154,7 @@ var processNode = async ({
         context.setTransform(new DOMMatrix);
         context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
         context.setTransform(previousTransform);
-        Internals5.Log.trace({
+        Internals6.Log.trace({
           logLevel,
           tag: "@remotion/web-renderer"
         }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms - helper canvas: ${drawable.width}x${drawable.height}`);
@@ -3065,7 +3186,7 @@ var processNode = async ({
 };
 
 // src/drawing/text/draw-text.ts
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/drawing/text/apply-text-transform.ts
 var applyTextTransform = (text, transform) => {
@@ -3238,7 +3359,7 @@ var drawText = ({
     } = computedStyle;
     const isVertical = writingMode !== "horizontal-tb";
     if (isVertical) {
-      Internals6.Log.warn({
+      Internals7.Log.warn({
         logLevel,
         tag: "@remotion/web-renderer"
       }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
@@ -3546,7 +3667,8 @@ var waitForReady = ({
   scope,
   signal,
   apiName,
-  internalState
+  internalState,
+  keepalive
 }) => {
   const start = performance.now();
   const { promise, resolve, reject } = withResolvers();
@@ -3578,9 +3700,16 @@ var waitForReady = ({
       reject(new Error(Object.values(scope.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
       return;
     }
-    requestAnimationFrame(check);
+    scheduleNextCheck();
+  };
+  const scheduleNextCheck = () => {
+    const rafTick = new Promise((res) => {
+      requestAnimationFrame(() => res());
+    });
+    const backgroundSafeTick = keepalive ? Promise.race([rafTick, keepalive.waitForTick()]) : rafTick;
+    backgroundSafeTick.then(check);
   };
-  requestAnimationFrame(check);
+  scheduleNextCheck();
   return promise;
 };
 
@@ -3671,11 +3800,11 @@ var internalRenderMediaOnWeb = async ({
         if (issue.severity === "error") {
           return Promise.reject(new Error(issue.message));
         }
-        Internals7.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, issue.message);
+        Internals8.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, issue.message);
       }
       finalAudioCodec = audioResult.codec;
     }
-    const resolved = await Internals7.resolveVideoConfig({
+    const resolved = await Internals8.resolveVideoConfig({
       calculateMetadata: composition.calculateMetadata ?? null,
       signal: signal ?? new AbortController().signal,
       defaultProps: composition.defaultProps ?? {},
@@ -3710,6 +3839,10 @@ var internalRenderMediaOnWeb = async ({
     }), 0);
     const { delayRenderScope, div, timeUpdater, collectAssets } = scaffold;
     const internalState = __using(__stack2, makeInternalState(), 0);
+    const keepalive = __using(__stack2, createBackgroundKeepalive({
+      fps: resolved.fps,
+      logLevel
+    }), 0);
     const artifactsHandler = handleArtifacts();
     const webFsTarget = outputTarget === "web-fs" ? await createWebFsTarget() : null;
     const target = webFsTarget ? new StreamTarget(webFsTarget.stream) : new BufferTarget;
@@ -3728,7 +3861,8 @@ var internalRenderMediaOnWeb = async ({
           scope: delayRenderScope,
           signal,
           apiName: "renderMediaOnWeb",
-          internalState
+          internalState,
+          keepalive
         });
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
@@ -3770,6 +3904,7 @@ var internalRenderMediaOnWeb = async ({
             scope: delayRenderScope,
             signal,
             apiName: "renderMediaOnWeb",
+            keepalive,
             internalState
           });
           if (signal?.aborted) {
@@ -3838,7 +3973,7 @@ var internalRenderMediaOnWeb = async ({
         videoSampleSource.videoSampleSource.close();
         audioSampleSource?.audioSampleSource.close();
         await outputWithCleanup.output.finalize();
-        Internals7.Log.verbose({ logLevel, tag: "web-renderer" }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms, audioMixing=${internalState.getAudioMixingTime().toFixed(2)}ms`);
+        Internals8.Log.verbose({ logLevel, tag: "web-renderer" }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms, audioMixing=${internalState.getAudioMixingTime().toFixed(2)}ms`);
         if (webFsTarget) {
           sendUsageEvent({
             licenseKey: licenseKey ?? null,
@@ -3882,7 +4017,7 @@ var internalRenderMediaOnWeb = async ({
           licenseKey: licenseKey ?? null,
           apiName: "renderMediaOnWeb"
         }).catch((err2) => {
-          Internals7.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+          Internals8.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
         });
       }
       throw err;
@@ -3923,7 +4058,7 @@ var renderMediaOnWeb = (options) => {
 };
 // src/render-still-on-web.tsx
 import {
-  Internals as Internals8
+  Internals as Internals9
 } from "remotion";
 async function internalRenderStillOnWeb({
   frame,
@@ -3940,7 +4075,7 @@ async function internalRenderStillOnWeb({
 }) {
   let __stack = [];
   try {
-    const resolved = await Internals8.resolveVideoConfig({
+    const resolved = await Internals9.resolveVideoConfig({
       calculateMetadata: composition.calculateMetadata ?? null,
       signal: signal ?? new AbortController().signal,
       defaultProps: composition.defaultProps ?? {},
@@ -3984,7 +4119,8 @@ async function internalRenderStillOnWeb({
         scope: delayRenderScope,
         signal,
         apiName: "renderStillOnWeb",
-        internalState: null
+        internalState: null,
+        keepalive: null
       });
       if (signal?.aborted) {
         throw new Error("renderStillOnWeb() was cancelled");
@@ -4014,7 +4150,7 @@ async function internalRenderStillOnWeb({
           licenseKey: licenseKey ?? null,
           apiName: "renderStillOnWeb"
         }).catch((err2) => {
-          Internals8.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+          Internals9.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
         });
       }
       throw err;

package/dist/internal-state.d.ts

@@ -6,7 +6,8 @@ type HelperCanvas = {
         aPosition: number;
         aTexCoord: number;
         uTransform: WebGLUniformLocation | null;
-        uProjection: WebGLUniformLocation | null;
+        uResolution: WebGLUniformLocation | null;
+        uOffset: WebGLUniformLocation | null;
         uTexture: WebGLUniformLocation | null;
     };
     cleanup: () => void;

package/dist/wait-for-ready.d.ts

@@ -1,5 +1,6 @@
 import type { DelayRenderScope } from 'remotion';
-export declare const waitForReady: ({ timeoutInMilliseconds, scope, signal, apiName, internalState, }: {
+import type { BackgroundKeepalive } from './background-keepalive';
+export declare const waitForReady: ({ timeoutInMilliseconds, scope, signal, apiName, internalState, keepalive, }: {
     timeoutInMilliseconds: number;
     scope: DelayRenderScope;
     signal: AbortSignal | null;
@@ -22,4 +23,5 @@ export declare const waitForReady: ({ timeoutInMilliseconds, scope, signal, apiN
         getAudioMixingTime: () => number;
         addAudioMixingTime: (time: number) => void;
     } | null;
+    keepalive: BackgroundKeepalive | null;
 }) => Promise<void>;

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.403",
+	"version": "4.0.404",
 	"main": "dist/index.js",
 	"type": "module",
 	"sideEffects": false,
@@ -18,14 +18,14 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.403",
-		"remotion": "4.0.403",
+		"@remotion/licensing": "4.0.404",
+		"remotion": "4.0.404",
 		"mediabunny": "1.27.3"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.403",
-		"@remotion/player": "4.0.403",
-		"@remotion/media": "4.0.403",
+		"@remotion/eslint-config-internal": "4.0.404",
+		"@remotion/player": "4.0.404",
+		"@remotion/media": "4.0.404",
 		"@typescript/native-preview": "7.0.0-dev.20260105.1",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",