@remotion/transitions 4.0.496 → 4.0.498

package/dist/TransitionSeries.d.ts

@@ -9,8 +9,8 @@ type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
-} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name' | 'showInTimeline' | 'freeze' | 'hidden'>>;
-export type DrawFunction = (prevImage: ElementImage | null, nextImage: ElementImage | null, progress: number) => void;
+} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name' | 'showInTimeline' | 'freeze' | 'hidden' | 'trimBefore'>>;
+export type DrawFunction = (prevImage: OffscreenCanvas | null, nextImage: OffscreenCanvas | null, progress: number) => void;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
     Sequence: FC<SeriesSequenceProps>;
     Transition: TransitionSeriesTransitionComponent;

package/dist/TransitionSeries.js

@@ -77,6 +77,7 @@ const transitionSeriesSequenceSchema = {
     hidden: remotion_1.Internals.sequenceSchema.hidden,
     showInTimeline: remotion_1.Internals.sequenceSchema.showInTimeline,
     freeze: remotion_1.Internals.freezeField,
+    trimBefore: remotion_1.Internals.sequenceSchema.trimBefore,
     layout: remotion_1.Internals.sequenceSchema.layout,
 };
 const SeriesSequenceInner = ({ offset = 0, className = '', stack = null, _remotionInternalRender = null, ...props }) => {

package/dist/esm/book-flip.mjs

@@ -7,7 +7,7 @@ import {
   Internals,
   useDelayRender
 } from "remotion";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,
   onElementImage,
@@ -23,6 +23,7 @@ var HtmlInCanvasPresentation = ({
     throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
+  const outputCanvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo(() => {
     return {
       width: "100%",
@@ -34,7 +35,21 @@ var HtmlInCanvasPresentation = ({
       bottom: 0
     };
   }, []);
-  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const outputCanvasStyle = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    };
+  }, []);
+  const captureCanvasRef = useRef(null);
+  const captureContextRef = useRef(null);
+  const [shaderCanvas] = useState(() => new OffscreenCanvas(1, 1));
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
@@ -43,33 +58,58 @@ var HtmlInCanvasPresentation = ({
   });
   const effectsRef = useRef(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const [instance] = useState(() => shader(offscreenCanvas));
+  const [instance] = useState(() => shader(shaderCanvas));
   useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return () => {
+        instance.cleanup();
+      };
+    }
+    const captureCanvas = canvas.transferControlToOffscreen();
+    const captureContext = captureCanvas.getContext("2d");
+    if (!captureContext) {
+      throw new Error("Failed to create capture canvas context");
+    }
+    captureCanvasRef.current = captureCanvas;
+    captureContextRef.current = captureContext;
     return () => {
       instance.cleanup();
+      captureCanvasRef.current = null;
+      captureContextRef.current = null;
     };
-  }, [offscreenCanvas, instance]);
+  }, [instance]);
   const chainState = Internals.useEffectChainState();
   const { delayRender, continueRender } = useDelayRender();
   const draw = useCallback(async (prevImage, nextImage, progress) => {
-    if (!canvasRef.current) {
+    const outputCanvas = outputCanvasRef.current;
+    if (!outputCanvas) {
       throw new Error("Canvas not found");
     }
     const handle = delayRender("onPaint");
+    const clearOutput = () => {
+      const context = outputCanvas.getContext("2d");
+      if (!context) {
+        throw new Error("Failed to create output canvas context");
+      }
+      context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    };
     if (!prevImage && !nextImage) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
     const width = prevImage?.width ?? nextImage?.width ?? 0;
     const height = prevImage?.height ?? nextImage?.height ?? 0;
     if (width === 0 || height === 0) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
+    shaderCanvas.width = width;
+    shaderCanvas.height = height;
     instance.draw({
       prevImage,
       nextImage,
@@ -80,14 +120,14 @@ var HtmlInCanvasPresentation = ({
     });
     await Internals.runEffectChain({
       state: chainState.get(width, height),
-      source: offscreenCanvas,
+      source: shaderCanvas,
       effects: effectsRef.current ?? [],
       width,
       height,
-      output: canvasRef.current
+      output: outputCanvas
     });
     continueRender(handle);
-  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
   const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
   useLayoutEffect(() => {
     if (passThrough) {
@@ -100,11 +140,19 @@ var HtmlInCanvasPresentation = ({
     canvas.layoutSubtree = true;
     const onPaint = () => {
       const firstChild = canvas.firstChild;
-      if (!firstChild) {
+      const captureCanvas = captureCanvasRef.current;
+      const captureContext = captureContextRef.current;
+      if (!firstChild || !captureCanvas || !captureContext) {
         return;
       }
       const elementImage = canvas.captureElementImage(firstChild);
-      onElementImage(elementImage, draw);
+      try {
+        captureContext.reset();
+        captureContext.drawElementImage(elementImage, 0, 0);
+      } finally {
+        elementImage.close();
+      }
+      onElementImage(captureCanvas, draw);
     };
     canvas.addEventListener("paint", onPaint);
     return () => {
@@ -138,20 +186,39 @@ var HtmlInCanvasPresentation = ({
       return;
     }
     const observer = new ResizeObserver(([entry]) => {
-      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
-      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+      const outputCanvas = outputCanvasRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      if (!outputCanvas || !captureCanvas) {
+        return;
+      }
+      const width = entry.devicePixelContentBoxSize[0].inlineSize;
+      const height = entry.devicePixelContentBoxSize[0].blockSize;
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      outputCanvas.width = width;
+      outputCanvas.height = height;
+      canvas.requestPaint?.();
     });
     observer.observe(canvas, { box: "device-pixel-content-box" });
+    return () => {
+      observer.disconnect();
+    };
   }, [passThrough]);
   if (passThrough) {
     return children;
   }
-  return /* @__PURE__ */ jsx(AbsoluteFill, {
-    children: /* @__PURE__ */ jsx("canvas", {
-      ref: canvasRef,
-      style: canvasSubtreeStyle,
-      children
-    })
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    children: [
+      /* @__PURE__ */ jsx("canvas", {
+        ref: canvasRef,
+        style: canvasSubtreeStyle,
+        children
+      }),
+      /* @__PURE__ */ jsx("canvas", {
+        ref: outputCanvasRef,
+        style: outputCanvasStyle
+      })
+    ]
   });
 };
 var makeHtmlInCanvasPresentation = (shader) => {
@@ -173,6 +240,11 @@ var makeHtmlInCanvasPresentation = (shader) => {
   };
 };
 
+// src/presentations/upload-element-image.ts
+var uploadElementImage = (gl, elementImage) => {
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+};
+
 // src/presentations/book-flip.tsx
 var DIRECTION_FROM_LEFT = 0;
 var DIRECTION_FROM_RIGHT = 1;
@@ -408,13 +480,13 @@ var bookFlipShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);

package/dist/esm/cross-zoom.mjs

@@ -7,7 +7,7 @@ import {
   Internals,
   useDelayRender
 } from "remotion";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,
   onElementImage,
@@ -23,6 +23,7 @@ var HtmlInCanvasPresentation = ({
     throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
+  const outputCanvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo(() => {
     return {
       width: "100%",
@@ -34,7 +35,21 @@ var HtmlInCanvasPresentation = ({
       bottom: 0
     };
   }, []);
-  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const outputCanvasStyle = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    };
+  }, []);
+  const captureCanvasRef = useRef(null);
+  const captureContextRef = useRef(null);
+  const [shaderCanvas] = useState(() => new OffscreenCanvas(1, 1));
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
@@ -43,33 +58,58 @@ var HtmlInCanvasPresentation = ({
   });
   const effectsRef = useRef(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const [instance] = useState(() => shader(offscreenCanvas));
+  const [instance] = useState(() => shader(shaderCanvas));
   useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return () => {
+        instance.cleanup();
+      };
+    }
+    const captureCanvas = canvas.transferControlToOffscreen();
+    const captureContext = captureCanvas.getContext("2d");
+    if (!captureContext) {
+      throw new Error("Failed to create capture canvas context");
+    }
+    captureCanvasRef.current = captureCanvas;
+    captureContextRef.current = captureContext;
     return () => {
       instance.cleanup();
+      captureCanvasRef.current = null;
+      captureContextRef.current = null;
     };
-  }, [offscreenCanvas, instance]);
+  }, [instance]);
   const chainState = Internals.useEffectChainState();
   const { delayRender, continueRender } = useDelayRender();
   const draw = useCallback(async (prevImage, nextImage, progress) => {
-    if (!canvasRef.current) {
+    const outputCanvas = outputCanvasRef.current;
+    if (!outputCanvas) {
       throw new Error("Canvas not found");
     }
     const handle = delayRender("onPaint");
+    const clearOutput = () => {
+      const context = outputCanvas.getContext("2d");
+      if (!context) {
+        throw new Error("Failed to create output canvas context");
+      }
+      context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    };
     if (!prevImage && !nextImage) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
     const width = prevImage?.width ?? nextImage?.width ?? 0;
     const height = prevImage?.height ?? nextImage?.height ?? 0;
     if (width === 0 || height === 0) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
+    shaderCanvas.width = width;
+    shaderCanvas.height = height;
     instance.draw({
       prevImage,
       nextImage,
@@ -80,14 +120,14 @@ var HtmlInCanvasPresentation = ({
     });
     await Internals.runEffectChain({
       state: chainState.get(width, height),
-      source: offscreenCanvas,
+      source: shaderCanvas,
       effects: effectsRef.current ?? [],
       width,
       height,
-      output: canvasRef.current
+      output: outputCanvas
     });
     continueRender(handle);
-  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
   const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
   useLayoutEffect(() => {
     if (passThrough) {
@@ -100,11 +140,19 @@ var HtmlInCanvasPresentation = ({
     canvas.layoutSubtree = true;
     const onPaint = () => {
       const firstChild = canvas.firstChild;
-      if (!firstChild) {
+      const captureCanvas = captureCanvasRef.current;
+      const captureContext = captureContextRef.current;
+      if (!firstChild || !captureCanvas || !captureContext) {
         return;
       }
       const elementImage = canvas.captureElementImage(firstChild);
-      onElementImage(elementImage, draw);
+      try {
+        captureContext.reset();
+        captureContext.drawElementImage(elementImage, 0, 0);
+      } finally {
+        elementImage.close();
+      }
+      onElementImage(captureCanvas, draw);
     };
     canvas.addEventListener("paint", onPaint);
     return () => {
@@ -138,20 +186,39 @@ var HtmlInCanvasPresentation = ({
       return;
     }
     const observer = new ResizeObserver(([entry]) => {
-      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
-      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+      const outputCanvas = outputCanvasRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      if (!outputCanvas || !captureCanvas) {
+        return;
+      }
+      const width = entry.devicePixelContentBoxSize[0].inlineSize;
+      const height = entry.devicePixelContentBoxSize[0].blockSize;
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      outputCanvas.width = width;
+      outputCanvas.height = height;
+      canvas.requestPaint?.();
     });
     observer.observe(canvas, { box: "device-pixel-content-box" });
+    return () => {
+      observer.disconnect();
+    };
   }, [passThrough]);
   if (passThrough) {
     return children;
   }
-  return /* @__PURE__ */ jsx(AbsoluteFill, {
-    children: /* @__PURE__ */ jsx("canvas", {
-      ref: canvasRef,
-      style: canvasSubtreeStyle,
-      children
-    })
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    children: [
+      /* @__PURE__ */ jsx("canvas", {
+        ref: canvasRef,
+        style: canvasSubtreeStyle,
+        children
+      }),
+      /* @__PURE__ */ jsx("canvas", {
+        ref: outputCanvasRef,
+        style: outputCanvasStyle
+      })
+    ]
   });
 };
 var makeHtmlInCanvasPresentation = (shader) => {
@@ -173,6 +240,11 @@ var makeHtmlInCanvasPresentation = (shader) => {
   };
 };
 
+// src/presentations/upload-element-image.ts
+var uploadElementImage = (gl, elementImage) => {
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+};
+
 // src/presentations/cross-zoom.tsx
 var DEFAULT_STRENGTH = 0.4;
 var VERTEX_SHADER = `#version 300 es
@@ -351,13 +423,13 @@ var crossZoomShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);

package/dist/esm/crosswarp.mjs

@@ -7,7 +7,7 @@ import {
   Internals,
   useDelayRender
 } from "remotion";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,
   onElementImage,
@@ -23,6 +23,7 @@ var HtmlInCanvasPresentation = ({
     throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
+  const outputCanvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo(() => {
     return {
       width: "100%",
@@ -34,7 +35,21 @@ var HtmlInCanvasPresentation = ({
       bottom: 0
     };
   }, []);
-  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const outputCanvasStyle = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    };
+  }, []);
+  const captureCanvasRef = useRef(null);
+  const captureContextRef = useRef(null);
+  const [shaderCanvas] = useState(() => new OffscreenCanvas(1, 1));
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
@@ -43,33 +58,58 @@ var HtmlInCanvasPresentation = ({
   });
   const effectsRef = useRef(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const [instance] = useState(() => shader(offscreenCanvas));
+  const [instance] = useState(() => shader(shaderCanvas));
   useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return () => {
+        instance.cleanup();
+      };
+    }
+    const captureCanvas = canvas.transferControlToOffscreen();
+    const captureContext = captureCanvas.getContext("2d");
+    if (!captureContext) {
+      throw new Error("Failed to create capture canvas context");
+    }
+    captureCanvasRef.current = captureCanvas;
+    captureContextRef.current = captureContext;
     return () => {
       instance.cleanup();
+      captureCanvasRef.current = null;
+      captureContextRef.current = null;
     };
-  }, [offscreenCanvas, instance]);
+  }, [instance]);
   const chainState = Internals.useEffectChainState();
   const { delayRender, continueRender } = useDelayRender();
   const draw = useCallback(async (prevImage, nextImage, progress) => {
-    if (!canvasRef.current) {
+    const outputCanvas = outputCanvasRef.current;
+    if (!outputCanvas) {
       throw new Error("Canvas not found");
     }
     const handle = delayRender("onPaint");
+    const clearOutput = () => {
+      const context = outputCanvas.getContext("2d");
+      if (!context) {
+        throw new Error("Failed to create output canvas context");
+      }
+      context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    };
     if (!prevImage && !nextImage) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
     const width = prevImage?.width ?? nextImage?.width ?? 0;
     const height = prevImage?.height ?? nextImage?.height ?? 0;
     if (width === 0 || height === 0) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
+    shaderCanvas.width = width;
+    shaderCanvas.height = height;
     instance.draw({
       prevImage,
       nextImage,
@@ -80,14 +120,14 @@ var HtmlInCanvasPresentation = ({
     });
     await Internals.runEffectChain({
       state: chainState.get(width, height),
-      source: offscreenCanvas,
+      source: shaderCanvas,
       effects: effectsRef.current ?? [],
       width,
       height,
-      output: canvasRef.current
+      output: outputCanvas
     });
     continueRender(handle);
-  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
   const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
   useLayoutEffect(() => {
     if (passThrough) {
@@ -100,11 +140,19 @@ var HtmlInCanvasPresentation = ({
     canvas.layoutSubtree = true;
     const onPaint = () => {
       const firstChild = canvas.firstChild;
-      if (!firstChild) {
+      const captureCanvas = captureCanvasRef.current;
+      const captureContext = captureContextRef.current;
+      if (!firstChild || !captureCanvas || !captureContext) {
         return;
       }
       const elementImage = canvas.captureElementImage(firstChild);
-      onElementImage(elementImage, draw);
+      try {
+        captureContext.reset();
+        captureContext.drawElementImage(elementImage, 0, 0);
+      } finally {
+        elementImage.close();
+      }
+      onElementImage(captureCanvas, draw);
     };
     canvas.addEventListener("paint", onPaint);
     return () => {
@@ -138,20 +186,39 @@ var HtmlInCanvasPresentation = ({
       return;
     }
     const observer = new ResizeObserver(([entry]) => {
-      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
-      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+      const outputCanvas = outputCanvasRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      if (!outputCanvas || !captureCanvas) {
+        return;
+      }
+      const width = entry.devicePixelContentBoxSize[0].inlineSize;
+      const height = entry.devicePixelContentBoxSize[0].blockSize;
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      outputCanvas.width = width;
+      outputCanvas.height = height;
+      canvas.requestPaint?.();
     });
     observer.observe(canvas, { box: "device-pixel-content-box" });
+    return () => {
+      observer.disconnect();
+    };
   }, [passThrough]);
   if (passThrough) {
     return children;
   }
-  return /* @__PURE__ */ jsx(AbsoluteFill, {
-    children: /* @__PURE__ */ jsx("canvas", {
-      ref: canvasRef,
-      style: canvasSubtreeStyle,
-      children
-    })
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    children: [
+      /* @__PURE__ */ jsx("canvas", {
+        ref: canvasRef,
+        style: canvasSubtreeStyle,
+        children
+      }),
+      /* @__PURE__ */ jsx("canvas", {
+        ref: outputCanvasRef,
+        style: outputCanvasStyle
+      })
+    ]
   });
 };
 var makeHtmlInCanvasPresentation = (shader) => {
@@ -173,6 +240,11 @@ var makeHtmlInCanvasPresentation = (shader) => {
   };
 };
 
+// src/presentations/upload-element-image.ts
+var uploadElementImage = (gl, elementImage) => {
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+};
+
 // src/presentations/crosswarp.tsx
 var VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
@@ -306,13 +378,13 @@ var crosswarpShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);