@remotion/web-renderer 4.0.396 → 4.0.397

package/dist/esm/index.mjs

@@ -6,7 +6,7 @@ import {
   StreamTarget,
   VideoSampleSource
 } from "mediabunny";
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/add-sample.ts
 import { AudioSample, VideoSample } from "mediabunny";
@@ -231,16 +231,22 @@ async function createScaffold({
     throw new Error("@remotion/web-renderer requires React 18 or higher");
   }
   const div = document.createElement("div");
+  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 = Internals2.CSSUtils.injectCSS(Internals2.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   document.body.appendChild(div);
   const { promise, resolve, reject } = withResolvers();
   const root = ReactDOM.createRoot(div, {
@@ -336,6 +342,7 @@ async function createScaffold({
     cleanupScaffold: () => {
       root.unmount();
       div.remove();
+      cleanupCSS();
     },
     timeUpdater,
     collectAssets
@@ -384,17 +391,17 @@ var getDefaultAudioEncodingConfig = async () => {
 
 // src/internal-state.ts
 var makeInternalState = () => {
-  let drawn3dPixels = 0;
-  let drawn3dTextures = 0;
+  let drawnPrecomposedPixels = 0;
+  let precomposedTextures = 0;
   return {
-    getDrawn3dPixels: () => drawn3dPixels,
-    getDrawn3dTextures: () => drawn3dTextures,
-    add3DTransform: ({
+    getDrawn3dPixels: () => drawnPrecomposedPixels,
+    getPrecomposedTiles: () => precomposedTextures,
+    addPrecompose: ({
       canvasWidth,
       canvasHeight
     }) => {
-      drawn3dPixels += canvasWidth * canvasHeight;
-      drawn3dTextures++;
+      drawnPrecomposedPixels += canvasWidth * canvasHeight;
+      precomposedTextures++;
     }
   };
 };
@@ -600,6 +607,9 @@ var drawDomElement = (node) => {
   return domDrawFn;
 };
 
+// src/drawing/process-node.ts
+import { Internals as Internals5 } from "remotion";
+
 // src/drawing/has-transform.ts
 var hasTransformCssValue = (style) => {
   return style.transform !== "none" && style.transform !== "";
@@ -614,6 +624,239 @@ var hasAnyTransformCssValue = (style) => {
   return hasTransformCssValue(style) || hasRotateCssValue(style) || hasScaleCssValue(style);
 };
 
+// src/drawing/parse-linear-gradient.ts
+import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
+var isValidColor = (color) => {
+  try {
+    const result = NoReactInternals2.processColor(color);
+    return result !== null && result !== undefined;
+  } catch {
+    return false;
+  }
+};
+var parseDirection = (directionStr) => {
+  const trimmed = directionStr.trim().toLowerCase();
+  if (trimmed.startsWith("to ")) {
+    const direction = trimmed.substring(3).trim();
+    switch (direction) {
+      case "top":
+        return 0;
+      case "right":
+        return 90;
+      case "bottom":
+        return 180;
+      case "left":
+        return 270;
+      case "top right":
+      case "right top":
+        return 45;
+      case "bottom right":
+      case "right bottom":
+        return 135;
+      case "bottom left":
+      case "left bottom":
+        return 225;
+      case "top left":
+      case "left top":
+        return 315;
+      default:
+        return 180;
+    }
+  }
+  const angleMatch = trimmed.match(/^(-?\d+\.?\d*)(deg|rad|grad|turn)$/);
+  if (angleMatch) {
+    const value = parseFloat(angleMatch[1]);
+    const unit = angleMatch[2];
+    switch (unit) {
+      case "deg":
+        return value;
+      case "rad":
+        return value * 180 / Math.PI;
+      case "grad":
+        return value * 360 / 400;
+      case "turn":
+        return value * 360;
+      default:
+        return value;
+    }
+  }
+  return 180;
+};
+var parseColorStops = (colorStopsStr) => {
+  const parts = colorStopsStr.split(/,(?![^(]*\))/);
+  const stops = [];
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (!trimmed)
+      continue;
+    const colorMatch = trimmed.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i);
+    if (!colorMatch) {
+      continue;
+    }
+    const colorStr = colorMatch[0];
+    if (!isValidColor(colorStr)) {
+      continue;
+    }
+    const remaining = trimmed.substring(colorMatch.index + colorStr.length).trim();
+    const normalizedColor = colorStr;
+    let position = null;
+    if (remaining) {
+      const posMatch = remaining.match(/(-?\d+\.?\d*)(%|px)?/);
+      if (posMatch) {
+        const value = parseFloat(posMatch[1]);
+        const unit = posMatch[2];
+        if (unit === "%") {
+          position = value / 100;
+        } else if (unit === "px") {
+          position = null;
+        } else {
+          position = value / 100;
+        }
+      }
+    }
+    stops.push({
+      color: normalizedColor,
+      position: position !== null ? position : -1
+    });
+  }
+  if (stops.length === 0) {
+    return null;
+  }
+  let lastExplicitIndex = -1;
+  let lastExplicitPosition = 0;
+  for (let i = 0;i < stops.length; i++) {
+    if (stops[i].position !== -1) {
+      if (lastExplicitIndex >= 0) {
+        const numImplicit = i - lastExplicitIndex - 1;
+        if (numImplicit > 0) {
+          const step = (stops[i].position - lastExplicitPosition) / (numImplicit + 1);
+          for (let j = lastExplicitIndex + 1;j < i; j++) {
+            stops[j].position = lastExplicitPosition + step * (j - lastExplicitIndex);
+          }
+        }
+      } else {
+        const numImplicit = i;
+        if (numImplicit > 0) {
+          const step = stops[i].position / (numImplicit + 1);
+          for (let j = 0;j < i; j++) {
+            stops[j].position = step * (j + 1);
+          }
+        }
+      }
+      lastExplicitIndex = i;
+      lastExplicitPosition = stops[i].position;
+    }
+  }
+  if (stops.every((s) => s.position === -1)) {
+    if (stops.length === 1) {
+      stops[0].position = 0.5;
+    } else {
+      for (let i = 0;i < stops.length; i++) {
+        stops[i].position = i / (stops.length - 1);
+      }
+    }
+  } else if (lastExplicitIndex < stops.length - 1) {
+    const numImplicit = stops.length - 1 - lastExplicitIndex;
+    const step = (1 - lastExplicitPosition) / (numImplicit + 1);
+    for (let i = lastExplicitIndex + 1;i < stops.length; i++) {
+      stops[i].position = lastExplicitPosition + step * (i - lastExplicitIndex);
+    }
+  }
+  for (const stop of stops) {
+    stop.position = Math.max(0, Math.min(1, stop.position));
+  }
+  return stops;
+};
+var extractGradientContent = (backgroundImage) => {
+  const prefix = "linear-gradient(";
+  const startIndex = backgroundImage.toLowerCase().indexOf(prefix);
+  if (startIndex === -1) {
+    return null;
+  }
+  let depth = 0;
+  const contentStart = startIndex + prefix.length;
+  for (let i = contentStart;i < backgroundImage.length; i++) {
+    const char = backgroundImage[i];
+    if (char === "(") {
+      depth++;
+    } else if (char === ")") {
+      if (depth === 0) {
+        return backgroundImage.substring(contentStart, i).trim();
+      }
+      depth--;
+    }
+  }
+  return null;
+};
+var parseLinearGradient = (backgroundImage) => {
+  if (!backgroundImage || backgroundImage === "none") {
+    return null;
+  }
+  const content = extractGradientContent(backgroundImage);
+  if (!content) {
+    return null;
+  }
+  const parts = content.split(/,(?![^(]*\))/);
+  let angle = 180;
+  let colorStopsStart = 0;
+  if (parts.length > 0) {
+    const firstPart = parts[0].trim();
+    const isDirection = firstPart.startsWith("to ") || /^-?\d+\.?\d*(deg|rad|grad|turn)$/.test(firstPart);
+    if (isDirection) {
+      angle = parseDirection(firstPart);
+      colorStopsStart = 1;
+    }
+  }
+  const colorStopsStr = parts.slice(colorStopsStart).join(",");
+  const colorStops = parseColorStops(colorStopsStr);
+  if (!colorStops || colorStops.length === 0) {
+    return null;
+  }
+  return {
+    angle,
+    colorStops
+  };
+};
+var createCanvasGradient = ({
+  ctx,
+  rect,
+  gradientInfo
+}) => {
+  const angleRad = (gradientInfo.angle - 90) * Math.PI / 180;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const cos = Math.cos(angleRad);
+  const sin = Math.sin(angleRad);
+  const halfWidth = rect.width / 2;
+  const halfHeight = rect.height / 2;
+  let length = Math.abs(cos) * halfWidth + Math.abs(sin) * halfHeight;
+  if (!Number.isFinite(length) || length === 0) {
+    length = Math.sqrt(halfWidth ** 2 + halfHeight ** 2);
+  }
+  const x0 = centerX - cos * length;
+  const y0 = centerY - sin * length;
+  const x1 = centerX + cos * length;
+  const y1 = centerY + sin * length;
+  const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+  for (const stop of gradientInfo.colorStops) {
+    gradient.addColorStop(stop.position, stop.color);
+  }
+  return gradient;
+};
+
+// src/drawing/mask-image.ts
+var getMaskImageValue = (computedStyle) => {
+  const { maskImage, webkitMaskImage } = computedStyle;
+  const value = maskImage || webkitMaskImage;
+  if (!value || value === "none") {
+    return null;
+  }
+  return value;
+};
+var parseMaskImage = (maskImageValue) => {
+  return parseLinearGradient(maskImageValue);
+};
+
 // src/drawing/parse-transform-origin.ts
 var parseTransformOrigin = (transformOrigin) => {
   if (transformOrigin.trim() === "") {
@@ -633,30 +876,39 @@ var getInternalTransformOrigin = (transform) => {
   };
   return origin;
 };
-var getGlobalTransformOrigin = ({
-  transform,
-  offsetLeft,
-  offsetTop
-}) => {
+var 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
   };
 };
 var calculateTransforms = ({
   element,
-  offsetLeft,
-  offsetTop
+  rootElement
 }) => {
   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) ? computedStyle.transform : undefined;
@@ -686,6 +938,9 @@ var calculateTransforms = ({
         parentRef.style.rotate = rotate;
       });
     }
+    if (parent === rootElement) {
+      break;
+    }
     parent = parent.parentElement;
   }
   for (const transform of transforms) {
@@ -697,9 +952,7 @@ var calculateTransforms = ({
   for (const transform of transforms.slice().reverse()) {
     for (const matrix of transform.matrices) {
       const globalTransformOrigin = getGlobalTransformOrigin({
-        transform,
-        offsetLeft,
-        offsetTop
+        transform
       });
       const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
       totalMatrix.multiplySelf(transformMatrix);
@@ -708,6 +961,8 @@ var calculateTransforms = ({
   if (!elementComputedStyle) {
     throw new Error("Element computed style not found");
   }
+  const needs3DTransformViaWebGL = !totalMatrix.is2D;
+  const needsMaskImage = maskImageInfo !== null;
   return {
     dimensions,
     totalMatrix,
@@ -718,10 +973,85 @@ var calculateTransforms = ({
     },
     nativeTransformOrigin,
     computedStyle: elementComputedStyle,
-    opacity: elementComputedStyle.opacity && elementComputedStyle.opacity !== "" ? parseFloat(elementComputedStyle.opacity) : 1
+    opacity,
+    maskImageInfo,
+    precompositing: {
+      needs3DTransformViaWebGL,
+      needsMaskImage: maskImageInfo,
+      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage)
+    }
   };
 };
 
+// src/drawing/round-to-expand-rect.ts
+var roundToExpandRect = (rect) => {
+  const left = Math.floor(rect.left);
+  const top = Math.floor(rect.top);
+  const right = Math.ceil(rect.right);
+  const bottom = Math.ceil(rect.bottom);
+  return new DOMRect(left, top, right - left, bottom - top);
+};
+
+// src/drawing/clamp-rect-to-parent-bounds.ts
+var getNarrowerRect = ({
+  firstRect,
+  secondRect
+}) => {
+  const left = Math.max(firstRect.left, secondRect.left);
+  const top = Math.max(firstRect.top, secondRect.top);
+  const bottom = Math.min(firstRect.bottom, secondRect.bottom);
+  const right = Math.min(firstRect.right, secondRect.right);
+  return new DOMRect(left, top, right - left, bottom - top);
+};
+var 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));
+};
+
+// src/drawing/do-rects-intersect.ts
+function doRectsIntersect(rect1, rect2) {
+  return !(rect1.right <= rect2.left || rect1.left >= rect2.right || rect1.bottom <= rect2.top || rect1.top >= rect2.bottom);
+}
+
+// src/drawing/draw-rounded.ts
+var drawRoundedRectPath = ({
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  borderRadius
+}) => {
+  ctx.beginPath();
+  ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
+  ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+  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);
+  }
+  ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+  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);
+  }
+  ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+  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);
+  }
+  ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+  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();
+};
+
 // src/drawing/border-radius.ts
 function parseValue({
   value,
@@ -831,25 +1161,14 @@ function setBorderRadius({
     return () => {};
   }
   ctx.save();
-  ctx.beginPath();
-  ctx.moveTo(rect.left + borderRadius.topLeft.horizontal, rect.top);
-  ctx.lineTo(rect.left + rect.width - borderRadius.topRight.horizontal, rect.top);
-  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);
-  }
-  ctx.lineTo(rect.left + rect.width, rect.top + rect.height - borderRadius.bottomRight.vertical);
-  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);
-  }
-  ctx.lineTo(rect.left + borderRadius.bottomLeft.horizontal, rect.top + rect.height);
-  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);
-  }
-  ctx.lineTo(rect.left, rect.top + borderRadius.topLeft.vertical);
-  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();
@@ -1193,6 +1512,107 @@ var drawBorder = ({
   ctx.setLineDash(originalLineDash);
 };
 
+// src/drawing/draw-box-shadow.ts
+import { Internals as Internals4 } from "remotion";
+var parseBoxShadow = (boxShadowValue) => {
+  if (!boxShadowValue || boxShadowValue === "none") {
+    return [];
+  }
+  const shadows = [];
+  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
+    };
+    shadow.inset = /\binset\b/i.test(trimmed);
+    let remaining = trimmed.replace(/\binset\b/gi, "").trim();
+    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();
+    }
+    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]);
+      }
+    }
+    shadows.push(shadow);
+  }
+  return shadows;
+};
+var setBoxShadow = ({
+  ctx,
+  rect,
+  borderRadius,
+  computedStyle,
+  logLevel
+}) => {
+  const shadows = parseBoxShadow(computedStyle.boxShadow);
+  if (shadows.length === 0) {
+    return;
+  }
+  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) {
+      Internals4.Log.warn({
+        logLevel,
+        tag: "@remotion/web-renderer"
+      }, 'Detected "box-shadow" with "inset". This is not yet supported in @remotion/web-renderer');
+      continue;
+    }
+    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();
+    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);
+  }
+};
+
 // src/drawing/draw-outline.ts
 var parseOutlineWidth = (value) => {
   return parseFloat(value) || 0;
@@ -1225,7 +1645,6 @@ var drawOutline = ({
   const originalStrokeStyle = ctx.strokeStyle;
   const originalLineWidth = ctx.lineWidth;
   const originalLineDash = ctx.getLineDash();
-  ctx.beginPath();
   ctx.strokeStyle = outlineColor;
   ctx.lineWidth = outlineWidth;
   ctx.setLineDash(getLineDashPattern2(outlineStyle, outlineWidth));
@@ -1253,24 +1672,14 @@ var drawOutline = ({
       vertical: borderRadius.bottomLeft.vertical === 0 ? 0 : Math.max(0, borderRadius.bottomLeft.vertical + offset)
     }
   };
-  ctx.moveTo(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY);
-  ctx.lineTo(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY);
-  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);
-  }
-  ctx.lineTo(outlineX + outlineW, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical);
-  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);
-  }
-  ctx.lineTo(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH);
-  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);
-  }
-  ctx.lineTo(outlineX, outlineY + adjustedBorderRadius.topLeft.vertical);
-  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();
   ctx.strokeStyle = originalStrokeStyle;
   ctx.lineWidth = originalLineWidth;
