@remotion/web-renderer 4.0.396 → 4.0.397

package/dist/compose.js

@@ -2,7 +2,7 @@ import { drawDomElement } from './drawing/draw-dom-element';
 import { processNode } from './drawing/process-node';
 import { handleTextNode } from './drawing/text/handle-text-node';
 import { skipToNextNonDescendant } from './walk-tree';
-const walkOverNode = ({ node, context, logLevel, parentRect, internalState, }) => {
+const walkOverNode = ({ node, context, logLevel, parentRect, internalState, rootElement, }) => {
     if (node instanceof HTMLElement || node instanceof SVGElement) {
         return processNode({
             element: node,
@@ -11,6 +11,7 @@ const walkOverNode = ({ node, context, logLevel, parentRect, internalState, }) =
             logLevel,
             parentRect,
             internalState,
+            rootElement,
         });
     }
     if (node instanceof Text) {
@@ -20,6 +21,7 @@ const walkOverNode = ({ node, context, logLevel, parentRect, internalState, }) =
             logLevel,
             parentRect,
             internalState,
+            rootElement,
         });
     }
     throw new Error('Unknown node type');
@@ -58,6 +60,7 @@ export const compose = async ({ element, context, logLevel, parentRect, internal
             logLevel,
             parentRect,
             internalState,
+            rootElement: element,
         });
         if (val.type === 'skip-children') {
             if (!skipToNextNonDescendant(treeWalker)) {
@@ -65,10 +68,13 @@ export const compose = async ({ element, context, logLevel, parentRect, internal
             }
         }
         else {
-            cleanupAfterChildren.push({
-                element: treeWalker.currentNode,
-                cleanupFn: val.cleanupAfterChildren,
-            });
+            if (val.cleanupAfterChildren) {
+                // Last registered must be cleaned up first
+                cleanupAfterChildren.unshift({
+                    element: treeWalker.currentNode,
+                    cleanupFn: val.cleanupAfterChildren,
+                });
+            }
             if (!treeWalker.nextNode()) {
                 break;
             }

package/dist/create-scaffold.js

@@ -10,17 +10,23 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
         throw new Error('@remotion/web-renderer requires React 18 or higher');
     }
     const div = document.createElement('div');
-    // Match same behavior as renderEntry.tsx
+    // Match same behavior as in portal-node.ts
+    div.style.position = 'fixed';
     div.style.display = 'flex';
+    div.style.flexDirection = 'column';
     div.style.backgroundColor = 'transparent';
-    div.style.position = 'fixed';
     div.style.width = `${width}px`;
     div.style.height = `${height}px`;
     div.style.zIndex = '-9999';
     div.style.top = '0';
-    div.style.visibility = 'hidden';
     div.style.left = '0';
+    div.style.right = '0';
+    div.style.bottom = '0';
+    div.style.visibility = 'hidden';
     div.style.pointerEvents = 'none';
+    const scaffoldClassName = `remotion-scaffold-${Math.random().toString(36).substring(2, 15)}`;
+    div.className = scaffoldClassName;
+    const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, 'white'));
     document.body.appendChild(div);
     const { promise, resolve, reject } = withResolvers();
     // TODO: This might not work in React 18
