@remotion/transitions 4.0.454 → 4.0.455

package/dist/TransitionSeries.d.ts

@@ -15,6 +15,7 @@ type SeriesSequenceProps = PropsWithChildren<{
     readonly stack?: string;
 } & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => import("react/jsx-runtime").JSX.Element;
+export type DrawFunction = (prevImage: ElementImage | null, nextImage: ElementImage | null, progress: number) => void;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
     Sequence: typeof SeriesSequence;
     Transition: typeof TransitionSeriesTransition;

package/dist/TransitionSeries.js

@@ -22,10 +22,44 @@ const SeriesSequence = ({ children }) => {
 const TransitionSeriesChildren = ({ children, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const frame = (0, remotion_1.useCurrentFrame)();
+    const prevImageRef = (0, react_1.useRef)({});
+    const nextImageRef = (0, react_1.useRef)({});
+    const flattedChildren = (0, react_1.useMemo)(() => {
+        return (0, flatten_children_js_1.flattenChildren)(children);
+    }, [children]);
+    const drawIfSynced = (0, react_1.useCallback)((index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _j, _k, _l, _m, _o, _p;
+        const prevImage = (_a = prevImageRef === null || prevImageRef === void 0 ? void 0 : prevImageRef.current) === null || _a === void 0 ? void 0 : _a[index];
+        const nextImage = (_b = nextImageRef === null || nextImageRef === void 0 ? void 0 : nextImageRef.current) === null || _b === void 0 ? void 0 : _b[index];
+        if (!(nextImage === null || nextImage === void 0 ? void 0 : nextImage.elementImage) && (prevImage === null || prevImage === void 0 ? void 0 : prevImage.elementImage)) {
+            (_c = nextImage === null || nextImage === void 0 ? void 0 : nextImage.draw) === null || _c === void 0 ? void 0 : _c.call(nextImage, null, null, 0);
+            (_d = prevImage === null || prevImage === void 0 ? void 0 : prevImage.draw) === null || _d === void 0 ? void 0 : _d.call(prevImage, (_j = prevImage === null || prevImage === void 0 ? void 0 : prevImage.elementImage) !== null && _j !== void 0 ? _j : null, null, 0);
+            return;
+        }
+        if (!(prevImage === null || prevImage === void 0 ? void 0 : prevImage.elementImage) && (nextImage === null || nextImage === void 0 ? void 0 : nextImage.elementImage)) {
+            (_e = prevImage === null || prevImage === void 0 ? void 0 : prevImage.draw) === null || _e === void 0 ? void 0 : _e.call(prevImage, null, null, 0);
+            (_f = nextImage === null || nextImage === void 0 ? void 0 : nextImage.draw) === null || _f === void 0 ? void 0 : _f.call(nextImage, null, (_k = nextImage === null || nextImage === void 0 ? void 0 : nextImage.elementImage) !== null && _k !== void 0 ? _k : null, 0);
+            return;
+        }
+        if ((prevImage && nextImage && prevImage.progress === nextImage.progress) ||
+            !(prevImage === null || prevImage === void 0 ? void 0 : prevImage.elementImage) ||
+            !(nextImage === null || nextImage === void 0 ? void 0 : nextImage.elementImage)) {
+            (_g = prevImage === null || prevImage === void 0 ? void 0 : prevImage.draw) === null || _g === void 0 ? void 0 : _g.call(prevImage, (_l = prevImage === null || prevImage === void 0 ? void 0 : prevImage.elementImage) !== null && _l !== void 0 ? _l : null, (_m = nextImage === null || nextImage === void 0 ? void 0 : nextImage.elementImage) !== null && _m !== void 0 ? _m : null, (_p = (_o = prevImage === null || prevImage === void 0 ? void 0 : prevImage.progress) !== null && _o !== void 0 ? _o : nextImage === null || nextImage === void 0 ? void 0 : nextImage.progress) !== null && _p !== void 0 ? _p : 0);
+            (_h = nextImage === null || nextImage === void 0 ? void 0 : nextImage.draw) === null || _h === void 0 ? void 0 : _h.call(nextImage, null, null, 0);
+        }
+    }, []);
+    const onNextElementImage = (0, react_1.useCallback)((elementImage, progress, draw, index) => {
+        prevImageRef.current[index] = { elementImage, progress, draw };
+        drawIfSynced(index);
+    }, [drawIfSynced]);
+    const onPrevElementImage = (0, react_1.useCallback)((elementImage, progress, draw, index) => {
+        nextImageRef.current[index] = { elementImage, progress, draw };
+        drawIfSynced(index);
+    }, [drawIfSynced]);
     const childrenValue = (0, react_1.useMemo)(() => {
         let transitionOffsets = 0;
         let startFrame = 0;
-        const flattedChildren = (0, flatten_children_js_1.flattenChildren)(children);
         // Collect overlay render info to emit after the main loop
         const overlayRenders = [];
         // Track sequence durations for overlay validation
@@ -209,21 +243,35 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const UppercasePrevPresentation = prevPresentation.component;
                 return (jsx_runtime_1.jsx(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_e = nextPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
+                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_e = nextPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: () => {
+                            throw new Error('Should not call when exiting');
+                        }, onUnmount: () => {
+                            throw new Error('Should not call when exiting');
+                        }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => {
+                                    onPrevElementImage(elementImage, nextProgress, draw, i + 1);
+                                    onNextElementImage(elementImage, prevProgress, draw, i - 1);
+                                }, onUnmount: () => {
+                                    onPrevElementImage(null, null, null, i + 1);
+                                    onNextElementImage(null, null, null, i - 1);
+                                }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
             }
             if (prevProgress !== null && prev) {
                 const prevPresentation = (_g = prev.props.presentation) !== null && _g !== void 0 ? _g : (0, slide_js_1.slide)();
                 const UppercasePrevPresentation = prevPresentation.component;
                 return (jsx_runtime_1.jsx(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_h = prevPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
+                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_h = prevPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1), onUnmount: () => {
+                            onNextElementImage(null, null, null, i - 1);
+                        }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
             }
             if (nextProgress !== null && next) {
                 const nextPresentation = (_j = next.props.presentation) !== null && _j !== void 0 ? _j : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
                 return (jsx_runtime_1.jsx(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_k = nextPresentation.props) !== null && _k !== void 0 ? _k : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
+                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_k = nextPresentation.props) !== null && _k !== void 0 ? _k : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1), onUnmount: () => {
+                            onPrevElementImage(null, null, null, i + 1);
+                        }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
             }
             return (jsx_runtime_1.jsx(remotion_1.Sequence
             // eslint-disable-next-line react/no-array-index-key
@@ -235,7 +283,7 @@ const TransitionSeriesChildren = ({ children, }) => {
             return (jsx_runtime_1.jsx(remotion_1.Sequence, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", layout: "absolute-fill", ...(info.stack ? { stack: info.stack } : {}), children: info.children }, `overlay-${info.index}`));
         });
         return [...(mainChildren || []), ...overlayElements];
-    }, [children, fps, frame]);
+    }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: childrenValue });
 };

package/dist/esm/index.mjs

@@ -123,7 +123,7 @@ var springTiming = (options = {}) => {
   };
 };
 // src/TransitionSeries.tsx
-import { Children, useMemo as useMemo3 } from "react";
+import { Children, useCallback, useMemo as useMemo3, useRef } from "react";
 import { Internals, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
 import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
 
@@ -190,10 +190,40 @@ var TransitionSeriesChildren = ({
 }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
+  const prevImageRef = useRef({});
+  const nextImageRef = useRef({});
+  const flattedChildren = useMemo3(() => {
+    return flattenChildren(children);
+  }, [children]);
+  const drawIfSynced = useCallback((index) => {
+    const prevImage = prevImageRef?.current?.[index];
+    const nextImage = nextImageRef?.current?.[index];
+    if (!nextImage?.elementImage && prevImage?.elementImage) {
+      nextImage?.draw?.(null, null, 0);
+      prevImage?.draw?.(prevImage?.elementImage ?? null, null, 0);
+      return;
+    }
+    if (!prevImage?.elementImage && nextImage?.elementImage) {
+      prevImage?.draw?.(null, null, 0);
+      nextImage?.draw?.(null, nextImage?.elementImage ?? null, 0);
+      return;
+    }
+    if (prevImage && nextImage && prevImage.progress === nextImage.progress || !prevImage?.elementImage || !nextImage?.elementImage) {
+      prevImage?.draw?.(prevImage?.elementImage ?? null, nextImage?.elementImage ?? null, prevImage?.progress ?? nextImage?.progress ?? 0);
+      nextImage?.draw?.(null, null, 0);
+    }
+  }, []);
+  const onNextElementImage = useCallback((elementImage, progress, draw, index) => {
+    prevImageRef.current[index] = { elementImage, progress, draw };
+    drawIfSynced(index);
+  }, [drawIfSynced]);
+  const onPrevElementImage = useCallback((elementImage, progress, draw, index) => {
+    nextImageRef.current[index] = { elementImage, progress, draw };
+    drawIfSynced(index);
+  }, [drawIfSynced]);
   const childrenValue = useMemo3(() => {
     let transitionOffsets = 0;
     let startFrame = 0;
-    const flattedChildren = flattenChildren(children);
     const overlayRenders = [];
     const sequenceDurations = [];
     let pendingOverlayValidation = false;
@@ -352,6 +382,13 @@ var TransitionSeriesChildren = ({
             presentationDirection: "exiting",
             presentationProgress: nextProgress,
             presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
+            onElementImage: () => {
+              throw new Error("Should not call when exiting");
+            },
+            onUnmount: () => {
+              throw new Error("Should not call when exiting");
+            },
+            bothEnteringAndExiting: true,
             children: /* @__PURE__ */ jsx3(WrapInExitingProgressContext, {
               presentationProgress: nextProgress,
               children: /* @__PURE__ */ jsx3(UppercasePrevPresentation, {
@@ -359,6 +396,15 @@ var TransitionSeriesChildren = ({
                 presentationDirection: "entering",
                 presentationProgress: prevProgress,
                 presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
+                onElementImage: (elementImage, draw) => {
+                  onPrevElementImage(elementImage, nextProgress, draw, i + 1);
+                  onNextElementImage(elementImage, prevProgress, draw, i - 1);
+                },
+                onUnmount: () => {
+                  onPrevElementImage(null, null, null, i + 1);
+                  onNextElementImage(null, null, null, i - 1);
+                },
+                bothEnteringAndExiting: true,
                 children: /* @__PURE__ */ jsx3(WrapInEnteringProgressContext, {
                   presentationProgress: prevProgress,
                   children: child
@@ -381,6 +427,11 @@ var TransitionSeriesChildren = ({
             presentationDirection: "entering",
             presentationProgress: prevProgress,
             presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
+            onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1),
+            onUnmount: () => {
+              onNextElementImage(null, null, null, i - 1);
+            },
+            bothEnteringAndExiting: false,
             children: /* @__PURE__ */ jsx3(WrapInEnteringProgressContext, {
               presentationProgress: prevProgress,
               children: child
@@ -401,6 +452,11 @@ var TransitionSeriesChildren = ({
             presentationDirection: "exiting",
             presentationProgress: nextProgress,
             presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
+            onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1),
+            onUnmount: () => {
+              onPrevElementImage(null, null, null, i + 1);
+            },
+            bothEnteringAndExiting: false,
             children: /* @__PURE__ */ jsx3(WrapInExitingProgressContext, {
               presentationProgress: nextProgress,
               children: child
@@ -428,7 +484,7 @@ var TransitionSeriesChildren = ({
       }, `overlay-${info.index}`);
     });
     return [...mainChildren || [], ...overlayElements];
-  }, [children, fps, frame]);
+  }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
   return /* @__PURE__ */ jsx3(Fragment, {
     children: childrenValue
   });
@@ -455,10 +511,10 @@ Internals.addSequenceStackTraces(TransitionSeries);
 Internals.addSequenceStackTraces(SeriesSequence);
 Internals.addSequenceStackTraces(SeriesOverlay);
 // src/use-transition-progress.ts
-import React4 from "react";
+import React5 from "react";
 var useTransitionProgress = () => {
-  const entering = React4.useContext(EnteringContext);
-  const exiting = React4.useContext(ExitingContext);
+  const entering = React5.useContext(EnteringContext);
+  const exiting = React5.useContext(ExitingContext);
   if (!entering && !exiting) {
     return {
       isInTransitionSeries: false,

package/dist/esm/zoom-blur.mjs

@@ -0,0 +1,395 @@
+// 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.isHtmlInCanvasSupported()) {
+    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());
+  useLayoutEffect(() => {
+    instance.init(offscreenCanvas);
+    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-blur.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;
+uniform float u_aspect;
+uniform float u_max_angle;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+const int SAMPLES = 16;
+const float STRENGTH = 0.35;
+
+vec2 transformUV(vec2 uv, float angle, float scale) {
+	vec2 p = uv - 0.5;
+	p.x *= u_aspect;
+	p /= scale;
+	float c = cos(-angle);
+	float s = sin(-angle);
+	p = vec2(p.x * c - p.y * s, p.x * s + p.y * c);
+	p.x /= u_aspect;
+	return p + 0.5;
+}
+
+float coverScale(float angle) {
+	float c = abs(cos(angle));
+	float s = abs(sin(angle));
+	float ar = max(u_aspect, 1.0 / u_aspect);
+	return c + ar * s;
+}
+
+vec4 zoomBlur(sampler2D tex, vec2 uv, float strength) {
+	vec2 dir = uv - 0.5;
+	vec4 acc = vec4(0.0);
+	for (int i = 0; i < SAMPLES; i++) {
+		float t = float(i) / float(SAMPLES - 1);
+		float scale = 1.0 - strength * t;
+		acc += texture(tex, 0.5 + dir * scale);
+	}
+	return acc / float(SAMPLES);
+}
+
+void main() {
+	float mixT = u_time;
+
+	float nextAngle = u_max_angle * mixT;
+	float prevAngle = -u_max_angle * (1.0 - mixT);
+
+	vec2 prevUV = transformUV(v_uv, prevAngle, coverScale(prevAngle));
+	vec2 nextUV = transformUV(v_uv, nextAngle, coverScale(nextAngle));
+
+	vec4 prev = zoomBlur(u_prev, prevUV, STRENGTH * (1.0 - mixT));
+	vec4 next = zoomBlur(u_next, nextUV, STRENGTH * mixT);
+	outColor = mix(prev, next, (1.0 - mixT));
+}`;
+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 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 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;
+    }
+    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.uniform1f(uAspect, width / height);
+    gl.uniform1f(uMaxAngle, rotation);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  };
+  return {
+    init,
+    clear,
+    draw,
+    cleanup
+  };
+};
+var zoomBlur = makeHtmlInCanvasPresentation(zoomBlurShader);
+export {
+  zoomBlurShader,
+  zoomBlur
+};

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

@@ -0,0 +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 _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;
+    clear: () => void;
+    draw: (params: {
+        prevImage: ElementImage | null;
+        nextImage: ElementImage | null;
+        width: number;
+        height: number;
+        time: number;
+        passedProps: TPassedProps;
+    }) => void;
+    cleanup: () => void;
+};
+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

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeHtmlInCanvasPresentation = exports.HtmlInCanvasPresentation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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()) {
+        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);
+    const canvasSubtreeStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+        };
+    }, []);
+    const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
+    const passedPropsRef = (0, react_1.useRef)(passedProps);
+    passedPropsRef.current = passedProps;
+    const frame = (0, remotion_2.useCurrentFrame)();
+    const frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
+    const effectsRef = (0, react_1.useRef)(_experimentalEffects);
+    effectsRef.current = _experimentalEffects;
+    const [instance] = (0, react_1.useState)(() => shader());
+    (0, react_1.useLayoutEffect)(() => {
+        instance.init(offscreenCanvas);
+        return () => {
+            instance.cleanup();
+        };
+    }, [offscreenCanvas, instance]);
+    const chainState = remotion_2.Internals.useEffectChainState();
+    const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
+    const draw = (0, react_1.useCallback)(async (prevImage, nextImage, progress) => {
+        var _a, _b, _c, _d, _e;
+        if (!canvasRef.current) {
+            throw new Error('Canvas not found');
+        }
+        const handle = delayRender('onPaint');
+        if (!prevImage && !nextImage) {
+            continueRender(handle);
+            instance.clear();
+            return;
+        }
+        const width = (_b = (_a = prevImage === null || prevImage === void 0 ? void 0 : prevImage.width) !== null && _a !== void 0 ? _a : nextImage === null || nextImage === void 0 ? void 0 : nextImage.width) !== null && _b !== void 0 ? _b : 0;
+        const height = (_d = (_c = prevImage === null || prevImage === void 0 ? void 0 : prevImage.height) !== null && _c !== void 0 ? _c : nextImage === null || nextImage === void 0 ? void 0 : nextImage.height) !== null && _d !== void 0 ? _d : 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 remotion_2.Internals.runEffectChain({
+            state: chainState.get(width, height),
+            source: offscreenCanvas,
+            effects: (_e = effectsRef.current) !== null && _e !== void 0 ? _e : [],
+            frame: frameRef.current,
+            width,
+            height,
+            output: canvasRef.current,
+        });
+        continueRender(handle);
+    }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+    const passThrough = bothEnteringAndExiting && presentationDirection === 'exiting';
+    (0, react_1.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]);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (passThrough) {
+            return;
+        }
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            throw new Error('Canvas not found');
+        }
+        (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
+    }, [presentationProgress, passThrough]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (passThrough) {
+            return;
+        }
+        return () => {
+            onUnmount();
+        };
+    }, [onUnmount, passThrough]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (passThrough) {
+            return;
+        }
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        // Size the canvas grid to match the device scale factor to prevent blurriness.
+        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 (jsx_runtime_1.jsx(remotion_2.AbsoluteFill, { children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, style: canvasSubtreeStyle, children: children }) }));
+};
+exports.HtmlInCanvasPresentation = HtmlInCanvasPresentation;
+const makeHtmlInCanvasPresentation = (shader) => {
+    const CompWithShader = (props) => {
+        const { passedProps, ...otherProps } = props;
+        const { _experimentalEffects, ...restPassedProps } = props.passedProps;
+        return (jsx_runtime_1.jsx(exports.HtmlInCanvasPresentation, { shader: shader, passedProps: restPassedProps, _experimentalEffects: _experimentalEffects, ...otherProps }));
+    };
+    return (props) => {
+        return {
+            component: CompWithShader,
+            props,
+        };
+    };
+};
+exports.makeHtmlInCanvasPresentation = makeHtmlInCanvasPresentation;

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

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

package/dist/presentations/zoom-blur.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zoomBlur = exports.zoomBlurShader = 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);
+}`;
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D u_prev;
+uniform sampler2D u_next;
+uniform float u_time;
+uniform float u_aspect;
+uniform float u_max_angle;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+const int SAMPLES = 16;
+const float STRENGTH = 0.35;
+
+vec2 transformUV(vec2 uv, float angle, float scale) {
+	vec2 p = uv - 0.5;
+	p.x *= u_aspect;
+	p /= scale;
+	float c = cos(-angle);
+	float s = sin(-angle);
+	p = vec2(p.x * c - p.y * s, p.x * s + p.y * c);
+	p.x /= u_aspect;
+	return p + 0.5;
+}
+
+float coverScale(float angle) {
+	float c = abs(cos(angle));
+	float s = abs(sin(angle));
+	float ar = max(u_aspect, 1.0 / u_aspect);
+	return c + ar * s;
+}
+
+vec4 zoomBlur(sampler2D tex, vec2 uv, float strength) {
+	vec2 dir = uv - 0.5;
+	vec4 acc = vec4(0.0);
+	for (int i = 0; i < SAMPLES; i++) {
+		float t = float(i) / float(SAMPLES - 1);
+		float scale = 1.0 - strength * t;
+		acc += texture(tex, 0.5 + dir * scale);
+	}
+	return acc / float(SAMPLES);
+}
+
+void main() {
+	float mixT = u_time;
+
+	float nextAngle = u_max_angle * mixT;
+	float prevAngle = -u_max_angle * (1.0 - mixT);
+
+	vec2 prevUV = transformUV(v_uv, prevAngle, coverScale(prevAngle));
+	vec2 nextUV = transformUV(v_uv, nextAngle, coverScale(nextAngle));
+
+	vec4 prev = zoomBlur(u_prev, prevUV, STRENGTH * (1.0 - mixT));
+	vec4 next = zoomBlur(u_next, nextUV, STRENGTH * mixT);
+	outColor = mix(prev, next, (1.0 - mixT));
+}`;
+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 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 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;
+        }
+        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 (and nextAngle = 0).
+        // At time=1 the shader outputs prevImage (and prevAngle = 0).
+        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.uniform1f(uAspect, width / height);
+        gl.uniform1f(uMaxAngle, rotation);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    };
+    return {
+        init,
+        clear,
+        draw,
+        cleanup,
+    };
+};
+exports.zoomBlurShader = zoomBlurShader;
+exports.zoomBlur = (0, html_in_canvas_presentation_1.makeHtmlInCanvasPresentation)(exports.zoomBlurShader);

package/dist/types.d.ts

@@ -1,4 +1,6 @@
 import type { ComponentType } from 'react';
+import type React from 'react';
+import type { DrawFunction } from './TransitionSeries';
 export type PresentationDirection = 'entering' | 'exiting';
 export type TransitionTiming = {
     getDurationInFrames: (options: {
@@ -24,6 +26,9 @@ export type TransitionPresentationComponentProps<PresentationProps extends Recor
     presentationDirection: PresentationDirection;
     passedProps: PresentationProps;
     presentationDurationInFrames: number;
+    onElementImage: (elementImage: ElementImage, draw: DrawFunction) => void;
+    onUnmount: () => void;
+    bothEnteringAndExiting: boolean;
 };
 export type TransitionSeriesOverlayProps = {
     readonly durationInFrames: number;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.454",
+	"version": "4.0.455",
 	"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.454",
-		"@remotion/shapes": "4.0.454",
-		"@remotion/paths": "4.0.454"
+		"remotion": "4.0.455",
+		"@remotion/shapes": "4.0.455",
+		"@remotion/paths": "4.0.455"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.454",
+		"remotion": "4.0.455",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.454",
-		"@remotion/player": "4.0.454",
-		"@remotion/eslint-config-internal": "4.0.454",
+		"@remotion/test-utils": "4.0.455",
+		"@remotion/player": "4.0.455",
+		"@remotion/eslint-config-internal": "4.0.455",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -86,6 +86,12 @@
 			"import": "./dist/esm/clock-wipe.mjs",
 			"require": "./dist/presentations/clock-wipe.js"
 		},
+		"./zoom-blur": {
+			"types": "./dist/presentations/zoom-blur.d.ts",
+			"module": "./dist/esm/zoom-blur.mjs",
+			"import": "./dist/esm/zoom-blur.mjs",
+			"require": "./dist/presentations/zoom-blur.js"
+		},
 		"./none": {
 			"types": "./dist/presentations/none.d.ts",
 			"module": "./dist/esm/none.mjs",
@@ -122,6 +128,9 @@
 			],
 			"iris": [
 				"dist/presentations/iris.d.ts"
+			],
+			"zoom-blur": [
+				"dist/presentations/zoom-blur.d.ts"
 			]
 		}
 	},

package/zoom-blur.js

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