@@ -1310,9 +1719,11 @@ var setOverflowHidden = ({
 // src/drawing/transform.ts
 var setTransform = ({
   ctx,
-  transform
+  transform,
+  parentRect
 }) => {
-  ctx.setTransform(transform);
+  const offsetMatrix = new DOMMatrix().translate(-parentRect.x, -parentRect.y).multiply(transform).translate(parentRect.x, parentRect.y);
+  ctx.setTransform(offsetMatrix);
   return () => {
     ctx.setTransform(new DOMMatrix);
   };
@@ -1325,9 +1736,12 @@ var drawElement = async ({
   context,
   draw,
   opacity,
-  totalMatrix
+  totalMatrix,
+  parentRect,
+  logLevel
 }) => {
   const background = computedStyle.backgroundColor;
+  const { backgroundImage } = computedStyle;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
     width: rect.width,
@@ -1335,19 +1749,43 @@ var drawElement = async ({
   });
   const finishTransform = setTransform({
     ctx: context,
-    transform: totalMatrix
+    transform: totalMatrix,
+    parentRect
   });
-  const finishBorderRadius = setBorderRadius({
+  const finishOpacity = setOpacity({
     ctx: context,
+    opacity
+  });
+  setBoxShadow({
+    ctx: context,
+    computedStyle,
     rect,
     borderRadius,
-    forceClipEvenWhenZero: false
+    logLevel
   });
-  const finishOpacity = setOpacity({
+  const finishBorderRadius = setBorderRadius({
     ctx: context,
-    opacity
+    rect,
+    borderRadius,
+    forceClipEvenWhenZero: false
   });
-  if (background && background !== "transparent" && !(background.startsWith("rgba") && (background.endsWith(", 0)") || background.endsWith(",0")))) {
+  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;
+    }
+  }
+  if (!gradientDrawn && background && background !== "transparent" && !(background.startsWith("rgba") && (background.endsWith(", 0)") || background.endsWith(",0")))) {
     const originalFillStyle = context.fillStyle;
     context.fillStyle = background;
     context.fillRect(rect.left, rect.top, rect.width, rect.height);
@@ -1382,9 +1820,6 @@ var drawElement = async ({
   };
 };
 
-// src/drawing/handle-3d-transform.ts
-import { Internals as Internals4 } from "remotion";
-
 // src/walk-tree.ts
 function skipToNextNonDescendant(treeWalker) {
   if (treeWalker.nextSibling()) {
@@ -1410,10 +1845,23 @@ var getBiggestBoundingClientRect = (element) => {
     const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
     const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
     const rect = treeWalker.currentNode.getBoundingClientRect();
-    mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth);
-    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth);
-    mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth);
-    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth);
+    const shadows = parseBoxShadow(computedStyle.boxShadow);
+    let shadowLeft = 0;
+    let shadowRight = 0;
+    let shadowTop = 0;
+    let shadowBottom = 0;
+    for (const shadow of shadows) {
+      if (!shadow.inset) {
+        shadowLeft = Math.max(shadowLeft, Math.abs(Math.min(shadow.offsetX, 0)) + shadow.blurRadius);
+        shadowRight = Math.max(shadowRight, Math.max(shadow.offsetX, 0) + shadow.blurRadius);
+        shadowTop = Math.max(shadowTop, Math.abs(Math.min(shadow.offsetY, 0)) + shadow.blurRadius);
+        shadowBottom = Math.max(shadowBottom, Math.max(shadow.offsetY, 0) + shadow.blurRadius);
+      }
+    }
+    mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth - shadowLeft);
+    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop);
+    mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth + shadowRight);
+    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom);
     if (computedStyle.overflow === "hidden") {
       if (!skipToNextNonDescendant(treeWalker)) {
         break;
@@ -1426,18 +1874,6 @@ var getBiggestBoundingClientRect = (element) => {
   return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
 };
 
-// src/drawing/clamp-rect-to-parent-bounds.ts
-var getNarrowerRect = ({
-  firstRect,
-  secondRect
-}) => {
-  const left = Math.max(firstRect.left, secondRect.left);
-  const top = Math.max(firstRect.top, secondRect.top);
-  const bottom = Math.min(firstRect.bottom, secondRect.bottom);
-  const right = Math.min(firstRect.right, secondRect.right);
-  return new DOMRect(left, top, right - left, bottom - top);
-};
-
 // src/drawing/get-pretransform-rect.ts
 function getPreTransformRect(targetRect, matrix) {
   const origin = new DOMPoint(0, 0).matrixTransform(matrix);
@@ -1454,6 +1890,10 @@ function getPreTransformRect(targetRect, matrix) {
     origin.y
   ]);
   const inverse2D = effective2D.inverse();
+  const wasNotInvertible = isNaN(inverse2D.m11);
+  if (wasNotInvertible) {
+    return new DOMRect(0, 0, 0, 0);
+  }
   const corners = [
     new DOMPoint(targetRect.x, targetRect.y),
     new DOMPoint(targetRect.x + targetRect.width, targetRect.y),
@@ -1466,26 +1906,6 @@ function getPreTransformRect(targetRect, matrix) {
   return new DOMRect(Math.min(...xs), Math.min(...ys), Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
 }
 
-// src/drawing/transform-rect-with-matrix.ts
-function transformDOMRect({
-  rect,
-  matrix
-}) {
-  const topLeft = new DOMPointReadOnly(rect.left, rect.top);
-  const topRight = new DOMPointReadOnly(rect.right, rect.top);
-  const bottomLeft = new DOMPointReadOnly(rect.left, rect.bottom);
-  const bottomRight = new DOMPointReadOnly(rect.right, rect.bottom);
-  const transformedTopLeft = topLeft.matrixTransform(matrix);
-  const transformedTopRight = topRight.matrixTransform(matrix);
-  const transformedBottomLeft = bottomLeft.matrixTransform(matrix);
-  const transformedBottomRight = bottomRight.matrixTransform(matrix);
-  const minX = Math.min(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
-  const maxX = Math.max(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
-  const minY = Math.min(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
-  const maxY = Math.max(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
-  return new DOMRect(minX, minY, maxX - minX, maxY - minY);
-}
-
 // src/drawing/transform-in-3d.ts
 function compileShader(shaderGl, source, type) {
   const shader = shaderGl.createShader(type);
@@ -1501,24 +1921,14 @@ function compileShader(shaderGl, source, type) {
   }
   return shader;
 }
-var helperCanvas = null;
 var createHelperCanvas = ({
   canvasWidth,
   canvasHeight
 }) => {
-  if (helperCanvas && helperCanvas.canvas.width >= canvasWidth && helperCanvas.canvas.height >= canvasHeight) {
-    helperCanvas.gl.clearColor(0, 0, 0, 0);
-    helperCanvas.gl.clear(helperCanvas.gl.COLOR_BUFFER_BIT);
-    return helperCanvas;
-  }
-  if (helperCanvas) {
-    helperCanvas.gl.deleteProgram(helperCanvas.program);
-    helperCanvas.gl.deleteShader(helperCanvas.vertexShader);
-    helperCanvas.gl.deleteShader(helperCanvas.fragmentShader);
-    helperCanvas = null;
-  }
   const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
-  const gl = canvas.getContext("webgl");
+  const gl = canvas.getContext("webgl", {
+    premultipliedAlpha: true
+  });
   if (!gl) {
     throw new Error("WebGL not supported");
   }
@@ -1557,21 +1967,17 @@ var createHelperCanvas = ({
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  helperCanvas = { canvas, gl, program, vertexShader, fragmentShader };
-  return helperCanvas;
+  return { canvas, gl, program, vertexShader, fragmentShader };
 };
 var transformIn3d = ({
   matrix,
   sourceCanvas,
-  untransformedRect
+  untransformedRect,
+  rectAfterTransforms
 }) => {
-  const rectAfterTransforms = transformDOMRect({
-    rect: untransformedRect,
-    matrix
-  });
   const { canvas, gl, program } = createHelperCanvas({
-    canvasWidth: Math.ceil(rectAfterTransforms.width),
-    canvasHeight: Math.ceil(rectAfterTransforms.height)
+    canvasWidth: rectAfterTransforms.width,
+    canvasHeight: rectAfterTransforms.height
   });
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
@@ -1614,7 +2020,10 @@ var transformIn3d = ({
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
   const transformMatrix = matrix.toFloat32Array();
   const zScale = 1e9;
   const projectionMatrix = new Float32Array([
@@ -1642,19 +2051,31 @@ var transformIn3d = ({
   gl.uniformMatrix4fv(uProjection, false, projectionMatrix);
   gl.uniform1i(uTexture, 0);
   gl.drawArrays(gl.TRIANGLES, 0, 6);
+  gl.disableVertexAttribArray(aPosition);
+  gl.disableVertexAttribArray(aTexCoord);
   gl.deleteTexture(texture);
   gl.deleteBuffer(vertexBuffer);
-  return { canvas, rect: rectAfterTransforms };
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  gl.deleteTexture(texture);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  return {
+    canvas,
+    rect: rectAfterTransforms,
+    cleanup: () => {
+      const loseContext = gl.getExtension("WEBGL_lose_context");
+      if (loseContext) {
+        loseContext.loseContext();
+      }
+    }
+  };
 };
 
 // src/drawing/handle-3d-transform.ts
-var handle3dTransform = async ({
+var getPrecomposeRectFor3DTransform = ({
   element,
-  matrix,
   parentRect,
-  context,
-  logLevel,
-  internalState
+  matrix
 }) => {
   const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
   const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
@@ -1662,33 +2083,93 @@ var handle3dTransform = async ({
     firstRect: unclampedBiggestBoundingClientRect,
     secondRect: biggestPossiblePretransformRect
   });
-  const start = Date.now();
-  const tempCanvas = new OffscreenCanvas(Math.ceil(preTransformRect.width), Math.ceil(preTransformRect.height));
+  return preTransformRect;
+};
+var handle3dTransform = ({
+  matrix,
+  precomposeRect,
+  tempCanvas,
+  rectAfterTransforms
+}) => {
+  const {
+    canvas: transformed,
+    rect: transformedRect,
+    cleanup
+  } = transformIn3d({
+    untransformedRect: precomposeRect,
+    matrix,
+    sourceCanvas: tempCanvas,
+    rectAfterTransforms
+  });
+  if (transformedRect.width <= 0 || transformedRect.height <= 0) {
+    return null;
+  }
+  return [transformed, cleanup];
+};
+
+// src/drawing/handle-mask.ts
+var getPrecomposeRectForMask = (element) => {
+  const boundingRect = getBiggestBoundingClientRect(element);
+  return boundingRect;
+};
+var handleMask = ({
+  gradientInfo,
+  rect,
+  precomposeRect,
+  tempContext
+}) => {
+  const rectOffsetX = rect.left - precomposeRect.left;
+  const rectOffsetY = rect.top - precomposeRect.top;
+  const rectToFill = new DOMRect(rectOffsetX, rectOffsetY, rect.width, rect.height);
+  const gradient = createCanvasGradient({
+    ctx: tempContext,
+    rect: rectToFill,
+    gradientInfo
+  });
+  tempContext.globalCompositeOperation = "destination-in";
+  tempContext.fillStyle = gradient;
+  tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+};
+
+// src/drawing/precompose.ts
+var precomposeDOMElement = async ({
+  boundingRect,
+  element,
+  logLevel,
+  internalState
+}) => {
+  const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
+  const tempContext = tempCanvas.getContext("2d");
   await compose({
     element,
-    context: tempCanvas.getContext("2d"),
+    context: tempContext,
     logLevel,
-    parentRect: preTransformRect,
+    parentRect: boundingRect,
     internalState
   });
-  const afterCompose = Date.now();
-  const { canvas: transformed, rect: transformedRect } = transformIn3d({
-    untransformedRect: preTransformRect,
-    matrix,
-    sourceCanvas: tempCanvas
-  });
-  context.drawImage(transformed, transformedRect.x, transformedRect.y);
-  const afterDraw = Date.now();
-  Internals4.Log.trace({
-    logLevel,
-    tag: "@remotion/web-renderer"
-  }, `Transforming element in 3D - canvas size: ${transformedRect.width}x${transformedRect.height} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
-  internalState.add3DTransform({
-    canvasWidth: Math.ceil(transformedRect.width),
-    canvasHeight: Math.ceil(transformedRect.height)
-  });
+  return { tempCanvas, tempContext };
 };
 
+// src/drawing/transform-rect-with-matrix.ts
+function transformDOMRect({
+  rect,
+  matrix
+}) {
+  const topLeft = new DOMPointReadOnly(rect.left, rect.top);
+  const topRight = new DOMPointReadOnly(rect.right, rect.top);
+  const bottomLeft = new DOMPointReadOnly(rect.left, rect.bottom);
+  const bottomRight = new DOMPointReadOnly(rect.right, rect.bottom);
+  const transformedTopLeft = topLeft.matrixTransform(matrix);
+  const transformedTopRight = topRight.matrixTransform(matrix);
+  const transformedBottomLeft = bottomLeft.matrixTransform(matrix);
+  const transformedBottomRight = bottomRight.matrixTransform(matrix);
+  const minX = Math.min(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+  const maxX = Math.max(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+  const minY = Math.min(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+  const maxY = Math.max(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+  return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+}
+
 // src/drawing/process-node.ts
 var processNode = async ({
   element,
@@ -1696,48 +2177,124 @@ var processNode = async ({
   draw,
   logLevel,
   parentRect,
-  internalState
+  internalState,
+  rootElement
 }) => {
-  const transforms = calculateTransforms({
+  const {
+    totalMatrix,
+    reset,
+    dimensions,
+    opacity,
+    computedStyle,
+    precompositing
+  } = calculateTransforms({
     element,
-    offsetLeft: parentRect.x,
-    offsetTop: parentRect.y
+    rootElement
   });
-  const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
   if (opacity === 0) {
     reset();
-    return { type: "continue", cleanupAfterChildren: () => {} };
+    return { type: "skip-children" };
   }
   if (dimensions.width <= 0 || dimensions.height <= 0) {
     reset();
-    return { type: "continue", cleanupAfterChildren: () => {} };
-  }
-  if (!totalMatrix.is2D) {
-    await handle3dTransform({
+    return { type: "continue", cleanupAfterChildren: null };
+  }
+  const rect = new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height);
+  if (precompositing.needsPrecompositing) {
+    const start = Date.now();
+    let precomposeRect = null;
+    if (precompositing.needsMaskImage) {
+      precomposeRect = getWiderRectAndExpand({
+        firstRect: precomposeRect,
+        secondRect: getPrecomposeRectForMask(element)
+      });
+    }
+    if (precompositing.needs3DTransformViaWebGL) {
+      precomposeRect = getWiderRectAndExpand({
+        firstRect: precomposeRect,
+        secondRect: getPrecomposeRectFor3DTransform({
+          element,
+          parentRect,
+          matrix: totalMatrix
+        })
+      });
+    }
+    if (!precomposeRect) {
+      throw new Error("Precompose rect not found");
+    }
+    if (precomposeRect.width <= 0 || precomposeRect.height <= 0) {
+      return { type: "continue", cleanupAfterChildren: null };
+    }
+    if (!doRectsIntersect(precomposeRect, parentRect)) {
+      return { type: "continue", cleanupAfterChildren: null };
+    }
+    const { tempCanvas, tempContext } = await precomposeDOMElement({
+      boundingRect: precomposeRect,
       element,
-      matrix: totalMatrix,
-      parentRect,
-      context,
       logLevel,
       internalState
     });
+    let drawable = tempCanvas;
+    let cleanupWebGL = () => {};
+    const rectAfterTransforms = roundToExpandRect(transformDOMRect({
+      rect: precomposeRect,
+      matrix: totalMatrix
+    }));
+    if (precompositing.needsMaskImage) {
+      handleMask({
+        gradientInfo: precompositing.needsMaskImage,
+        rect,
+        precomposeRect,
+        tempContext
+      });
+    }
+    if (precompositing.needs3DTransformViaWebGL) {
+      const t = handle3dTransform({
+        matrix: totalMatrix,
+        precomposeRect,
+        tempCanvas: drawable,
+        rectAfterTransforms
+      });
+      if (t) {
+        const [transformed, cleanup] = t;
+        drawable = transformed;
+        cleanupWebGL = cleanup;
+      }
+    }
+    const previousTransform = context.getTransform();
+    if (drawable) {
+      context.setTransform(new DOMMatrix);
+      context.drawImage(drawable, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+      context.setTransform(previousTransform);
+      Internals5.Log.trace({
+        logLevel,
+        tag: "@remotion/web-renderer"
+      }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms`);
+      internalState.addPrecompose({
+        canvasWidth: precomposeRect.width,
+        canvasHeight: precomposeRect.height
+      });
+    }
     reset();
+    cleanupWebGL();
     return { type: "skip-children" };
   }
   const { cleanupAfterChildren } = await drawElement({
-    rect: new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height),
+    rect,
     computedStyle,
     context,
     draw,
     opacity,
-    totalMatrix
+    totalMatrix,
+    parentRect,
+    logLevel
   });
   reset();
   return { type: "continue", cleanupAfterChildren };
 };
 
 // src/drawing/text/draw-text.ts
-import { Internals as Internals5 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/drawing/text/apply-text-transform.ts
 var applyTextTransform = (text, transform) => {
@@ -1827,7 +2384,7 @@ function findLineBreaks(span, rtl) {
       const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes("preserve");
       lines.push({
         text: shouldCollapse ? currentLine.trim() : currentLine,
-        offsetTop: currentHeight - previousRect.height,
+        height: currentHeight - previousRect.height,
         offsetHorizontal
       });
       currentLine = wordsToAdd;
@@ -1843,7 +2400,7 @@ function findLineBreaks(span, rtl) {
     const offsetHorizontal = rtl ? lastRect.right - originalRect.right : lastRect.left - originalRect.left;
     lines.push({
       text: currentLine,
-      offsetTop: rect.height - previousRect.height,
+      height: rect.height - lines.reduce((acc, curr) => acc + curr.height, 0),
       offsetHorizontal
     });
   }
@@ -1852,7 +2409,10 @@ function findLineBreaks(span, rtl) {
 }
 
 // src/drawing/text/draw-text.ts
-var drawText = (span) => {
+var drawText = ({
+  span,
+  logLevel
+}) => {
   const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
     const {
       fontFamily,
@@ -1866,8 +2426,8 @@ var drawText = (span) => {
     } = computedStyle;
     const isVertical = writingMode !== "horizontal-tb";
     if (isVertical) {
-      Internals5.Log.warn({
-        logLevel: "warn",
+      Internals6.Log.warn({
+        logLevel,
         tag: "@remotion/web-renderer"
       }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
       return;
@@ -1887,10 +2447,14 @@ var drawText = (span) => {
     const xPosition = isRTL ? rect.right : rect.left;
     const lines = findLineBreaks(span, isRTL);
     let offsetTop = 0;
-    const { fontBoundingBoxAscent } = contextToDraw.measureText(lines[0].text);
+    const measurements = contextToDraw.measureText(lines[0].text);
+    const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+    const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
     for (const line of lines) {
-      contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + offsetTop + fontBoundingBoxAscent);
-      offsetTop += line.offsetTop;
+      const leading = line.height - fontHeight;
+      const halfLeading = leading / 2;
+      contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + halfLeading + fontBoundingBoxAscent + offsetTop);
+      offsetTop += line.height;
     }
     span.textContent = originalText;
     contextToDraw.restore();
@@ -1904,7 +2468,8 @@ var handleTextNode = async ({
   context,
   logLevel,
   parentRect,
-  internalState
+  internalState,
+  rootElement
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -1916,10 +2481,11 @@ var handleTextNode = async ({
   const value = await processNode({
     context,
     element: span,
-    draw: drawText(span),
+    draw: drawText({ span, logLevel }),
     logLevel,
     parentRect,
-    internalState
+    internalState,
+    rootElement
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -1932,7 +2498,8 @@ var walkOverNode = ({
   context,
   logLevel,
   parentRect,
-  internalState
+  internalState,
+  rootElement
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -1941,7 +2508,8 @@ var walkOverNode = ({
       draw: drawDomElement(node),
       logLevel,
       parentRect,
-      internalState
+      internalState,
+      rootElement
     });
   }
   if (node instanceof Text) {
@@ -1950,7 +2518,8 @@ var walkOverNode = ({
       context,
       logLevel,
       parentRect,
-      internalState
+      internalState,
+      rootElement
     });
   }
   throw new Error("Unknown node type");
@@ -1988,17 +2557,20 @@ var compose = async ({
       context,
       logLevel,
       parentRect,
-      internalState
+      internalState,
+      rootElement: element
     });
     if (val.type === "skip-children") {
       if (!skipToNextNonDescendant(treeWalker)) {
         break;
       }
     } else {
-      cleanupAfterChildren.push({
-        element: treeWalker.currentNode,
-        cleanupFn: val.cleanupAfterChildren
-      });
+      if (val.cleanupAfterChildren) {
+        cleanupAfterChildren.unshift({
+          element: treeWalker.currentNode,
+          cleanupFn: val.cleanupAfterChildren
+        });
+      }
       if (!treeWalker.nextNode()) {
         break;
       }
@@ -2215,7 +2787,8 @@ var internalRenderMediaOnWeb = async ({
   onArtifact,
   onFrame,
   outputTarget: userDesiredOutputTarget,
-  licenseKey
+  licenseKey,
+  muted
 }) => {
   const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
   if (outputTarget === "web-fs") {
@@ -2226,7 +2799,7 @@ var internalRenderMediaOnWeb = async ({
   if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
     return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
   }
-  const resolved = await Internals6.resolveVideoConfig({
+  const resolved = await Internals7.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -2253,7 +2826,7 @@ var internalRenderMediaOnWeb = async ({
     logLevel,
     mediaCacheSizeInBytes,
     schema: schema ?? null,
-    audioEnabled: true,
+    audioEnabled: !muted,
     videoEnabled: true,
     initialFrame: 0,
     defaultCodec: resolved.defaultCodec,
@@ -2302,15 +2875,18 @@ var internalRenderMediaOnWeb = async ({
       videoSampleSource.close();
     });
     output.addVideoTrack(videoSampleSource);
-    const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
-    if (!defaultAudioEncodingConfig) {
-      return Promise.reject(new Error("No default audio encoding config found"));
+    let audioSampleSource = null;
+    if (!muted) {
+      const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
+      if (!defaultAudioEncodingConfig) {
+        return Promise.reject(new Error("No default audio encoding config found"));
+      }
+      audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
+      cleanupFns.push(() => {
+        audioSampleSource?.close();
+      });
+      output.addAudioTrack(audioSampleSource);
     }
-    const audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
-    cleanupFns.push(() => {
-      audioSampleSource.close();
-    });
-    output.addAudioTrack(audioSampleSource);
     await output.start();
     if (signal?.aborted) {
       throw new Error("renderMediaOnWeb() was cancelled");
@@ -2356,7 +2932,7 @@ var internalRenderMediaOnWeb = async ({
       if (signal?.aborted) {
         throw new Error("renderMediaOnWeb() was cancelled");
       }
-      const audio = onlyInlineAudio({ assets, fps: resolved.fps, frame });
+      const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, frame });
       const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
       const videoFrame = new VideoFrame(imageData, {
         timestamp
@@ -2379,7 +2955,7 @@ var internalRenderMediaOnWeb = async ({
       }
       await Promise.all([
         addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
-        audio ? addAudioSample(audio, audioSampleSource) : Promise.resolve()
+        audio && audioSampleSource ? addAudioSample(audio, audioSampleSource) : Promise.resolve()
       ]);
       progress.encodedFrames++;
       throttledOnProgress?.({ ...progress });
@@ -2389,7 +2965,7 @@ var internalRenderMediaOnWeb = async ({
     }
     onProgress?.({ ...progress });
     videoSampleSource.close();
-    audioSampleSource.close();
+    audioSampleSource?.close();
     await output.finalize();
     const mimeType = getMimeType(container);
     if (webFsTarget) {
@@ -2424,7 +3000,7 @@ var internalRenderMediaOnWeb = async ({
       licenseKey: licenseKey ?? null,
       apiName: "renderMediaOnWeb"
     }).catch((err2) => {
-      Internals6.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+      Internals7.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
     });
     throw err;
   } finally {
@@ -2452,13 +3028,14 @@ var renderMediaOnWeb = (options) => {
     onArtifact: options.onArtifact ?? null,
     onFrame: options.onFrame ?? null,
     outputTarget: options.outputTarget ?? null,
-    licenseKey: options.licenseKey ?? undefined
+    licenseKey: options.licenseKey ?? undefined,
+    muted: options.muted ?? false
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };
 // src/render-still-on-web.tsx
 import {
-  Internals as Internals7
+  Internals as Internals8
 } from "remotion";
 async function internalRenderStillOnWeb({
   frame,
@@ -2473,7 +3050,7 @@ async function internalRenderStillOnWeb({
   onArtifact,
   licenseKey
 }) {
-  const resolved = await Internals7.resolveVideoConfig({
+  const resolved = await Internals8.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -2544,7 +3121,7 @@ async function internalRenderStillOnWeb({
       licenseKey: licenseKey ?? null,
       apiName: "renderStillOnWeb"
     }).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;
   } finally {