@remotion/transitions 4.0.456 → 4.0.458

package/dist/esm/index.mjs

@@ -528,9 +528,179 @@ var useTransitionProgress = () => {
     exiting: exiting?.exitingProgress ?? 0
   };
 };
+// src/html-in-canvas-presentation.tsx
+import { useLayoutEffect, useMemo as useMemo4, useRef as useRef2, useState, useCallback as useCallback2 } from "react";
+import { HtmlInCanvas, useDelayRender } from "remotion";
+import { AbsoluteFill as AbsoluteFill2, Internals as Internals2, useCurrentFrame as useCurrentFrame2 } from "remotion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var HtmlInCanvasPresentation = ({
+  children,
+  onElementImage,
+  onUnmount,
+  presentationProgress,
+  presentationDirection,
+  shader,
+  _experimentalEffects,
+  passedProps,
+  bothEnteringAndExiting
+}) => {
+  if (!HtmlInCanvas.isSupported()) {
+    throw new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.");
+  }
+  const canvasRef = useRef2(null);
+  const canvasSubtreeStyle = useMemo4(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    };
+  }, []);
+  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const passedPropsRef = useRef2(passedProps);
+  passedPropsRef.current = passedProps;
+  const frame = useCurrentFrame2();
+  const frameRef = useRef2(frame);
+  frameRef.current = frame;
+  const effectsRef = useRef2(_experimentalEffects);
+  effectsRef.current = _experimentalEffects;
+  const [instance] = useState(() => shader(offscreenCanvas));
+  useLayoutEffect(() => {
+    return () => {
+      instance.cleanup();
+    };
+  }, [offscreenCanvas, instance]);
+  const chainState = Internals2.useEffectChainState();
+  const { delayRender, continueRender } = useDelayRender();
+  const draw = useCallback2(async (prevImage, nextImage, progress) => {
+    if (!canvasRef.current) {
+      throw new Error("Canvas not found");
+    }
+    const handle = delayRender("onPaint");
+    if (!prevImage && !nextImage) {
+      continueRender(handle);
+      instance.clear();
+      return;
+    }
+    const width = prevImage?.width ?? nextImage?.width ?? 0;
+    const height = prevImage?.height ?? nextImage?.height ?? 0;
+    if (width === 0 || height === 0) {
+      continueRender(handle);
+      instance.clear();
+      return;
+    }
+    offscreenCanvas.width = width;
+    offscreenCanvas.height = height;
+    instance.draw({
+      prevImage,
+      nextImage,
+      width,
+      height,
+      time: progress,
+      passedProps: passedPropsRef.current
+    });
+    await Internals2.runEffectChain({
+      state: chainState.get(width, height),
+      source: offscreenCanvas,
+      effects: effectsRef.current ?? [],
+      frame: frameRef.current,
+      width,
+      height,
+      output: canvasRef.current
+    });
+    continueRender(handle);
+  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      throw new Error("Canvas not found");
+    }
+    canvas.layoutSubtree = true;
+    const onPaint = () => {
+      const firstChild = canvas.firstChild;
+      if (!firstChild) {
+        return;
+      }
+      const elementImage = canvas.captureElementImage(firstChild);
+      onElementImage(elementImage, draw);
+    };
+    canvas.addEventListener("paint", onPaint);
+    return () => {
+      canvas.removeEventListener("paint", onPaint);
+    };
+  }, [onElementImage, presentationDirection, draw, passThrough]);
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      throw new Error("Canvas not found");
+    }
+    canvas.requestPaint?.();
+  }, [presentationProgress, passThrough]);
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    return () => {
+      onUnmount();
+    };
+  }, [onUnmount, passThrough]);
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+    });
+    observer.observe(canvas, { box: "device-pixel-content-box" });
+  }, [passThrough]);
+  if (passThrough) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx4(AbsoluteFill2, {
+    children: /* @__PURE__ */ jsx4("canvas", {
+      ref: canvasRef,
+      style: canvasSubtreeStyle,
+      children
+    })
+  });
+};
+var makeHtmlInCanvasPresentation = (shader) => {
+  const CompWithShader = (props) => {
+    const { passedProps, ...otherProps } = props;
+    const { _experimentalEffects, ...restPassedProps } = props.passedProps;
+    return /* @__PURE__ */ jsx4(HtmlInCanvasPresentation, {
+      shader,
+      passedProps: restPassedProps,
+      _experimentalEffects,
+      ...otherProps
+    });
+  };
+  return (props) => {
+    return {
+      component: CompWithShader,
+      props
+    };
+  };
+};
 export {
   useTransitionProgress,
   springTiming,
+  makeHtmlInCanvasPresentation,
   linearTiming,
   TransitionSeries
 };