@@ -90,6 +96,7 @@ export async function createScaffold({ width, height, delayRenderTimeoutInMillis
         cleanupScaffold: () => {
             root.unmount();
             div.remove();
+            cleanupCSS();
         },
         timeUpdater,
         collectAssets,

package/dist/drawing/border-radius.js

@@ -1,3 +1,4 @@
+import { drawRoundedRectPath } from './draw-rounded';
 function parseValue({ value, reference, }) {
     value = value.trim();
     if (value.endsWith('%')) {
@@ -114,38 +115,14 @@ export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero
         return () => { };
     }
     ctx.save();
-    ctx.beginPath();
-    // Start at top-left corner, after the horizontal radius
-    ctx.moveTo(rect.left + borderRadius.topLeft.horizontal, rect.top);
-    // Top edge to top-right corner
-    ctx.lineTo(rect.left + rect.width - borderRadius.topRight.horizontal, rect.top);
-    // Top-right corner (elliptical arc)
-    if (borderRadius.topRight.horizontal > 0 ||
-        borderRadius.topRight.vertical > 0) {
-        ctx.ellipse(rect.left + rect.width - borderRadius.topRight.horizontal, rect.top + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
-    }
-    // Right edge to bottom-right corner
-    ctx.lineTo(rect.left + rect.width, rect.top + rect.height - borderRadius.bottomRight.vertical);
-    // Bottom-right corner (elliptical arc)
-    if (borderRadius.bottomRight.horizontal > 0 ||
-        borderRadius.bottomRight.vertical > 0) {
-        ctx.ellipse(rect.left + rect.width - borderRadius.bottomRight.horizontal, rect.top + rect.height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
-    }
-    // Bottom edge to bottom-left corner
-    ctx.lineTo(rect.left + borderRadius.bottomLeft.horizontal, rect.top + rect.height);
-    // Bottom-left corner (elliptical arc)
-    if (borderRadius.bottomLeft.horizontal > 0 ||
-        borderRadius.bottomLeft.vertical > 0) {
-        ctx.ellipse(rect.left + borderRadius.bottomLeft.horizontal, rect.top + rect.height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
-    }
-    // Left edge to top-left corner
-    ctx.lineTo(rect.left, rect.top + borderRadius.topLeft.vertical);
-    // Top-left corner (elliptical arc)
-    if (borderRadius.topLeft.horizontal > 0 ||
-        borderRadius.topLeft.vertical > 0) {
-        ctx.ellipse(rect.left + borderRadius.topLeft.horizontal, rect.top + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
-    }
-    ctx.closePath();
+    drawRoundedRectPath({
+        ctx,
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+        borderRadius,
+    });
     ctx.clip();
     return () => {
         ctx.restore();

package/dist/drawing/calculate-transforms.d.ts

@@ -1,7 +1,7 @@
-export declare const calculateTransforms: ({ element, offsetLeft, offsetTop, }: {
+import type { LinearGradientInfo } from './parse-linear-gradient';
+export declare const calculateTransforms: ({ element, rootElement, }: {
     element: HTMLElement | SVGElement;
-    offsetLeft: number;
-    offsetTop: number;
+    rootElement: HTMLElement | SVGElement;
 }) => {
     dimensions: DOMRect;
     totalMatrix: DOMMatrix;
@@ -12,4 +12,10 @@ export declare const calculateTransforms: ({ element, offsetLeft, offsetTop, }:
     };
     computedStyle: CSSStyleDeclaration;
     opacity: number;
+    maskImageInfo: LinearGradientInfo | null;
+    precompositing: {
+        needs3DTransformViaWebGL: boolean;
+        needsMaskImage: LinearGradientInfo | null;
+        needsPrecompositing: boolean;
+    };
 };

package/dist/drawing/calculate-transforms.js

@@ -1,4 +1,5 @@
 import { hasAnyTransformCssValue, hasTransformCssValue } from './has-transform';
+import { getMaskImageValue, parseMaskImage } from './mask-image';
 import { parseTransformOrigin } from './parse-transform-origin';
 const getInternalTransformOrigin = (transform) => {
     var _a;
@@ -10,23 +11,37 @@ const getInternalTransformOrigin = (transform) => {
     };
     return origin;
 };
-const getGlobalTransformOrigin = ({ transform, offsetLeft, offsetTop, }) => {
+const getGlobalTransformOrigin = ({ transform }) => {
     const { x: originX, y: originY } = getInternalTransformOrigin(transform);
     return {
-        x: originX + transform.boundingClientRect.left - offsetLeft,
-        y: originY + transform.boundingClientRect.top - offsetTop,
+        x: originX + transform.boundingClientRect.left,
+        y: originY + transform.boundingClientRect.top,
     };
 };
-export const calculateTransforms = ({ element, offsetLeft, offsetTop, }) => {
+export const calculateTransforms = ({ element, rootElement, }) => {
     // Compute the cumulative transform by traversing parent nodes
     let parent = element;
     const transforms = [];
     const toReset = [];
+    let opacity = 1;
     let elementComputedStyle = null;
+    let maskImageInfo = null;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
         if (parent === element) {
             elementComputedStyle = computedStyle;
+            opacity = parseFloat(computedStyle.opacity);
+            const maskImageValue = getMaskImageValue(computedStyle);
+            maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+            const originalMaskImage = parent.style.maskImage;
+            const originalWebkitMaskImage = parent.style.webkitMaskImage;
+            parent.style.maskImage = 'none';
+            parent.style.webkitMaskImage = 'none';
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.maskImage = originalMaskImage;
+                parentRef.style.webkitMaskImage = originalWebkitMaskImage;
+            });
         }
         if (hasAnyTransformCssValue(computedStyle) || parent === element) {
             const toParse = hasTransformCssValue(computedStyle)
@@ -63,6 +78,9 @@ export const calculateTransforms = ({ element, offsetLeft, offsetTop, }) => {
                 parentRef.style.rotate = rotate;
             });
         }
+        if (parent === rootElement) {
+            break;
+        }
         parent = parent.parentElement;
     }
     for (const transform of transforms) {
@@ -75,8 +93,6 @@ export const calculateTransforms = ({ element, offsetLeft, offsetTop, }) => {
         for (const matrix of transform.matrices) {
             const globalTransformOrigin = getGlobalTransformOrigin({
                 transform,
-                offsetLeft,
-                offsetTop,
             });
             const transformMatrix = new DOMMatrix()
                 .translate(globalTransformOrigin.x, globalTransformOrigin.y)
@@ -88,6 +104,8 @@ export const calculateTransforms = ({ element, offsetLeft, offsetTop, }) => {
     if (!elementComputedStyle) {
         throw new Error('Element computed style not found');
     }
+    const needs3DTransformViaWebGL = !totalMatrix.is2D;
+    const needsMaskImage = maskImageInfo !== null;
     return {
         dimensions,
         totalMatrix,
@@ -98,8 +116,12 @@ export const calculateTransforms = ({ element, offsetLeft, offsetTop, }) => {
         },
         nativeTransformOrigin,
         computedStyle: elementComputedStyle,
-        opacity: elementComputedStyle.opacity && elementComputedStyle.opacity !== ''
-            ? parseFloat(elementComputedStyle.opacity)
-            : 1,
+        opacity,
+        maskImageInfo,
+        precompositing: {
+            needs3DTransformViaWebGL,
+            needsMaskImage: maskImageInfo,
+            needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage),
+        },
     };
 };

package/dist/drawing/clamp-rect-to-parent-bounds.d.ts

@@ -2,3 +2,7 @@ export declare const getNarrowerRect: ({ firstRect, secondRect, }: {
     firstRect: DOMRect;
     secondRect: DOMRect;
 }) => DOMRect;
+export declare const getWiderRectAndExpand: ({ firstRect, secondRect, }: {
+    firstRect: DOMRect | null;
+    secondRect: DOMRect;
+}) => DOMRect;

package/dist/drawing/clamp-rect-to-parent-bounds.js

@@ -1,3 +1,4 @@
+import { roundToExpandRect } from './round-to-expand-rect';
 export const getNarrowerRect = ({ firstRect, secondRect, }) => {
     const left = Math.max(firstRect.left, secondRect.left);
     const top = Math.max(firstRect.top, secondRect.top);
@@ -5,3 +6,13 @@ export const getNarrowerRect = ({ firstRect, secondRect, }) => {
     const right = Math.min(firstRect.right, secondRect.right);
     return new DOMRect(left, top, right - left, bottom - top);
 };
+export const getWiderRectAndExpand = ({ firstRect, secondRect, }) => {
+    if (firstRect === null) {
+        return roundToExpandRect(secondRect);
+    }
+    const left = Math.min(firstRect.left, secondRect.left);
+    const top = Math.min(firstRect.top, secondRect.top);
+    const bottom = Math.max(firstRect.bottom, secondRect.bottom);
+    const right = Math.max(firstRect.right, secondRect.right);
+    return roundToExpandRect(new DOMRect(left, top, right - left, bottom - top));
+};

package/dist/drawing/do-rects-intersect.d.ts

@@ -0,0 +1 @@
+export declare function doRectsIntersect(rect1: DOMRect, rect2: DOMRect): boolean;

package/dist/drawing/do-rects-intersect.js

@@ -0,0 +1,6 @@
+export function doRectsIntersect(rect1, rect2) {
+    return !(rect1.right <= rect2.left ||
+        rect1.left >= rect2.right ||
+        rect1.bottom <= rect2.top ||
+        rect1.top >= rect2.bottom);
+}

package/dist/drawing/draw-box-shadow.d.ts

@@ -0,0 +1,18 @@
+import type { LogLevel } from 'remotion';
+import type { BorderRadiusCorners } from './border-radius';
+interface BoxShadow {
+    offsetX: number;
+    offsetY: number;
+    blurRadius: number;
+    color: string;
+    inset: boolean;
+}
+export declare const parseBoxShadow: (boxShadowValue: string) => BoxShadow[];
+export declare const setBoxShadow: ({ ctx, rect, borderRadius, computedStyle, logLevel, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    borderRadius: BorderRadiusCorners;
+    computedStyle: CSSStyleDeclaration;
+    logLevel: LogLevel;
+}) => void;
+export {};

package/dist/drawing/draw-box-shadow.js

@@ -0,0 +1,103 @@
+import { Internals } from 'remotion';
+import { drawRoundedRectPath } from './draw-rounded';
+export const parseBoxShadow = (boxShadowValue) => {
+    if (!boxShadowValue || boxShadowValue === 'none') {
+        return [];
+    }
+    const shadows = [];
+    // Split by comma, but respect rgba() colors
+    const shadowStrings = boxShadowValue.split(/,(?![^(]*\))/);
+    for (const shadowStr of shadowStrings) {
+        const trimmed = shadowStr.trim();
+        if (!trimmed || trimmed === 'none') {
+            continue;
+        }
+        const shadow = {
+            offsetX: 0,
+            offsetY: 0,
+            blurRadius: 0,
+            color: 'rgba(0, 0, 0, 0.5)',
+            inset: false,
+        };
+        // Check for inset
+        shadow.inset = /\binset\b/i.test(trimmed);
+        // Remove 'inset' keyword
+        let remaining = trimmed.replace(/\binset\b/gi, '').trim();
+        // Extract color (can be rgb(), rgba(), hsl(), hsla(), hex, or named color)
+        const colorMatch = remaining.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i);
+        if (colorMatch) {
+            shadow.color = colorMatch[0];
+            remaining = remaining.replace(colorMatch[0], '').trim();
+        }
+        // Parse remaining numeric values (offset-x offset-y blur spread)
+        const numbers = remaining.match(/[+-]?\d*\.?\d+(?:px|em|rem|%)?/gi) || [];
+        const values = numbers.map((n) => parseFloat(n) || 0);
+        if (values.length >= 2) {
+            shadow.offsetX = values[0];
+            shadow.offsetY = values[1];
+            if (values.length >= 3) {
+                shadow.blurRadius = Math.max(0, values[2]); // Blur cannot be negative
+            }
+        }
+        shadows.push(shadow);
+    }
+    return shadows;
+};
+export const setBoxShadow = ({ ctx, rect, borderRadius, computedStyle, logLevel, }) => {
+    const shadows = parseBoxShadow(computedStyle.boxShadow);
+    if (shadows.length === 0) {
+        return;
+    }
+    // Draw shadows from last to first (so first shadow appears on top)
+    for (let i = shadows.length - 1; i >= 0; i--) {
+        const shadow = shadows[i];
+        const newLeft = rect.left + Math.min(shadow.offsetX, 0) - shadow.blurRadius;
+        const newRight = rect.right + Math.max(shadow.offsetX, 0) + shadow.blurRadius;
+        const newTop = rect.top + Math.min(shadow.offsetY, 0) - shadow.blurRadius;
+        const newBottom = rect.bottom + Math.max(shadow.offsetY, 0) + shadow.blurRadius;
+        const newRect = new DOMRect(newLeft, newTop, newRight - newLeft, newBottom - newTop);
+        const leftOffset = rect.left - newLeft;
+        const topOffset = rect.top - newTop;
+        const newCanvas = new OffscreenCanvas(newRect.width, newRect.height);
+        const newCtx = newCanvas.getContext('2d');
+        if (!newCtx) {
+            throw new Error('Failed to get context');
+        }
+        if (shadow.inset) {
+            // TODO: Only warn once per render.
+            Internals.Log.warn({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, 'Detected "box-shadow" with "inset". This is not yet supported in @remotion/web-renderer');
+            continue;
+        }
+        // Apply shadow properties to canvas
+        newCtx.shadowBlur = shadow.blurRadius;
+        newCtx.shadowColor = shadow.color;
+        newCtx.shadowOffsetX = shadow.offsetX;
+        newCtx.shadowOffsetY = shadow.offsetY;
+        newCtx.fillStyle = 'black';
+        drawRoundedRectPath({
+            ctx: newCtx,
+            x: leftOffset,
+            y: topOffset,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+        });
+        newCtx.fill();
+        // Cut out the shape, leaving only shadow
+        newCtx.shadowColor = 'transparent';
+        newCtx.globalCompositeOperation = 'destination-out';
+        drawRoundedRectPath({
+            ctx: newCtx,
+            x: leftOffset,
+            y: topOffset,
+            width: rect.width,
+            height: rect.height,
+            borderRadius,
+        });
+        newCtx.fill();
+        ctx.drawImage(newCanvas, rect.left - leftOffset, rect.top - topOffset);
+    }
+};

package/dist/drawing/draw-element.d.ts

@@ -1,11 +1,14 @@
+import type { LogLevel } from 'remotion';
 import type { DrawFn } from './drawn-fn';
-export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, }: {
+export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, }: {
     rect: DOMRect;
     computedStyle: CSSStyleDeclaration;
     context: OffscreenCanvasRenderingContext2D;
     opacity: number;
     totalMatrix: DOMMatrix;
     draw: DrawFn;
+    parentRect: DOMRect;
+    logLevel: LogLevel;
 }) => Promise<{
     cleanupAfterChildren: () => void;
 }>;

package/dist/drawing/draw-element.js

@@ -1,11 +1,14 @@
 import { parseBorderRadius, setBorderRadius } from './border-radius';
 import { drawBorder } from './draw-border';
+import { setBoxShadow } from './draw-box-shadow';
 import { drawOutline } from './draw-outline';
 import { setOpacity } from './opacity';
 import { setOverflowHidden } from './overflow';
+import { createCanvasGradient, parseLinearGradient, } from './parse-linear-gradient';
 import { setTransform } from './transform';
-export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, }) => {
+export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, }) => {
     const background = computedStyle.backgroundColor;
+    const { backgroundImage } = computedStyle;
     const borderRadius = parseBorderRadius({
         borderRadius: computedStyle.borderRadius,
         width: rect.width,
@@ -14,18 +17,46 @@ export const drawElement = async ({ rect, computedStyle, context, draw, opacity,
     const finishTransform = setTransform({
         ctx: context,
         transform: totalMatrix,
+        parentRect,
     });
-    const finishBorderRadius = setBorderRadius({
+    const finishOpacity = setOpacity({
         ctx: context,
+        opacity,
+    });
+    // Draw box shadow before border radius clip and background
+    setBoxShadow({
+        ctx: context,
+        computedStyle,
         rect,
         borderRadius,
-        forceClipEvenWhenZero: false,
+        logLevel,
     });
-    const finishOpacity = setOpacity({
+    const finishBorderRadius = setBorderRadius({
         ctx: context,
-        opacity,
+        rect,
+        borderRadius,
+        forceClipEvenWhenZero: false,
     });
-    if (background &&
+    // Try to draw linear gradient first
+    let gradientDrawn = false;
+    if (backgroundImage && backgroundImage !== 'none') {
+        const gradientInfo = parseLinearGradient(backgroundImage);
+        if (gradientInfo) {
+            const gradient = createCanvasGradient({
+                ctx: context,
+                rect,
+                gradientInfo,
+            });
+            const originalFillStyle = context.fillStyle;
+            context.fillStyle = gradient;
+            context.fillRect(rect.left, rect.top, rect.width, rect.height);
+            context.fillStyle = originalFillStyle;
+            gradientDrawn = true;
+        }
+    }
+    // Fallback to solid background color if no gradient was drawn
+    if (!gradientDrawn &&
+        background &&
         background !== 'transparent' &&
         !(background.startsWith('rgba') &&
             (background.endsWith(', 0)') || background.endsWith(',0')))) {

package/dist/drawing/draw-outline.js

@@ -1,3 +1,4 @@
+import { drawRoundedRectPath } from './draw-rounded';
 export const parseOutlineWidth = (value) => {
     return parseFloat(value) || 0;
 };
@@ -28,7 +29,6 @@ export const drawOutline = ({ ctx, rect, borderRadius, computedStyle, }) => {
     const originalStrokeStyle = ctx.strokeStyle;
     const originalLineWidth = ctx.lineWidth;
     const originalLineDash = ctx.getLineDash();
-    ctx.beginPath();
     ctx.strokeStyle = outlineColor;
     ctx.lineWidth = outlineWidth;
     ctx.setLineDash(getLineDashPattern(outlineStyle, outlineWidth));
@@ -77,37 +77,14 @@ export const drawOutline = ({ ctx, rect, borderRadius, computedStyle, }) => {
                 : Math.max(0, borderRadius.bottomLeft.vertical + offset),
         },
     };
-    // Draw continuous path with border radius
-    ctx.moveTo(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY);
-    // Top edge
-    ctx.lineTo(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY);
-    // Top-right corner
-    if (adjustedBorderRadius.topRight.horizontal > 0 ||
-        adjustedBorderRadius.topRight.vertical > 0) {
-        ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
-    }
-    // Right edge
-    ctx.lineTo(outlineX + outlineW, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical);
-    // Bottom-right corner
-    if (adjustedBorderRadius.bottomRight.horizontal > 0 ||
-        adjustedBorderRadius.bottomRight.vertical > 0) {
-        ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.bottomRight.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
-    }
-    // Bottom edge
-    ctx.lineTo(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH);
-    // Bottom-left corner
-    if (adjustedBorderRadius.bottomLeft.horizontal > 0 ||
-        adjustedBorderRadius.bottomLeft.vertical > 0) {
-        ctx.ellipse(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
-    }
-    // Left edge
-    ctx.lineTo(outlineX, outlineY + adjustedBorderRadius.topLeft.vertical);
-    // Top-left corner
-    if (adjustedBorderRadius.topLeft.horizontal > 0 ||
-        adjustedBorderRadius.topLeft.vertical > 0) {
-        ctx.ellipse(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
-    }
-    ctx.closePath();
+    drawRoundedRectPath({
+        ctx,
+        x: outlineX,
+        y: outlineY,
+        width: outlineW,
+        height: outlineH,
+        borderRadius: adjustedBorderRadius,
+    });
     ctx.stroke();
     // Restore original canvas state
     ctx.strokeStyle = originalStrokeStyle;

package/dist/drawing/draw-rounded.d.ts

@@ -0,0 +1,9 @@
+import type { BorderRadiusCorners } from './border-radius';
+export declare const drawRoundedRectPath: ({ ctx, x, y, width, height, borderRadius, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: BorderRadiusCorners;
+}) => void;

package/dist/drawing/draw-rounded.js

@@ -0,0 +1,34 @@
+export const drawRoundedRectPath = ({ ctx, x, y, width, height, borderRadius, }) => {
+    ctx.beginPath();
+    // Start from top-left corner, after the radius
+    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+    // Top edge
+    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+    // Top-right corner
+    if (borderRadius.topRight.horizontal > 0 ||
+        borderRadius.topRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    }
+    // Right edge
+    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+    // Bottom-right corner
+    if (borderRadius.bottomRight.horizontal > 0 ||
+        borderRadius.bottomRight.vertical > 0) {
+        ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    }
+    // Bottom edge
+    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+    // Bottom-left corner
+    if (borderRadius.bottomLeft.horizontal > 0 ||
+        borderRadius.bottomLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    }
+    // Left edge
+    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+    // Top-left corner
+    if (borderRadius.topLeft.horizontal > 0 ||
+        borderRadius.topLeft.vertical > 0) {
+        ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
+    }
+    ctx.closePath();
+};

package/dist/drawing/get-pretransform-rect.js

@@ -16,6 +16,11 @@ export function getPreTransformRect(targetRect, matrix) {
         origin.y, // e, f (translation)
     ]);
     const inverse2D = effective2D.inverse();
+    const wasNotInvertible = isNaN(inverse2D.m11);
+    // For example, a 90 degree rotation, is not being rendered
+    if (wasNotInvertible) {
+        return new DOMRect(0, 0, 0, 0);
+    }
     // 4. Transform target rect corners using the 2D inverse
     const corners = [
         new DOMPoint(targetRect.x, targetRect.y),

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

@@ -1,10 +1,11 @@
-import type { LogLevel } from 'remotion';
-import type { InternalState } from '../internal-state';
-export declare const handle3dTransform: ({ element, matrix, parentRect, context, logLevel, internalState, }: {
+export declare const getPrecomposeRectFor3DTransform: ({ element, parentRect, matrix, }: {
     element: HTMLElement | SVGElement;
-    matrix: DOMMatrix;
     parentRect: DOMRect;
-    context: OffscreenCanvasRenderingContext2D;
-    logLevel: LogLevel;
-    internalState: InternalState;
-}) => Promise<void>;
+    matrix: DOMMatrix;
+}) => DOMRect;
+export declare const handle3dTransform: ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, }: {
+    matrix: DOMMatrix;
+    precomposeRect: DOMRect;
+    tempCanvas: OffscreenCanvas;
+    rectAfterTransforms: DOMRect;
+}) => readonly [OffscreenCanvas, () => void] | null;