@remotion/web-renderer 4.0.405 → 4.0.407

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

@@ -50,6 +50,7 @@ type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {
     outputTarget: WebRendererOutputTarget | null;
     licenseKey: string | undefined;
     muted: boolean;
+    scale: number;
 };
 export type RenderMediaOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderMediaOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderMediaOnWebOptions<Schema, Props>) => Promise<RenderMediaOnWebResult>;

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

@@ -18,6 +18,7 @@ type OptionalRenderStillOnWebOptions<Schema extends AnyZodObject> = {
     signal: AbortSignal | null;
     onArtifact: WebRendererOnArtifact | null;
     licenseKey: string | undefined;
+    scale: number;
 };
 export type RenderStillOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderStillOnWebOptions<Schema, Props> & Partial<OptionalRenderStillOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderStillOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderStillOnWebOptions<Schema, Props>) => Promise<{

package/dist/take-screenshot.d.ts

@@ -1,8 +1,6 @@
-import type { RenderStillOnWebImageFormat } from './render-still-on-web';
-export declare const createFrame: ({ div, width, height, logLevel, internalState, }: {
-    div: HTMLDivElement;
-    width: number;
-    height: number;
+export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, }: {
+    element: HTMLElement | SVGElement;
+    scale: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     internalState: {
         getDrawn3dPixels: () => number;
@@ -22,29 +20,6 @@ export declare const createFrame: ({ div, width, height, logLevel, internalState
         getAudioMixingTime: () => number;
         addAudioMixingTime: (time: number) => void;
     };
-}) => Promise<OffscreenCanvas>;
-export declare const takeScreenshot: ({ div, width, height, imageFormat, logLevel, internalState, }: {
-    div: HTMLDivElement;
-    width: number;
-    height: number;
-    imageFormat: RenderStillOnWebImageFormat;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
-    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;
-    };
-}) => Promise<Blob>;
+    onlyBackgroundClipText: boolean;
+    cutout: DOMRect;
+}) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/tree-walker-cleanup-after-children.d.ts

@@ -1,5 +1,5 @@
 export declare const createTreeWalkerCleanupAfterChildren: (treeWalker: TreeWalker) => {
     checkCleanUpAtBeginningOfIteration: () => void;
     addCleanup: (element: Node, cleanupFn: () => void) => void;
-    cleanupInTheEndOfTheIteration: () => void;
+    [Symbol.dispose]: () => void;
 };

package/dist/validate-scale.d.ts

@@ -0,0 +1 @@
+export declare const validateScale: (scale: unknown) => void;

package/dist/{drawing/precompose-and-draw.d.ts → walk-over-node.d.ts}

@@ -1,7 +1,7 @@
-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;
+import type { ProcessNodeReturnValue } from './drawing/process-node';
+export declare const walkOverNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, }: {
+    node: Node;
+    context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     parentRect: DOMRect;
     internalState: {
@@ -11,7 +11,7 @@ export declare const precompose: ({ element, logLevel, parentRect, internalState
             canvasWidth: number;
             canvasHeight: number;
         }) => void;
-        helperCanvasState: import("../internal-state").HelperCanvasState;
+        helperCanvasState: import("./internal-state").HelperCanvasState;
         [Symbol.dispose]: () => void;
         getWaitForReadyTime: () => number;
         addWaitForReadyTime: (time: number) => void;
@@ -22,12 +22,7 @@ export declare const precompose: ({ element, logLevel, parentRect, internalState
         getAudioMixingTime: () => number;
         addAudioMixingTime: (time: number) => void;
     };
-    precompositing: Precompositing;
-    totalMatrix: DOMMatrix;
-    rect: DOMRect;
-    isIn3dRenderingContext: DOMMatrix | null;
-}) => Promise<{
-    drawable: OffscreenCanvas;
-    rectAfterTransforms: DOMRect;
-    elementsToBeRenderedIndependently: ElementAndBounds[];
-} | null>;
+    rootElement: HTMLElement | SVGElement;
+    onlyBackgroundClipText: boolean;
+    scale: number;
+}) => 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.405",
+	"version": "4.0.407",
 	"main": "dist/index.js",
 	"type": "module",
 	"sideEffects": false,
@@ -11,6 +11,7 @@
 		"formatting": "prettier --experimental-cli src --check",
 		"lint": "eslint src",
 		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts",
+		"watch": "tsgo -w",
 		"testwebrenderer": "vitest src/test --browser --run",
 		"studio": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts --public-dir=../example-videos/videos",
 		"remotion": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts --public-dir=../example-videos/videos"
@@ -18,14 +19,14 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.405",
-		"remotion": "4.0.405",
+		"@remotion/licensing": "4.0.407",
+		"remotion": "4.0.407",
 		"mediabunny": "1.27.3"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.405",
-		"@remotion/player": "4.0.405",
-		"@remotion/media": "4.0.405",
+		"@remotion/eslint-config-internal": "4.0.407",
+		"@remotion/player": "4.0.407",
+		"@remotion/media": "4.0.407",
 		"@typescript/native-preview": "7.0.0-dev.20260105.1",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",

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

@@ -1,9 +0,0 @@
-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/renoun.d.ts

@@ -1,125 +0,0 @@
-/** 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-origin.d.ts

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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/get-audio-sample-source.d.ts

@@ -1,8 +0,0 @@
-import { AudioSampleSource, type BufferTarget, type Output, type OutputFormat, type StreamTarget } from 'mediabunny';
-export declare const addAudioSampleSource: ({ muted, output, }: {
-    muted: boolean;
-    output: Output<OutputFormat, BufferTarget | StreamTarget>;
-}) => Promise<{
-    audioSampleSource: AudioSampleSource;
-    [Symbol.dispose]: () => void;
-} | null>;

package/dist/renoun.d.ts

@@ -1,119 +0,0 @@
-/** 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';
-}
-/** 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;
-    }
-}