package/dist/esm/zoom-blur.mjs

@@ -14,7 +14,7 @@ var HtmlInCanvasPresentation = ({
   passedProps,
   bothEnteringAndExiting
 }) => {
-  if (!HtmlInCanvas.isHtmlInCanvasSupported()) {
+  if (!HtmlInCanvas.isSupported()) {
     throw new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.");
   }
   const canvasRef = useRef(null);
@@ -37,9 +37,8 @@ var HtmlInCanvasPresentation = ({
   frameRef.current = frame;
   const effectsRef = useRef(_experimentalEffects);
   effectsRef.current = _experimentalEffects;
-  const [instance] = useState(() => shader());
+  const [instance] = useState(() => shader(offscreenCanvas));
   useLayoutEffect(() => {
-    instance.init(offscreenCanvas);
     return () => {
       instance.cleanup();
     };
@@ -278,52 +277,33 @@ var createTexture = (gl) => {
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
   return tex;
 };
-var zoomBlurShader = () => {
-  let state = null;
-  const init = (canvas) => {
-    const gl = canvas.getContext("webgl2", { premultipliedAlpha: true });
-    if (!gl) {
-      return () => {};
-    }
-    const program = createProgram(gl);
-    const prevTex = createTexture(gl);
-    const nextTex = createTexture(gl);
-    const vao = gl.createVertexArray();
-    gl.bindVertexArray(vao);
-    const buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-    const aPos = gl.getAttribLocation(program, "a_pos");
-    gl.enableVertexAttribArray(aPos);
-    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
-    state = {
-      gl,
-      program,
-      prevTex,
-      nextTex,
-      uTime: gl.getUniformLocation(program, "u_time"),
-      uPrev: gl.getUniformLocation(program, "u_prev"),
-      uNext: gl.getUniformLocation(program, "u_next"),
-      uAspect: gl.getUniformLocation(program, "u_aspect"),
-      uMaxAngle: gl.getUniformLocation(program, "u_max_angle")
-    };
-    return () => {};
-  };
+var zoomBlurShader = (canvas) => {
+  const gl = canvas.getContext("webgl2", { premultipliedAlpha: true });
+  if (!gl) {
+    throw new Error("Failed to create WebGL2 context");
+  }
+  const program = createProgram(gl);
+  const prevTex = createTexture(gl);
+  const nextTex = createTexture(gl);
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  const aPos = gl.getAttribLocation(program, "a_pos");
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+  const uTime = gl.getUniformLocation(program, "u_time");
+  const uPrev = gl.getUniformLocation(program, "u_prev");
+  const uNext = gl.getUniformLocation(program, "u_next");
+  const uAspect = gl.getUniformLocation(program, "u_aspect");
+  const uMaxAngle = gl.getUniformLocation(program, "u_max_angle");
   const cleanup = () => {
-    if (!state) {
-      throw new Error("Zoom blur state not initialized");
-    }
-    const { gl, program, prevTex, nextTex } = state;
     gl.deleteProgram(program);
     gl.deleteTexture(prevTex);
     gl.deleteTexture(nextTex);
-    state = null;
   };
   const clear = () => {
-    if (!state) {
-      throw new Error("Zoom blur state not initialized");
-    }
-    const { gl } = state;
     gl.clearColor(0, 0, 0, 0);
     gl.clear(gl.COLOR_BUFFER_BIT);
   };
@@ -335,21 +315,7 @@ var zoomBlurShader = () => {
     time,
     passedProps
   }) => {
-    if (!state) {
-      throw new Error("Zoom blur state not initialized");
-    }
     const { rotation = Math.PI / 6 } = passedProps;
-    const {
-      gl,
-      program,
-      prevTex,
-      nextTex,
-      uTime,
-      uPrev,
-      uNext,
-      uAspect,
-      uMaxAngle
-    } = state;
     if (!prevImage && !nextImage) {
       return;
     }
@@ -382,10 +348,9 @@ var zoomBlurShader = () => {
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   };
   return {
-    init,
     clear,
-    draw,
-    cleanup
+    cleanup,
+    draw
   };
 };
 var zoomBlur = makeHtmlInCanvasPresentation(zoomBlurShader);

package/dist/esm/zoom-in-out.mjs

@@ -0,0 +1,322 @@
+// src/html-in-canvas-presentation.tsx
+import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import { HtmlInCanvas, useDelayRender } from "remotion";
+import { AbsoluteFill, Internals, useCurrentFrame } from "remotion";
+import { jsx } from "react/jsx-runtime";
+var HtmlInCanvasPresentation = ({
+  children,
+  onElementImage,
+  onUnmount,
+  presentationProgress,
+  presentationDirection,
+  shader,
+  _experimentalEffects,
+  passedProps,
+  bothEnteringAndExiting
+}) => {
+  if (!HtmlInCanvas.isSupported()) {
+    throw new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.");
+  }
+  const canvasRef = useRef(null);
+  const canvasSubtreeStyle = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    };
+  }, []);
+  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const passedPropsRef = useRef(passedProps);
+  passedPropsRef.current = passedProps;
+  const frame = useCurrentFrame();
+  const frameRef = useRef(frame);
+  frameRef.current = frame;
+  const effectsRef = useRef(_experimentalEffects);
+  effectsRef.current = _experimentalEffects;
+  const [instance] = useState(() => shader(offscreenCanvas));
+  useLayoutEffect(() => {
+    return () => {
+      instance.cleanup();
+    };
+  }, [offscreenCanvas, instance]);
+  const chainState = Internals.useEffectChainState();
+  const { delayRender, continueRender } = useDelayRender();
+  const draw = useCallback(async (prevImage, nextImage, progress) => {
+    if (!canvasRef.current) {
+      throw new Error("Canvas not found");
+    }
+    const handle = delayRender("onPaint");
+    if (!prevImage && !nextImage) {
+      continueRender(handle);
+      instance.clear();
+      return;
+    }
+    const width = prevImage?.width ?? nextImage?.width ?? 0;
+    const height = prevImage?.height ?? nextImage?.height ?? 0;
+    if (width === 0 || height === 0) {
+      continueRender(handle);
+      instance.clear();
+      return;
+    }
+    offscreenCanvas.width = width;
+    offscreenCanvas.height = height;
+    instance.draw({
+      prevImage,
+      nextImage,
+      width,
+      height,
+      time: progress,
+      passedProps: passedPropsRef.current
+    });
+    await Internals.runEffectChain({
+      state: chainState.get(width, height),
+      source: offscreenCanvas,
+      effects: effectsRef.current ?? [],
+      frame: frameRef.current,
+      width,
+      height,
+      output: canvasRef.current
+    });
+    continueRender(handle);
+  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      throw new Error("Canvas not found");
+    }
+    canvas.layoutSubtree = true;
+    const onPaint = () => {
+      const firstChild = canvas.firstChild;
+      if (!firstChild) {
+        return;
+      }
+      const elementImage = canvas.captureElementImage(firstChild);
+      onElementImage(elementImage, draw);
+    };
+    canvas.addEventListener("paint", onPaint);
+    return () => {
+      canvas.removeEventListener("paint", onPaint);
+    };
+  }, [onElementImage, presentationDirection, draw, passThrough]);
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      throw new Error("Canvas not found");
+    }
+    canvas.requestPaint?.();
+  }, [presentationProgress, passThrough]);
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    return () => {
+      onUnmount();
+    };
+  }, [onUnmount, passThrough]);
+  useLayoutEffect(() => {
+    if (passThrough) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
+      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+    });
+    observer.observe(canvas, { box: "device-pixel-content-box" });
+  }, [passThrough]);
+  if (passThrough) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(AbsoluteFill, {
+    children: /* @__PURE__ */ jsx("canvas", {
+      ref: canvasRef,
+      style: canvasSubtreeStyle,
+      children
+    })
+  });
+};
+var makeHtmlInCanvasPresentation = (shader) => {
+  const CompWithShader = (props) => {
+    const { passedProps, ...otherProps } = props;
+    const { _experimentalEffects, ...restPassedProps } = props.passedProps;
+    return /* @__PURE__ */ jsx(HtmlInCanvasPresentation, {
+      shader,
+      passedProps: restPassedProps,
+      _experimentalEffects,
+      ...otherProps
+    });
+  };
+  return (props) => {
+    return {
+      component: CompWithShader,
+      props
+    };
+  };
+};
+
+// src/presentations/zoom-in-out.tsx
+var VERTEX_SHADER = `#version 300 es
+in vec2 a_pos;
+out vec2 v_uv;
+void main() {
+	v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);
+	gl_Position = vec4(a_pos, 0.0, 1.0);
+}`;
+var FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D u_prev;
+uniform sampler2D u_next;
+uniform float u_time;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+vec2 zoom(vec2 uv, float amount) {
+	return 0.5 + ((uv - 0.5) * (1.0 - amount));
+}
+
+void main() {
+	float progress = 1.0 - u_time;
+	float zoomFrom = smoothstep(0.0, 1.0, progress * 2.0);
+	float zoomTo = smoothstep(0.0, 1.0, (1.0 - progress) * 2.0);
+	float crossfade = smoothstep(0.4, 0.6, progress);
+	outColor = mix(
+		texture(u_prev, zoom(v_uv, zoomFrom)),
+		texture(u_next, zoom(v_uv, zoomTo)),
+		crossfade
+	);
+}`;
+var compileShader = (gl, source, type) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create shader");
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Failed to compile shader: ${log}`);
+  }
+  return shader;
+};
+var createProgram = (gl) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  const vs = compileShader(gl, VERTEX_SHADER, gl.VERTEX_SHADER);
+  const fs = compileShader(gl, FRAGMENT_SHADER, gl.FRAGMENT_SHADER);
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Failed to link program: ${log}`);
+  }
+  return program;
+};
+var createTexture = (gl) => {
+  const tex = gl.createTexture();
+  if (!tex) {
+    throw new Error("Failed to create texture");
+  }
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  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, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+  return tex;
+};
+var zoomInOutShader = (canvas) => {
+  const gl = canvas.getContext("webgl2", { premultipliedAlpha: true });
+  if (!gl) {
+    throw new Error("Failed to create WebGL2 context");
+  }
+  const program = createProgram(gl);
+  const prevTex = createTexture(gl);
+  const nextTex = createTexture(gl);
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  const aPos = gl.getAttribLocation(program, "a_pos");
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+  const uTime = gl.getUniformLocation(program, "u_time");
+  const uPrev = gl.getUniformLocation(program, "u_prev");
+  const uNext = gl.getUniformLocation(program, "u_next");
+  const cleanup = () => {
+    gl.deleteProgram(program);
+    gl.deleteTexture(prevTex);
+    gl.deleteTexture(nextTex);
+  };
+  const clear = () => {
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  };
+  const draw = ({
+    prevImage,
+    nextImage,
+    width,
+    height,
+    time
+  }) => {
+    if (!prevImage && !nextImage) {
+      return;
+    }
+    if (prevImage && (prevImage.width === 0 || prevImage.height === 0)) {
+      return;
+    }
+    if (nextImage && (nextImage.width === 0 || nextImage.height === 0)) {
+      return;
+    }
+    const effectiveTime = !prevImage ? 0 : !nextImage ? 1 : time;
+    gl.viewport(0, 0, width, height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    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);
+    }
+    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);
+    }
+    gl.uniform1i(uNext, 1);
+    gl.uniform1f(uTime, effectiveTime);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  };
+  return {
+    clear,
+    cleanup,
+    draw
+  };
+};
+var zoomInOut = makeHtmlInCanvasPresentation(zoomInOutShader);
+export {
+  zoomInOutShader,
+  zoomInOut
+};

package/dist/html-in-canvas-presentation.d.ts

@@ -1,23 +1,24 @@
 import { type EffectsProp } from 'remotion';
 import type { TransitionPresentation, TransitionPresentationComponentProps } from './types';
 export declare const HtmlInCanvasPresentation: <TPassedProps extends Record<string, unknown>>({ children, onElementImage, onUnmount, presentationProgress, presentationDirection, shader, _experimentalEffects, passedProps, bothEnteringAndExiting, }: TransitionPresentationComponentProps<TPassedProps> & {
-    readonly shader: () => HtmlInCanvasShader<TPassedProps>;
+    readonly shader: HtmlInCanvasShader<TPassedProps>;
     readonly _experimentalEffects?: EffectsProp | undefined;
 }) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
-export type HtmlInCanvasShader<TPassedProps> = {
-    init: (canvas: OffscreenCanvas) => void;
+export type HtmlInCanvasShaderDrawParams<Props> = {
+    prevImage: ElementImage | null;
+    nextImage: ElementImage | null;
+    width: number;
+    height: number;
+    time: number;
+    passedProps: Props;
+};
+export type HtmlInCanvasShaderDraw<Props> = (params: HtmlInCanvasShaderDrawParams<Props>) => void;
+export type HtmlInCanvasShader<Props> = (canvas: OffscreenCanvas) => {
     clear: () => void;
-    draw: (params: {
-        prevImage: ElementImage | null;
-        nextImage: ElementImage | null;
-        width: number;
-        height: number;
-        time: number;
-        passedProps: TPassedProps;
-    }) => void;
     cleanup: () => void;
+    draw: HtmlInCanvasShaderDraw<Props>;
 };
-export declare const makeHtmlInCanvasPresentation: <TPassedProps extends Record<string, unknown>>(shader: () => HtmlInCanvasShader<TPassedProps>) => (props: TPassedProps & {
+export declare const makeHtmlInCanvasPresentation: <TPassedProps extends Record<string, unknown>>(shader: HtmlInCanvasShader<TPassedProps>) => (props: TPassedProps & {
     _experimentalEffects?: EffectsProp | undefined;
 }) => TransitionPresentation<TPassedProps & {
     _experimentalEffects?: EffectsProp | undefined;

package/dist/html-in-canvas-presentation.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const remotion_2 = require("remotion");
 const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, presentationProgress, presentationDirection, shader, _experimentalEffects, passedProps, bothEnteringAndExiting, }) => {
-    if (!remotion_1.HtmlInCanvas.isHtmlInCanvasSupported()) {
+    if (!remotion_1.HtmlInCanvas.isSupported()) {
         throw new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.');
     }
     const canvasRef = (0, react_1.useRef)(null);
@@ -29,9 +29,8 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
     frameRef.current = frame;
     const effectsRef = (0, react_1.useRef)(_experimentalEffects);
     effectsRef.current = _experimentalEffects;
-    const [instance] = (0, react_1.useState)(() => shader());
+    const [instance] = (0, react_1.useState)(() => shader(offscreenCanvas));
     (0, react_1.useLayoutEffect)(() => {
-        instance.init(offscreenCanvas);
         return () => {
             instance.cleanup();
         };

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export { springTiming } from './timings/spring-timing.js';
 export { TransitionSeries } from './TransitionSeries.js';
 export { TransitionPresentation, TransitionPresentationComponentProps, TransitionSeriesOverlayProps, TransitionTiming, } from './types.js';
 export { TransitionState, useTransitionProgress, } from './use-transition-progress.js';
+export { HtmlInCanvasShader, HtmlInCanvasShaderDraw, HtmlInCanvasShaderDrawParams, makeHtmlInCanvasPresentation, } from './html-in-canvas-presentation.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
+exports.makeHtmlInCanvasPresentation = exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
 // Timings
 const linear_timing_js_1 = require("./timings/linear-timing.js");
 Object.defineProperty(exports, "linearTiming", { enumerable: true, get: function () { return linear_timing_js_1.linearTiming; } });
@@ -12,3 +12,6 @@ Object.defineProperty(exports, "TransitionSeries", { enumerable: true, get: func
 // Hooks
 const use_transition_progress_js_1 = require("./use-transition-progress.js");
 Object.defineProperty(exports, "useTransitionProgress", { enumerable: true, get: function () { return use_transition_progress_js_1.useTransitionProgress; } });
+// HTML-in-canvas
+const html_in_canvas_presentation_js_1 = require("./html-in-canvas-presentation.js");
+Object.defineProperty(exports, "makeHtmlInCanvasPresentation", { enumerable: true, get: function () { return html_in_canvas_presentation_js_1.makeHtmlInCanvasPresentation; } });

package/dist/presentations/zoom-blur.d.ts

@@ -1,8 +1,11 @@
-import type { HtmlInCanvasShader } from '../html-in-canvas-presentation';
 export type ZoomBlurProps = {
     rotation?: number;
 };
-export declare const zoomBlurShader: () => HtmlInCanvasShader<ZoomBlurProps>;
+export declare const zoomBlurShader: (canvas: OffscreenCanvas) => {
+    clear: () => void;
+    cleanup: () => void;
+    draw: import("..").HtmlInCanvasShaderDraw<ZoomBlurProps>;
+};
 export declare const zoomBlur: (props: ZoomBlurProps & {
     _experimentalEffects?: import("remotion").EffectsProp | undefined;
 }) => import("..").TransitionPresentation<ZoomBlurProps & {

package/dist/presentations/zoom-blur.js

@@ -110,61 +110,38 @@ const createTexture = (gl) => {
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
     return tex;
 };
-const zoomBlurShader = () => {
-    let state = null;
-    const init = (canvas) => {
-        const gl = canvas.getContext('webgl2', { premultipliedAlpha: true });
-        if (!gl) {
-            return () => { };
-        }
-        const program = createProgram(gl);
-        const prevTex = createTexture(gl);
-        const nextTex = createTexture(gl);
-        const vao = gl.createVertexArray();
-        gl.bindVertexArray(vao);
-        const buffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-        const aPos = gl.getAttribLocation(program, 'a_pos');
-        gl.enableVertexAttribArray(aPos);
-        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
-        state = {
-            gl,
-            program,
-            prevTex,
-            nextTex,
-            uTime: gl.getUniformLocation(program, 'u_time'),
-            uPrev: gl.getUniformLocation(program, 'u_prev'),
-            uNext: gl.getUniformLocation(program, 'u_next'),
-            uAspect: gl.getUniformLocation(program, 'u_aspect'),
-            uMaxAngle: gl.getUniformLocation(program, 'u_max_angle'),
-        };
-        return () => { };
-    };
+const zoomBlurShader = (canvas) => {
+    const gl = canvas.getContext('webgl2', { premultipliedAlpha: true });
+    if (!gl) {
+        throw new Error('Failed to create WebGL2 context');
+    }
+    const program = createProgram(gl);
+    const prevTex = createTexture(gl);
+    const nextTex = createTexture(gl);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, 'a_pos');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    const uTime = gl.getUniformLocation(program, 'u_time');
+    const uPrev = gl.getUniformLocation(program, 'u_prev');
+    const uNext = gl.getUniformLocation(program, 'u_next');
+    const uAspect = gl.getUniformLocation(program, 'u_aspect');
+    const uMaxAngle = gl.getUniformLocation(program, 'u_max_angle');
     const cleanup = () => {
-        if (!state) {
-            throw new Error('Zoom blur state not initialized');
-        }
-        const { gl, program, prevTex, nextTex } = state;
         gl.deleteProgram(program);
         gl.deleteTexture(prevTex);
         gl.deleteTexture(nextTex);
-        state = null;
     };
     const clear = () => {
-        if (!state) {
-            throw new Error('Zoom blur state not initialized');
-        }
-        const { gl } = state;
         gl.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
     };
     const draw = ({ prevImage, nextImage, width, height, time, passedProps, }) => {
-        if (!state) {
-            throw new Error('Zoom blur state not initialized');
-        }
         const { rotation = Math.PI / 6 } = passedProps;
-        const { gl, program, prevTex, nextTex, uTime, uPrev, uNext, uAspect, uMaxAngle, } = state;
         if (!prevImage && !nextImage) {
             return;
         }
@@ -200,10 +177,9 @@ const zoomBlurShader = () => {
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     };
     return {
-        init,
         clear,
-        draw,
         cleanup,
+        draw,
     };
 };
 exports.zoomBlurShader = zoomBlurShader;

package/dist/presentations/zoom-in-out.d.ts

@@ -0,0 +1,11 @@
+export type ZoomInOutProps = Record<string, never>;
+export declare const zoomInOutShader: (canvas: OffscreenCanvas) => {
+    clear: () => void;
+    cleanup: () => void;
+    draw: import("..").HtmlInCanvasShaderDraw<ZoomInOutProps>;
+};
+export declare const zoomInOut: (props: ZoomInOutProps & {
+    _experimentalEffects?: import("remotion").EffectsProp | undefined;
+}) => import("..").TransitionPresentation<ZoomInOutProps & {
+    _experimentalEffects?: import("remotion").EffectsProp | undefined;
+}>;

package/dist/presentations/zoom-in-out.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zoomInOut = exports.zoomInOutShader = void 0;
+const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_pos;
+out vec2 v_uv;
+void main() {
+	v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);
+	gl_Position = vec4(a_pos, 0.0, 1.0);
+}`;
+// Adapted from https://gl-transitions.com/editor/zoomInOut
+// Author: OllyOllyOlly · License: MIT
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D u_prev;
+uniform sampler2D u_next;
+uniform float u_time;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+vec2 zoom(vec2 uv, float amount) {
+	return 0.5 + ((uv - 0.5) * (1.0 - amount));
+}
+
+void main() {
+	float progress = 1.0 - u_time;
+	float zoomFrom = smoothstep(0.0, 1.0, progress * 2.0);
+	float zoomTo = smoothstep(0.0, 1.0, (1.0 - progress) * 2.0);
+	float crossfade = smoothstep(0.4, 0.6, progress);
+	outColor = mix(
+		texture(u_prev, zoom(v_uv, zoomFrom)),
+		texture(u_next, zoom(v_uv, zoomTo)),
+		crossfade
+	);
+}`;
+const compileShader = (gl, source, type) => {
+    const shader = gl.createShader(type);
+    if (!shader) {
+        throw new Error('Failed to create shader');
+    }
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`Failed to compile shader: ${log}`);
+    }
+    return shader;
+};
+const createProgram = (gl) => {
+    const program = gl.createProgram();
+    if (!program) {
+        throw new Error('Failed to create WebGL program');
+    }
+    const vs = compileShader(gl, VERTEX_SHADER, gl.VERTEX_SHADER);
+    const fs = compileShader(gl, FRAGMENT_SHADER, gl.FRAGMENT_SHADER);
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`Failed to link program: ${log}`);
+    }
+    return program;
+};
+const createTexture = (gl) => {
+    const tex = gl.createTexture();
+    if (!tex) {
+        throw new Error('Failed to create texture');
+    }
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    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, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+    return tex;
+};
+const zoomInOutShader = (canvas) => {
+    const gl = canvas.getContext('webgl2', { premultipliedAlpha: true });
+    if (!gl) {
+        throw new Error('Failed to create WebGL2 context');
+    }
+    const program = createProgram(gl);
+    const prevTex = createTexture(gl);
+    const nextTex = createTexture(gl);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, 'a_pos');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    const uTime = gl.getUniformLocation(program, 'u_time');
+    const uPrev = gl.getUniformLocation(program, 'u_prev');
+    const uNext = gl.getUniformLocation(program, 'u_next');
+    const cleanup = () => {
+        gl.deleteProgram(program);
+        gl.deleteTexture(prevTex);
+        gl.deleteTexture(nextTex);
+    };
+    const clear = () => {
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    };
+    const draw = ({ prevImage, nextImage, width, height, time, }) => {
+        if (!prevImage && !nextImage) {
+            return;
+        }
+        if (prevImage && (prevImage.width === 0 || prevImage.height === 0)) {
+            return;
+        }
+        if (nextImage && (nextImage.width === 0 || nextImage.height === 0)) {
+            return;
+        }
+        // When one side is missing, force the mix to fully show the other.
+        // At time=0 the shader outputs nextImage. At time=1 the shader outputs prevImage.
+        const effectiveTime = !prevImage ? 0 : !nextImage ? 1 : time;
+        gl.viewport(0, 0, width, height);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(program);
+        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);
+        }
+        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);
+        }
+        gl.uniform1i(uNext, 1);
+        gl.uniform1f(uTime, effectiveTime);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    };
+    return {
+        clear,
+        cleanup,
+        draw,
+    };
+};
+exports.zoomInOutShader = zoomInOutShader;
+exports.zoomInOut = (0, html_in_canvas_presentation_1.makeHtmlInCanvasPresentation)(exports.zoomInOutShader);

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.456",
+	"version": "4.0.458",
 	"description": "Library for creating transitions in Remotion",
 	"sideEffects": false,
 	"main": "dist/esm/index.mjs",
@@ -23,18 +23,18 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.456",
-		"@remotion/shapes": "4.0.456",
-		"@remotion/paths": "4.0.456"
+		"remotion": "4.0.458",
+		"@remotion/shapes": "4.0.458",
+		"@remotion/paths": "4.0.458"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.456",
+		"remotion": "4.0.458",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.456",
-		"@remotion/player": "4.0.456",
-		"@remotion/eslint-config-internal": "4.0.456",
+		"@remotion/test-utils": "4.0.458",
+		"@remotion/player": "4.0.458",
+		"@remotion/eslint-config-internal": "4.0.458",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -92,6 +92,12 @@
 			"import": "./dist/esm/zoom-blur.mjs",
 			"require": "./dist/presentations/zoom-blur.js"
 		},
+		"./zoom-in-out": {
+			"types": "./dist/presentations/zoom-in-out.d.ts",
+			"module": "./dist/esm/zoom-in-out.mjs",
+			"import": "./dist/esm/zoom-in-out.mjs",
+			"require": "./dist/presentations/zoom-in-out.js"
+		},
 		"./none": {
 			"types": "./dist/presentations/none.d.ts",
 			"module": "./dist/esm/none.mjs",
@@ -131,6 +137,9 @@
 			],
 			"zoom-blur": [
 				"dist/presentations/zoom-blur.d.ts"
+			],
+			"zoom-in-out": [
+				"dist/presentations/zoom-in-out.d.ts"
 			]
 		}
 	},

package/zoom-in-out.js

@@ -0,0 +1,2 @@
+// For backwards compatibility when you use `esm-wallaby`
+module.exports = require('./dist/presentations/zoom-in-out.js');