@remotion/studio 4.0.391 → 4.0.392

package/dist/esm/{chunk-fnfxxf7g.js → chunk-02cyqxg9.js}

@@ -50299,6 +50299,106 @@ var getQualityForWebRendererQuality = (quality) => {
       throw new Error(`Unsupported quality: ${quality}`);
   }
 };
+var parseTransformOrigin = (transformOrigin) => {
+  if (transformOrigin.trim() === "") {
+    return null;
+  }
+  const [x, y] = transformOrigin.split(" ");
+  return { x: parseFloat(x), y: parseFloat(y) };
+};
+var getInternalTransformOrigin = (transform) => {
+  const centerX = transform.boundingClientRect.width / 2;
+  const centerY = transform.boundingClientRect.height / 2;
+  const origin = parseTransformOrigin(transform.transformOrigin) ?? {
+    x: centerX,
+    y: centerY
+  };
+  return origin;
+};
+var getGlobalTransformOrigin = (transform) => {
+  const { x: originX, y: originY } = getInternalTransformOrigin(transform);
+  return {
+    x: originX + transform.boundingClientRect.left,
+    y: originY + transform.boundingClientRect.top
+  };
+};
+var calculateTransforms = (element) => {
+  let parent = element;
+  const transforms = [];
+  const toReset = [];
+  let opacity = 1;
+  let elementComputedStyle = null;
+  while (parent) {
+    const computedStyle = getComputedStyle(parent);
+    const parentOpacity = computedStyle.opacity;
+    if (parentOpacity && parentOpacity !== "") {
+      opacity *= parseFloat(parentOpacity);
+    }
+    if (parent === element) {
+      elementComputedStyle = computedStyle;
+    }
+    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
+      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
+      const matrix = new DOMMatrix(toParse);
+      const { transform, scale, rotate: rotate2 } = parent.style;
+      const additionalMatrices = [];
+      if (rotate2 !== "") {
+        additionalMatrices.push(new DOMMatrix(`rotate(${rotate2})`));
+      }
+      if (scale !== "") {
+        additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+      }
+      additionalMatrices.push(matrix);
+      parent.style.transform = "none";
+      parent.style.scale = "none";
+      parent.style.rotate = "none";
+      transforms.push({
+        rect: parent,
+        transformOrigin: computedStyle.transformOrigin,
+        boundingClientRect: null,
+        matrices: additionalMatrices
+      });
+      const parentRef = parent;
+      toReset.push(() => {
+        parentRef.style.transform = transform;
+        parentRef.style.scale = scale;
+        parentRef.style.rotate = rotate2;
+      });
+    }
+    parent = parent.parentElement;
+  }
+  for (const transform of transforms) {
+    transform.boundingClientRect = transform.rect.getBoundingClientRect();
+  }
+  const dimensions = transforms[0].boundingClientRect;
+  const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
+  const totalMatrix = new DOMMatrix;
+  for (const transform of transforms.slice().reverse()) {
+    if (!transform.boundingClientRect) {
+      throw new Error("Bounding client rect not found");
+    }
+    for (const matrix of transform.matrices) {
+      const globalTransformOrigin = getGlobalTransformOrigin(transform);
+      const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+      totalMatrix.multiplySelf(transformMatrix);
+    }
+  }
+  if (!elementComputedStyle) {
+    throw new Error("Element computed style not found");
+  }
+  return {
+    dimensions,
+    totalMatrix,
+    reset: () => {
+      for (const reset of toReset) {
+        reset();
+      }
+    },
+    nativeTransformOrigin,
+    opacity,
+    computedStyle: elementComputedStyle
+  };
+};
 function parseValue({
   value,
   reference
@@ -50433,92 +50533,6 @@ function setBorderRadius({
     ctx.restore();
   };
 }
-var parseTransformOrigin = (transformOrigin) => {
-  if (transformOrigin.trim() === "") {
-    return null;
-  }
-  const [x, y] = transformOrigin.split(" ");
-  return { x: parseFloat(x), y: parseFloat(y) };
-};
-var getInternalTransformOrigin = (transform) => {
-  const centerX = transform.boundingClientRect.width / 2;
-  const centerY = transform.boundingClientRect.height / 2;
-  const origin = parseTransformOrigin(transform.transformOrigin) ?? {
-    x: centerX,
-    y: centerY
-  };
-  return origin;
-};
-var getGlobalTransformOrigin = (transform) => {
-  const { x: originX, y: originY } = getInternalTransformOrigin(transform);
-  return {
-    x: originX + transform.boundingClientRect.left,
-    y: originY + transform.boundingClientRect.top
-  };
-};
-var calculateTransforms = (element) => {
-  let parent = element;
-  const transforms = [];
-  const toReset = [];
-  let opacity = 1;
-  let elementComputedStyle = null;
-  while (parent) {
-    const computedStyle = getComputedStyle(parent);
-    const parentOpacity = computedStyle.opacity;
-    if (parentOpacity && parentOpacity !== "") {
-      opacity *= parseFloat(parentOpacity);
-    }
-    if (parent === element) {
-      elementComputedStyle = computedStyle;
-    }
-    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
-      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
-      const matrix = new DOMMatrix(toParse);
-      const { transform } = parent.style;
-      parent.style.transform = "none";
-      transforms.push({
-        matrix,
-        rect: parent,
-        transformOrigin: computedStyle.transformOrigin,
-        boundingClientRect: null
-      });
-      const parentRef = parent;
-      toReset.push(() => {
-        parentRef.style.transform = transform;
-      });
-    }
-    parent = parent.parentElement;
-  }
-  for (const transform of transforms) {
-    transform.boundingClientRect = transform.rect.getBoundingClientRect();
-  }
-  const dimensions = transforms[0].boundingClientRect;
-  const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
-  const totalMatrix = new DOMMatrix;
-  for (const transform of transforms.slice().reverse()) {
-    if (!transform.boundingClientRect) {
-      throw new Error("Bounding client rect not found");
-    }
-    const globalTransformOrigin = getGlobalTransformOrigin(transform);
-    const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(transform.matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-    totalMatrix.multiplySelf(transformMatrix);
-  }
-  if (!elementComputedStyle) {
-    throw new Error("Element computed style not found");
-  }
-  return {
-    dimensions,
-    totalMatrix,
-    reset: () => {
-      for (const reset of toReset) {
-        reset();
-      }
-    },
-    nativeTransformOrigin,
-    opacity,
-    computedStyle: elementComputedStyle
-  };
-};
 var drawBorder = ({
   ctx,
   x,
@@ -50623,20 +50637,14 @@ var setTransform = ({
     ctx.setTransform(new DOMMatrix);
   };
 };
-var drawElementToCanvas = async ({
-  element,
+var drawElement = async ({
+  dimensions,
+  computedStyle,
   context,
-  draw
+  draw,
+  opacity,
+  totalMatrix
 }) => {
-  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
-  if (opacity === 0) {
-    reset();
-    return;
-  }
-  if (dimensions.width <= 0 || dimensions.height <= 0) {
-    reset();
-    return;
-  }
   const background2 = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -50678,6 +50686,192 @@ var drawElementToCanvas = async ({
   finishOpacity();
   finishBorderRadius();
   finishTransform();
+};
+function compileShader(shaderGl, source, type) {
+  const shader = shaderGl.createShader(type);
+  if (!shader) {
+    throw new Error("Could not create shader");
+  }
+  shaderGl.shaderSource(shader, source);
+  shaderGl.compileShader(shader);
+  if (!shaderGl.getShaderParameter(shader, shaderGl.COMPILE_STATUS)) {
+    const log = shaderGl.getShaderInfoLog(shader);
+    shaderGl.deleteShader(shader);
+    throw new Error("Shader compile error: " + log);
+  }
+  return shader;
+}
+var transformIn3d = ({
+  canvasWidth,
+  canvasHeight,
+  matrix,
+  sourceCanvas,
+  offsetLeft,
+  offsetTop
+}) => {
+  const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
+  const gl = canvas.getContext("webgl");
+  if (!gl) {
+    throw new Error("WebGL not supported");
+  }
+  const vsSource = `
+        attribute vec2 aPosition;
+        attribute vec2 aTexCoord;
+        uniform mat4 uTransform;
+        uniform mat4 uProjection;
+        varying vec2 vTexCoord;
+
+        void main() {
+            gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
+            vTexCoord = aTexCoord;
+        }
+    `;
+  const fsSource = `
+        precision mediump float;
+        uniform sampler2D uTexture;
+        varying vec2 vTexCoord;
+
+        void main() {
+            gl_FragColor = texture2D(uTexture, vTexCoord);
+        }
+    `;
+  const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
+  const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error("Program link error: " + gl.getProgramInfoLog(program));
+  }
+  gl.useProgram(program);
+  const vertices = new Float32Array([
+    offsetLeft,
+    offsetTop,
+    0,
+    0,
+    canvasWidth + offsetLeft,
+    offsetTop,
+    1,
+    0,
+    offsetLeft,
+    canvasHeight + offsetTop,
+    0,
+    1,
+    offsetLeft,
+    canvasHeight + offsetTop,
+    0,
+    1,
+    canvasWidth + offsetLeft,
+    offsetTop,
+    1,
+    0,
+    canvasWidth + offsetLeft,
+    canvasHeight + offsetTop,
+    1,
+    1
+  ]);
+  const vertexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+  const aPosition = gl.getAttribLocation(program, "aPosition");
+  const aTexCoord = gl.getAttribLocation(program, "aTexCoord");
+  gl.enableVertexAttribArray(aPosition);
+  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+  gl.enableVertexAttribArray(aTexCoord);
+  gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+  const transformMatrix = matrix.toFloat32Array();
+  const zScale = 1e9;
+  const projectionMatrix = new Float32Array([
+    2 / canvasWidth,
+    0,
+    0,
+    0,
+    0,
+    -2 / canvasHeight,
+    0,
+    0,
+    0,
+    0,
+    -2 / zScale,
+    0,
+    -1,
+    1,
+    0,
+    1
+  ]);
+  const uTransform = gl.getUniformLocation(program, "uTransform");
+  const uProjection = gl.getUniformLocation(program, "uProjection");
+  const uTexture = gl.getUniformLocation(program, "uTexture");
+  gl.uniformMatrix4fv(uTransform, false, transformMatrix);
+  gl.uniformMatrix4fv(uProjection, false, projectionMatrix);
+  gl.uniform1i(uTexture, 0);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  return canvas;
+};
+var drawElementToCanvas = async ({
+  element,
+  context,
+  draw
+}) => {
+  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+  if (opacity === 0) {
+    reset();
+    return;
+  }
+  if (dimensions.width <= 0 || dimensions.height <= 0) {
+    reset();
+    return;
+  }
+  if (!totalMatrix.is2D) {
+    const offsetLeft = Math.min(dimensions.left, 0);
+    const offsetTop = Math.min(dimensions.top, 0);
+    const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
+    const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+    const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
+    const context2 = tempCanvas.getContext("2d");
+    if (!context2) {
+      throw new Error("Could not get context");
+    }
+    const adjustedDimensions = new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height);
+    await drawElement({
+      dimensions: adjustedDimensions,
+      computedStyle,
+      context: context2,
+      draw,
+      opacity,
+      totalMatrix: new DOMMatrix
+    });
+    const transformed = transformIn3d({
+      canvasWidth: tempCanvasWidth,
+      canvasHeight: tempCanvasHeight,
+      matrix: totalMatrix,
+      sourceCanvas: tempCanvas,
+      offsetLeft,
+      offsetTop
+    });
+    context.drawImage(transformed, 0, 0);
+  } else {
+    await drawElement({
+      dimensions,
+      computedStyle,
+      context,
+      draw,
+      opacity,
+      totalMatrix
+    });
+  }
   reset();
 };
 var getCollapsedText = (span) => {

package/dist/esm/internals.mjs

@@ -50318,6 +50318,106 @@ var getQualityForWebRendererQuality = (quality) => {
       throw new Error(`Unsupported quality: ${quality}`);
   }
 };
+var parseTransformOrigin = (transformOrigin) => {
+  if (transformOrigin.trim() === "") {
+    return null;
+  }
+  const [x, y] = transformOrigin.split(" ");
+  return { x: parseFloat(x), y: parseFloat(y) };
+};
+var getInternalTransformOrigin = (transform) => {
+  const centerX = transform.boundingClientRect.width / 2;
+  const centerY = transform.boundingClientRect.height / 2;
+  const origin = parseTransformOrigin(transform.transformOrigin) ?? {
+    x: centerX,
+    y: centerY
+  };
+  return origin;
+};
+var getGlobalTransformOrigin = (transform) => {
+  const { x: originX, y: originY } = getInternalTransformOrigin(transform);
+  return {
+    x: originX + transform.boundingClientRect.left,
+    y: originY + transform.boundingClientRect.top
+  };
+};
+var calculateTransforms = (element) => {
+  let parent = element;
+  const transforms = [];
+  const toReset = [];
+  let opacity = 1;
+  let elementComputedStyle = null;
+  while (parent) {
+    const computedStyle = getComputedStyle(parent);
+    const parentOpacity = computedStyle.opacity;
+    if (parentOpacity && parentOpacity !== "") {
+      opacity *= parseFloat(parentOpacity);
+    }
+    if (parent === element) {
+      elementComputedStyle = computedStyle;
+    }
+    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
+      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
+      const matrix = new DOMMatrix(toParse);
+      const { transform, scale, rotate: rotate2 } = parent.style;
+      const additionalMatrices = [];
+      if (rotate2 !== "") {
+        additionalMatrices.push(new DOMMatrix(`rotate(${rotate2})`));
+      }
+      if (scale !== "") {
+        additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+      }
+      additionalMatrices.push(matrix);
+      parent.style.transform = "none";
+      parent.style.scale = "none";
+      parent.style.rotate = "none";
+      transforms.push({
+        rect: parent,
+        transformOrigin: computedStyle.transformOrigin,
+        boundingClientRect: null,
+        matrices: additionalMatrices
+      });
+      const parentRef = parent;
+      toReset.push(() => {
+        parentRef.style.transform = transform;
+        parentRef.style.scale = scale;
+        parentRef.style.rotate = rotate2;
+      });
+    }
+    parent = parent.parentElement;
+  }
+  for (const transform of transforms) {
+    transform.boundingClientRect = transform.rect.getBoundingClientRect();
+  }
+  const dimensions = transforms[0].boundingClientRect;
+  const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
+  const totalMatrix = new DOMMatrix;
+  for (const transform of transforms.slice().reverse()) {
+    if (!transform.boundingClientRect) {
+      throw new Error("Bounding client rect not found");
+    }
+    for (const matrix of transform.matrices) {
+      const globalTransformOrigin = getGlobalTransformOrigin(transform);
+      const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+      totalMatrix.multiplySelf(transformMatrix);
+    }
+  }
+  if (!elementComputedStyle) {
+    throw new Error("Element computed style not found");
+  }
+  return {
+    dimensions,
+    totalMatrix,
+    reset: () => {
+      for (const reset of toReset) {
+        reset();
+      }
+    },
+    nativeTransformOrigin,
+    opacity,
+    computedStyle: elementComputedStyle
+  };
+};
 function parseValue({
   value,
   reference
@@ -50452,92 +50552,6 @@ function setBorderRadius({
     ctx.restore();
   };
 }
-var parseTransformOrigin = (transformOrigin) => {
-  if (transformOrigin.trim() === "") {
-    return null;
-  }
-  const [x, y] = transformOrigin.split(" ");
-  return { x: parseFloat(x), y: parseFloat(y) };
-};
-var getInternalTransformOrigin = (transform) => {
-  const centerX = transform.boundingClientRect.width / 2;
-  const centerY = transform.boundingClientRect.height / 2;
-  const origin = parseTransformOrigin(transform.transformOrigin) ?? {
-    x: centerX,
-    y: centerY
-  };
-  return origin;
-};
-var getGlobalTransformOrigin = (transform) => {
-  const { x: originX, y: originY } = getInternalTransformOrigin(transform);
-  return {
-    x: originX + transform.boundingClientRect.left,
-    y: originY + transform.boundingClientRect.top
-  };
-};
-var calculateTransforms = (element) => {
-  let parent = element;
-  const transforms = [];
-  const toReset = [];
-  let opacity = 1;
-  let elementComputedStyle = null;
-  while (parent) {
-    const computedStyle = getComputedStyle(parent);
-    const parentOpacity = computedStyle.opacity;
-    if (parentOpacity && parentOpacity !== "") {
-      opacity *= parseFloat(parentOpacity);
-    }
-    if (parent === element) {
-      elementComputedStyle = computedStyle;
-    }
-    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
-      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
-      const matrix = new DOMMatrix(toParse);
-      const { transform } = parent.style;
-      parent.style.transform = "none";
-      transforms.push({
-        matrix,
-        rect: parent,
-        transformOrigin: computedStyle.transformOrigin,
-        boundingClientRect: null
-      });
-      const parentRef = parent;
-      toReset.push(() => {
-        parentRef.style.transform = transform;
-      });
-    }
-    parent = parent.parentElement;
-  }
-  for (const transform of transforms) {
-    transform.boundingClientRect = transform.rect.getBoundingClientRect();
-  }
-  const dimensions = transforms[0].boundingClientRect;
-  const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
-  const totalMatrix = new DOMMatrix;
-  for (const transform of transforms.slice().reverse()) {
-    if (!transform.boundingClientRect) {
-      throw new Error("Bounding client rect not found");
-    }
-    const globalTransformOrigin = getGlobalTransformOrigin(transform);
-    const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(transform.matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-    totalMatrix.multiplySelf(transformMatrix);
-  }
-  if (!elementComputedStyle) {
-    throw new Error("Element computed style not found");
-  }
-  return {
-    dimensions,
-    totalMatrix,
-    reset: () => {
-      for (const reset of toReset) {
-        reset();
-      }
-    },
-    nativeTransformOrigin,
-    opacity,
-    computedStyle: elementComputedStyle
-  };
-};
 var drawBorder = ({
   ctx,
   x,
@@ -50642,20 +50656,14 @@ var setTransform = ({
     ctx.setTransform(new DOMMatrix);
   };
 };
-var drawElementToCanvas = async ({
-  element,
+var drawElement = async ({
+  dimensions,
+  computedStyle,
   context,
-  draw
+  draw,
+  opacity,
+  totalMatrix
 }) => {
-  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
-  if (opacity === 0) {
-    reset();
-    return;
-  }
-  if (dimensions.width <= 0 || dimensions.height <= 0) {
-    reset();
-    return;
-  }
   const background2 = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -50697,6 +50705,192 @@ var drawElementToCanvas = async ({
   finishOpacity();
   finishBorderRadius();
   finishTransform();
+};
+function compileShader(shaderGl, source, type) {
+  const shader = shaderGl.createShader(type);
+  if (!shader) {
+    throw new Error("Could not create shader");
+  }
+  shaderGl.shaderSource(shader, source);
+  shaderGl.compileShader(shader);
+  if (!shaderGl.getShaderParameter(shader, shaderGl.COMPILE_STATUS)) {
+    const log = shaderGl.getShaderInfoLog(shader);
+    shaderGl.deleteShader(shader);
+    throw new Error("Shader compile error: " + log);
+  }
+  return shader;
+}
+var transformIn3d = ({
+  canvasWidth,
+  canvasHeight,
+  matrix,
+  sourceCanvas,
+  offsetLeft,
+  offsetTop
+}) => {
+  const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
+  const gl = canvas.getContext("webgl");
+  if (!gl) {
+    throw new Error("WebGL not supported");
+  }
+  const vsSource = `
+        attribute vec2 aPosition;
+        attribute vec2 aTexCoord;
+        uniform mat4 uTransform;
+        uniform mat4 uProjection;
+        varying vec2 vTexCoord;
+
+        void main() {
+            gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
+            vTexCoord = aTexCoord;
+        }
+    `;
+  const fsSource = `
+        precision mediump float;
+        uniform sampler2D uTexture;
+        varying vec2 vTexCoord;
+
+        void main() {
+            gl_FragColor = texture2D(uTexture, vTexCoord);
+        }
+    `;
+  const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
+  const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error("Program link error: " + gl.getProgramInfoLog(program));
+  }
+  gl.useProgram(program);
+  const vertices = new Float32Array([
+    offsetLeft,
+    offsetTop,
+    0,
+    0,
+    canvasWidth + offsetLeft,
+    offsetTop,
+    1,
+    0,
+    offsetLeft,
+    canvasHeight + offsetTop,
+    0,
+    1,
+    offsetLeft,
+    canvasHeight + offsetTop,
+    0,
+    1,
+    canvasWidth + offsetLeft,
+    offsetTop,
+    1,
+    0,
+    canvasWidth + offsetLeft,
+    canvasHeight + offsetTop,
+    1,
+    1
+  ]);
+  const vertexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+  const aPosition = gl.getAttribLocation(program, "aPosition");
+  const aTexCoord = gl.getAttribLocation(program, "aTexCoord");
+  gl.enableVertexAttribArray(aPosition);
+  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+  gl.enableVertexAttribArray(aTexCoord);
+  gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+  const transformMatrix = matrix.toFloat32Array();
+  const zScale = 1e9;
+  const projectionMatrix = new Float32Array([
+    2 / canvasWidth,
+    0,
+    0,
+    0,
+    0,
+    -2 / canvasHeight,
+    0,
+    0,
+    0,
+    0,
+    -2 / zScale,
+    0,
+    -1,
+    1,
+    0,
+    1
+  ]);
+  const uTransform = gl.getUniformLocation(program, "uTransform");
+  const uProjection = gl.getUniformLocation(program, "uProjection");
+  const uTexture = gl.getUniformLocation(program, "uTexture");
+  gl.uniformMatrix4fv(uTransform, false, transformMatrix);
+  gl.uniformMatrix4fv(uProjection, false, projectionMatrix);
+  gl.uniform1i(uTexture, 0);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  return canvas;
+};
+var drawElementToCanvas = async ({
+  element,
+  context,
+  draw
+}) => {
+  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+  if (opacity === 0) {
+    reset();
+    return;
+  }
+  if (dimensions.width <= 0 || dimensions.height <= 0) {
+    reset();
+    return;
+  }
+  if (!totalMatrix.is2D) {
+    const offsetLeft = Math.min(dimensions.left, 0);
+    const offsetTop = Math.min(dimensions.top, 0);
+    const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
+    const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+    const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
+    const context2 = tempCanvas.getContext("2d");
+    if (!context2) {
+      throw new Error("Could not get context");
+    }
+    const adjustedDimensions = new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height);
+    await drawElement({
+      dimensions: adjustedDimensions,
+      computedStyle,
+      context: context2,
+      draw,
+      opacity,
+      totalMatrix: new DOMMatrix
+    });
+    const transformed = transformIn3d({
+      canvasWidth: tempCanvasWidth,
+      canvasHeight: tempCanvasHeight,
+      matrix: totalMatrix,
+      sourceCanvas: tempCanvas,
+      offsetLeft,
+      offsetTop
+    });
+    context.drawImage(transformed, 0, 0);
+  } else {
+    await drawElement({
+      dimensions,
+      computedStyle,
+      context,
+      draw,
+      opacity,
+      totalMatrix
+    });
+  }
   reset();
 };
 var getCollapsedText = (span) => {

package/dist/esm/previewEntry.mjs

@@ -50598,6 +50598,106 @@ var getQualityForWebRendererQuality = (quality) => {
       throw new Error(`Unsupported quality: ${quality}`);
   }
 };
+var parseTransformOrigin = (transformOrigin) => {
+  if (transformOrigin.trim() === "") {
+    return null;
+  }
+  const [x, y] = transformOrigin.split(" ");
+  return { x: parseFloat(x), y: parseFloat(y) };
+};
+var getInternalTransformOrigin = (transform) => {
+  const centerX = transform.boundingClientRect.width / 2;
+  const centerY = transform.boundingClientRect.height / 2;
+  const origin = parseTransformOrigin(transform.transformOrigin) ?? {
+    x: centerX,
+    y: centerY
+  };
+  return origin;
+};
+var getGlobalTransformOrigin = (transform) => {
+  const { x: originX, y: originY } = getInternalTransformOrigin(transform);
+  return {
+    x: originX + transform.boundingClientRect.left,
+    y: originY + transform.boundingClientRect.top
+  };
+};
+var calculateTransforms = (element) => {
+  let parent = element;
+  const transforms = [];
+  const toReset = [];
+  let opacity = 1;
+  let elementComputedStyle = null;
+  while (parent) {
+    const computedStyle = getComputedStyle(parent);
+    const parentOpacity = computedStyle.opacity;
+    if (parentOpacity && parentOpacity !== "") {
+      opacity *= parseFloat(parentOpacity);
+    }
+    if (parent === element) {
+      elementComputedStyle = computedStyle;
+    }
+    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
+      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
+      const matrix = new DOMMatrix(toParse);
+      const { transform, scale, rotate: rotate2 } = parent.style;
+      const additionalMatrices = [];
+      if (rotate2 !== "") {
+        additionalMatrices.push(new DOMMatrix(`rotate(${rotate2})`));
+      }
+      if (scale !== "") {
+        additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+      }
+      additionalMatrices.push(matrix);
+      parent.style.transform = "none";
+      parent.style.scale = "none";
+      parent.style.rotate = "none";
+      transforms.push({
+        rect: parent,
+        transformOrigin: computedStyle.transformOrigin,
+        boundingClientRect: null,
+        matrices: additionalMatrices
+      });
+      const parentRef = parent;
+      toReset.push(() => {
+        parentRef.style.transform = transform;
+        parentRef.style.scale = scale;
+        parentRef.style.rotate = rotate2;
+      });
+    }
+    parent = parent.parentElement;
+  }
+  for (const transform of transforms) {
+    transform.boundingClientRect = transform.rect.getBoundingClientRect();
+  }
+  const dimensions = transforms[0].boundingClientRect;
+  const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
+  const totalMatrix = new DOMMatrix;
+  for (const transform of transforms.slice().reverse()) {
+    if (!transform.boundingClientRect) {
+      throw new Error("Bounding client rect not found");
+    }
+    for (const matrix of transform.matrices) {
+      const globalTransformOrigin = getGlobalTransformOrigin(transform);
+      const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+      totalMatrix.multiplySelf(transformMatrix);
+    }
+  }
+  if (!elementComputedStyle) {
+    throw new Error("Element computed style not found");
+  }
+  return {
+    dimensions,
+    totalMatrix,
+    reset: () => {
+      for (const reset of toReset) {
+        reset();
+      }
+    },
+    nativeTransformOrigin,
+    opacity,
+    computedStyle: elementComputedStyle
+  };
+};
 function parseValue({
   value,
   reference
@@ -50732,92 +50832,6 @@ function setBorderRadius({
     ctx.restore();
   };
 }
-var parseTransformOrigin = (transformOrigin) => {
-  if (transformOrigin.trim() === "") {
-    return null;
-  }
-  const [x, y] = transformOrigin.split(" ");
-  return { x: parseFloat(x), y: parseFloat(y) };
-};
-var getInternalTransformOrigin = (transform) => {
-  const centerX = transform.boundingClientRect.width / 2;
-  const centerY = transform.boundingClientRect.height / 2;
-  const origin = parseTransformOrigin(transform.transformOrigin) ?? {
-    x: centerX,
-    y: centerY
-  };
-  return origin;
-};
-var getGlobalTransformOrigin = (transform) => {
-  const { x: originX, y: originY } = getInternalTransformOrigin(transform);
-  return {
-    x: originX + transform.boundingClientRect.left,
-    y: originY + transform.boundingClientRect.top
-  };
-};
-var calculateTransforms = (element) => {
-  let parent = element;
-  const transforms = [];
-  const toReset = [];
-  let opacity = 1;
-  let elementComputedStyle = null;
-  while (parent) {
-    const computedStyle = getComputedStyle(parent);
-    const parentOpacity = computedStyle.opacity;
-    if (parentOpacity && parentOpacity !== "") {
-      opacity *= parseFloat(parentOpacity);
-    }
-    if (parent === element) {
-      elementComputedStyle = computedStyle;
-    }
-    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
-      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
-      const matrix = new DOMMatrix(toParse);
-      const { transform } = parent.style;
-      parent.style.transform = "none";
-      transforms.push({
-        matrix,
-        rect: parent,
-        transformOrigin: computedStyle.transformOrigin,
-        boundingClientRect: null
-      });
-      const parentRef = parent;
-      toReset.push(() => {
-        parentRef.style.transform = transform;
-      });
-    }
-    parent = parent.parentElement;
-  }
-  for (const transform of transforms) {
-    transform.boundingClientRect = transform.rect.getBoundingClientRect();
-  }
-  const dimensions = transforms[0].boundingClientRect;
-  const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
-  const totalMatrix = new DOMMatrix;
-  for (const transform of transforms.slice().reverse()) {
-    if (!transform.boundingClientRect) {
-      throw new Error("Bounding client rect not found");
-    }
-    const globalTransformOrigin = getGlobalTransformOrigin(transform);
-    const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(transform.matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-    totalMatrix.multiplySelf(transformMatrix);
-  }
-  if (!elementComputedStyle) {
-    throw new Error("Element computed style not found");
-  }
-  return {
-    dimensions,
-    totalMatrix,
-    reset: () => {
-      for (const reset of toReset) {
-        reset();
-      }
-    },
-    nativeTransformOrigin,
-    opacity,
-    computedStyle: elementComputedStyle
-  };
-};
 var drawBorder = ({
   ctx,
   x,
@@ -50922,20 +50936,14 @@ var setTransform = ({
     ctx.setTransform(new DOMMatrix);
   };
 };
-var drawElementToCanvas = async ({
-  element,
+var drawElement = async ({
+  dimensions,
+  computedStyle,
   context,
-  draw
+  draw,
+  opacity,
+  totalMatrix
 }) => {
-  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
-  if (opacity === 0) {
-    reset();
-    return;
-  }
-  if (dimensions.width <= 0 || dimensions.height <= 0) {
-    reset();
-    return;
-  }
   const background2 = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
@@ -50977,6 +50985,192 @@ var drawElementToCanvas = async ({
   finishOpacity();
   finishBorderRadius();
   finishTransform();
+};
+function compileShader(shaderGl, source, type) {
+  const shader = shaderGl.createShader(type);
+  if (!shader) {
+    throw new Error("Could not create shader");
+  }
+  shaderGl.shaderSource(shader, source);
+  shaderGl.compileShader(shader);
+  if (!shaderGl.getShaderParameter(shader, shaderGl.COMPILE_STATUS)) {
+    const log = shaderGl.getShaderInfoLog(shader);
+    shaderGl.deleteShader(shader);
+    throw new Error("Shader compile error: " + log);
+  }
+  return shader;
+}
+var transformIn3d = ({
+  canvasWidth,
+  canvasHeight,
+  matrix,
+  sourceCanvas,
+  offsetLeft,
+  offsetTop
+}) => {
+  const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
+  const gl = canvas.getContext("webgl");
+  if (!gl) {
+    throw new Error("WebGL not supported");
+  }
+  const vsSource = `
+        attribute vec2 aPosition;
+        attribute vec2 aTexCoord;
+        uniform mat4 uTransform;
+        uniform mat4 uProjection;
+        varying vec2 vTexCoord;
+
+        void main() {
+            gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
+            vTexCoord = aTexCoord;
+        }
+    `;
+  const fsSource = `
+        precision mediump float;
+        uniform sampler2D uTexture;
+        varying vec2 vTexCoord;
+
+        void main() {
+            gl_FragColor = texture2D(uTexture, vTexCoord);
+        }
+    `;
+  const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
+  const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error("Program link error: " + gl.getProgramInfoLog(program));
+  }
+  gl.useProgram(program);
+  const vertices = new Float32Array([
+    offsetLeft,
+    offsetTop,
+    0,
+    0,
+    canvasWidth + offsetLeft,
+    offsetTop,
+    1,
+    0,
+    offsetLeft,
+    canvasHeight + offsetTop,
+    0,
+    1,
+    offsetLeft,
+    canvasHeight + offsetTop,
+    0,
+    1,
+    canvasWidth + offsetLeft,
+    offsetTop,
+    1,
+    0,
+    canvasWidth + offsetLeft,
+    canvasHeight + offsetTop,
+    1,
+    1
+  ]);
+  const vertexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+  const aPosition = gl.getAttribLocation(program, "aPosition");
+  const aTexCoord = gl.getAttribLocation(program, "aTexCoord");
+  gl.enableVertexAttribArray(aPosition);
+  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+  gl.enableVertexAttribArray(aTexCoord);
+  gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+  const transformMatrix = matrix.toFloat32Array();
+  const zScale = 1e9;
+  const projectionMatrix = new Float32Array([
+    2 / canvasWidth,
+    0,
+    0,
+    0,
+    0,
+    -2 / canvasHeight,
+    0,
+    0,
+    0,
+    0,
+    -2 / zScale,
+    0,
+    -1,
+    1,
+    0,
+    1
+  ]);
+  const uTransform = gl.getUniformLocation(program, "uTransform");
+  const uProjection = gl.getUniformLocation(program, "uProjection");
+  const uTexture = gl.getUniformLocation(program, "uTexture");
+  gl.uniformMatrix4fv(uTransform, false, transformMatrix);
+  gl.uniformMatrix4fv(uProjection, false, projectionMatrix);
+  gl.uniform1i(uTexture, 0);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  return canvas;
+};
+var drawElementToCanvas = async ({
+  element,
+  context,
+  draw
+}) => {
+  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+  if (opacity === 0) {
+    reset();
+    return;
+  }
+  if (dimensions.width <= 0 || dimensions.height <= 0) {
+    reset();
+    return;
+  }
+  if (!totalMatrix.is2D) {
+    const offsetLeft = Math.min(dimensions.left, 0);
+    const offsetTop = Math.min(dimensions.top, 0);
+    const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
+    const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+    const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
+    const context2 = tempCanvas.getContext("2d");
+    if (!context2) {
+      throw new Error("Could not get context");
+    }
+    const adjustedDimensions = new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height);
+    await drawElement({
+      dimensions: adjustedDimensions,
+      computedStyle,
+      context: context2,
+      draw,
+      opacity,
+      totalMatrix: new DOMMatrix
+    });
+    const transformed = transformIn3d({
+      canvasWidth: tempCanvasWidth,
+      canvasHeight: tempCanvasHeight,
+      matrix: totalMatrix,
+      sourceCanvas: tempCanvas,
+      offsetLeft,
+      offsetTop
+    });
+    context.drawImage(transformed, 0, 0);
+  } else {
+    await drawElement({
+      dimensions,
+      computedStyle,
+      context,
+      draw,
+      opacity,
+      totalMatrix
+    });
+  }
   reset();
 };
 var getCollapsedText = (span) => {

package/dist/esm/renderEntry.mjs

@@ -206,7 +206,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-fnfxxf7g.js").then(({ StudioInternals }) => {
+    import("./chunk-02cyqxg9.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.391",
+	"version": "4.0.392",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -25,13 +25,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.391",
-		"@remotion/player": "4.0.391",
-		"@remotion/media-utils": "4.0.391",
-		"@remotion/renderer": "4.0.391",
-		"@remotion/web-renderer": "4.0.391",
-		"@remotion/studio-shared": "4.0.391",
-		"@remotion/zod-types": "4.0.391",
+		"remotion": "4.0.392",
+		"@remotion/player": "4.0.392",
+		"@remotion/media-utils": "4.0.392",
+		"@remotion/renderer": "4.0.392",
+		"@remotion/web-renderer": "4.0.392",
+		"@remotion/studio-shared": "4.0.392",
+		"@remotion/zod-types": "4.0.392",
 		"mediabunny": "1.25.8",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -42,7 +42,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.391",
+		"@remotion/eslint-config-internal": "4.0.392",
 		"eslint": "9.19.0"
 	},
 	"publishConfig": {