@remotion/transitions 4.0.464 → 4.0.466

package/dist/esm/index.mjs

@@ -76,6 +76,515 @@ var slide = (props) => {
   };
 };
 
+// src/html-in-canvas-presentation.tsx
+import { useLayoutEffect, useMemo as useMemo2, useRef, useState, useCallback } from "react";
+import {
+  HtmlInCanvas,
+  HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  useDelayRender
+} from "remotion";
+import { AbsoluteFill as AbsoluteFill2, Internals } from "remotion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var HtmlInCanvasPresentation = ({
+  children,
+  onElementImage,
+  onUnmount,
+  presentationProgress,
+  presentationDirection,
+  shader,
+  effects,
+  passedProps,
+  bothEnteringAndExiting
+}) => {
+  if (!HtmlInCanvas.isSupported()) {
+    throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
+  }
+  const canvasRef = useRef(null);
+  const canvasSubtreeStyle = useMemo2(() => {
+    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 memoizedEffects = Internals.useMemoizedEffects({
+    effects: effects ?? [],
+    overrideId: null
+  });
+  const effectsRef = useRef(memoizedEffects);
+  effectsRef.current = memoizedEffects;
+  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 ?? [],
+      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, memoizedEffects]);
+  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__ */ jsx2(AbsoluteFill2, {
+    children: /* @__PURE__ */ jsx2("canvas", {
+      ref: canvasRef,
+      style: canvasSubtreeStyle,
+      children
+    })
+  });
+};
+var makeHtmlInCanvasPresentation = (shader) => {
+  const CompWithShader = (props) => {
+    const { passedProps, ...otherProps } = props;
+    const { effects, ...restPassedProps } = props.passedProps;
+    return /* @__PURE__ */ jsx2(HtmlInCanvasPresentation, {
+      shader,
+      passedProps: restPassedProps,
+      effects,
+      ...otherProps
+    });
+  };
+  return (props) => {
+    return {
+      component: CompWithShader,
+      props
+    };
+  };
+};
+
+// src/presentations/linear-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_intensity;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+const int PASSES = 6;
+
+vec4 transition(vec2 uv, float progress) {
+	vec4 c1 = vec4(0.0);
+	vec4 c2 = vec4(0.0);
+
+	float disp = u_intensity * (0.5 - distance(0.5, progress));
+	for (int xi = 0; xi < PASSES; xi++) {
+		float x = float(xi) / float(PASSES) - 0.5;
+		for (int yi = 0; yi < PASSES; yi++) {
+			float y = float(yi) / float(PASSES) - 0.5;
+			vec2 v = vec2(x, y);
+			c1 += texture(u_prev, uv + disp * v);
+			c2 += texture(u_next, uv + disp * v);
+		}
+	}
+
+	c1 /= float(PASSES * PASSES);
+	c2 /= float(PASSES * PASSES);
+	return mix(c1, c2, progress);
+}
+
+void main() {
+	float progress = 1.0 - u_time;
+	outColor = transition(v_uv, progress);
+}`;
+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 linearBlurShader = (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 uIntensity = gl.getUniformLocation(program, "u_intensity");
+  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,
+    passedProps
+  }) => {
+    const { intensity = 0.1 } = passedProps;
+    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(uIntensity, intensity);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  };
+  return {
+    clear,
+    cleanup,
+    draw
+  };
+};
+var linearBlur = makeHtmlInCanvasPresentation(linearBlurShader);
+
+// src/presentations/dreamy-zoom.tsx
+var DEFAULT_ROTATION = 6;
+var DEFAULT_SCALE = 1.2;
+var VERTEX_SHADER2 = `#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_SHADER2 = `#version 300 es
+precision highp float;
+
+uniform sampler2D u_prev;
+uniform sampler2D u_next;
+uniform float u_time;
+uniform float u_rotation;
+uniform float u_scale;
+uniform float u_ratio;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+const float DEG2RAD = 0.03926990816987241548078304229099;
+
+vec4 transition(vec2 uv, float progress) {
+	float phase = progress < 0.5 ? progress * 2.0 : (progress - 0.5) * 2.0;
+	float angleOffset = progress < 0.5 ? mix(0.0, u_rotation * DEG2RAD, phase) : mix(-u_rotation * DEG2RAD, 0.0, phase);
+	float newScale = progress < 0.5 ? mix(1.0, u_scale, phase) : mix(u_scale, 1.0, phase);
+
+	vec2 center = vec2(0.0, 0.0);
+	vec2 p = (uv.xy - vec2(0.5, 0.5)) / newScale * vec2(u_ratio, 1.0);
+	float angle = atan(p.y, p.x) + angleOffset;
+	float dist = distance(center, p);
+
+	p.x = cos(angle) * dist / u_ratio + 0.5;
+	p.y = sin(angle) * dist + 0.5;
+
+	vec4 c = progress < 0.5 ? texture(u_prev, p) : texture(u_next, p);
+	return c + (progress < 0.5 ? mix(0.0, 1.0, phase) : mix(1.0, 0.0, phase));
+}
+
+void main() {
+	float progress = 1.0 - u_time;
+	outColor = transition(v_uv, progress);
+}`;
+var compileShader2 = (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 createProgram2 = (gl) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  const vs = compileShader2(gl, VERTEX_SHADER2, gl.VERTEX_SHADER);
+  const fs = compileShader2(gl, FRAGMENT_SHADER2, 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 createTexture2 = (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 dreamyZoomShader = (canvas) => {
+  const gl = canvas.getContext("webgl2", { premultipliedAlpha: true });
+  if (!gl) {
+    throw new Error("Failed to create WebGL2 context");
+  }
+  const program = createProgram2(gl);
+  const prevTex = createTexture2(gl);
+  const nextTex = createTexture2(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 uRotation = gl.getUniformLocation(program, "u_rotation");
+  const uScale = gl.getUniformLocation(program, "u_scale");
+  const uRatio = gl.getUniformLocation(program, "u_ratio");
+  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,
+    passedProps
+  }) => {
+    const { rotation = DEFAULT_ROTATION, scale = DEFAULT_SCALE } = passedProps;
+    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(uRotation, rotation);
+    gl.uniform1f(uScale, scale);
+    gl.uniform1f(uRatio, width / height);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  };
+  return {
+    clear,
+    cleanup,
+    draw
+  };
+};
+var dreamyZoom = makeHtmlInCanvasPresentation(dreamyZoomShader);
+
 // src/timings/linear-timing.ts
 import { interpolate } from "remotion";
 var linearTiming = (options) => {
@@ -123,33 +632,33 @@ var springTiming = (options = {}) => {
   };
 };
 // src/TransitionSeries.tsx
-import { Children, useCallback, useMemo as useMemo3, useRef } from "react";
-import { Internals, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import { Children, useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
+import { Internals as Internals2, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
 import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
 
 // src/context.tsx
-import React2, { useMemo as useMemo2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import React2, { useMemo as useMemo3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var EnteringContext = React2.createContext(null);
 var ExitingContext = React2.createContext(null);
 var WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
-  const value = useMemo2(() => {
+  const value = useMemo3(() => {
     return {
       enteringProgress: presentationProgress
     };
   }, [presentationProgress]);
-  return /* @__PURE__ */ jsx2(EnteringContext.Provider, {
+  return /* @__PURE__ */ jsx3(EnteringContext.Provider, {
     value,
     children
   });
 };
 var WrapInExitingProgressContext = ({ presentationProgress, children }) => {
-  const value = useMemo2(() => {
+  const value = useMemo3(() => {
     return {
       exitingProgress: presentationProgress
     };
   }, [presentationProgress]);
-  return /* @__PURE__ */ jsx2(ExitingContext.Provider, {
+  return /* @__PURE__ */ jsx3(ExitingContext.Provider, {
     value,
     children
   });
@@ -173,7 +682,7 @@ import { NoReactInternals } from "remotion/no-react";
 var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
 // src/TransitionSeries.tsx
-import { jsx as jsx3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx4, Fragment } from "react/jsx-runtime";
 var TransitionSeriesTransition = function(_props) {
   return null;
 };
@@ -181,7 +690,7 @@ var SeriesOverlay = () => {
   return null;
 };
 var SeriesSequence = ({ children }) => {
-  return /* @__PURE__ */ jsx3(Fragment, {
+  return /* @__PURE__ */ jsx4(Fragment, {
     children
   });
 };
@@ -190,12 +699,12 @@ var TransitionSeriesChildren = ({
 }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
-  const prevImageRef = useRef({});
-  const nextImageRef = useRef({});
-  const flattedChildren = useMemo3(() => {
+  const prevImageRef = useRef2({});
+  const nextImageRef = useRef2({});
+  const flattedChildren = useMemo4(() => {
     return flattenChildren(children);
   }, [children]);
-  const drawIfSynced = useCallback((index) => {
+  const drawIfSynced = useCallback2((index) => {
     const prevImage = prevImageRef?.current?.[index];
     const nextImage = nextImageRef?.current?.[index];
     if (!nextImage?.elementImage && prevImage?.elementImage) {
@@ -213,15 +722,15 @@ var TransitionSeriesChildren = ({
       nextImage?.draw?.(null, null, 0);
     }
   }, []);
-  const onNextElementImage = useCallback((elementImage, progress, draw, index) => {
+  const onNextElementImage = useCallback2((elementImage, progress, draw, index) => {
     prevImageRef.current[index] = { elementImage, progress, draw };
     drawIfSynced(index);
   }, [drawIfSynced]);
-  const onPrevElementImage = useCallback((elementImage, progress, draw, index) => {
+  const onPrevElementImage = useCallback2((elementImage, progress, draw, index) => {
     nextImageRef.current[index] = { elementImage, progress, draw };
     drawIfSynced(index);
   }, [drawIfSynced]);
-  const childrenValue = useMemo3(() => {
+  const childrenValue = useMemo4(() => {
     let transitionOffsets = 0;
     let startFrame = 0;
     const overlayRenders = [];
@@ -369,12 +878,13 @@ var TransitionSeriesChildren = ({
         const prevPresentation = prev.props.presentation ?? slide();
         const UppercaseNextPresentation = nextPresentation.component;
         const UppercasePrevPresentation = prevPresentation.component;
-        return /* @__PURE__ */ jsx3(Sequence, {
+        return /* @__PURE__ */ jsx4(Sequence, {
           from: actualStartFrame,
           durationInFrames: durationInFramesProp,
           ...passedProps,
           name: passedProps.name || "<TS.Sequence>",
-          children: /* @__PURE__ */ jsx3(UppercaseNextPresentation, {
+          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+          children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
             passedProps: nextPresentation.props ?? {},
             presentationDirection: "exiting",
             presentationProgress: nextProgress,
@@ -386,9 +896,9 @@ var TransitionSeriesChildren = ({
               throw new Error("Should not call when exiting");
             },
             bothEnteringAndExiting: true,
-            children: /* @__PURE__ */ jsx3(WrapInExitingProgressContext, {
+            children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
               presentationProgress: nextProgress,
-              children: /* @__PURE__ */ jsx3(UppercasePrevPresentation, {
+              children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
                 passedProps: prevPresentation.props ?? {},
                 presentationDirection: "entering",
                 presentationProgress: prevProgress,
@@ -402,7 +912,7 @@ var TransitionSeriesChildren = ({
                   onNextElementImage(null, null, null, i - 1);
                 },
                 bothEnteringAndExiting: true,
-                children: /* @__PURE__ */ jsx3(WrapInEnteringProgressContext, {
+                children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
                   presentationProgress: prevProgress,
                   children: child
                 })
@@ -414,12 +924,13 @@ var TransitionSeriesChildren = ({
       if (prevProgress !== null && prev) {
         const prevPresentation = prev.props.presentation ?? slide();
         const UppercasePrevPresentation = prevPresentation.component;
-        return /* @__PURE__ */ jsx3(Sequence, {
+        return /* @__PURE__ */ jsx4(Sequence, {
           from: actualStartFrame,
           durationInFrames: durationInFramesProp,
           ...passedProps,
           name: passedProps.name || "<TS.Sequence>",
-          children: /* @__PURE__ */ jsx3(UppercasePrevPresentation, {
+          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+          children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
             passedProps: prevPresentation.props ?? {},
             presentationDirection: "entering",
             presentationProgress: prevProgress,
@@ -429,7 +940,7 @@ var TransitionSeriesChildren = ({
               onNextElementImage(null, null, null, i - 1);
             },
             bothEnteringAndExiting: false,
-            children: /* @__PURE__ */ jsx3(WrapInEnteringProgressContext, {
+            children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
               presentationProgress: prevProgress,
               children: child
             })
@@ -439,12 +950,13 @@ var TransitionSeriesChildren = ({
       if (nextProgress !== null && next) {
         const nextPresentation = next.props.presentation ?? slide();
         const UppercaseNextPresentation = nextPresentation.component;
-        return /* @__PURE__ */ jsx3(Sequence, {
+        return /* @__PURE__ */ jsx4(Sequence, {
           from: actualStartFrame,
           durationInFrames: durationInFramesProp,
           ...passedProps,
           name: passedProps.name || "<TS.Sequence>",
-          children: /* @__PURE__ */ jsx3(UppercaseNextPresentation, {
+          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+          children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
             passedProps: nextPresentation.props ?? {},
             presentationDirection: "exiting",
             presentationProgress: nextProgress,
@@ -454,27 +966,29 @@ var TransitionSeriesChildren = ({
               onPrevElementImage(null, null, null, i + 1);
             },
             bothEnteringAndExiting: false,
-            children: /* @__PURE__ */ jsx3(WrapInExitingProgressContext, {
+            children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
               presentationProgress: nextProgress,
               children: child
             })
           })
         }, i);
       }
-      return /* @__PURE__ */ jsx3(Sequence, {
+      return /* @__PURE__ */ jsx4(Sequence, {
         from: actualStartFrame,
         durationInFrames: durationInFramesProp,
         ...passedProps,
         name: passedProps.name || "<TS.Sequence>",
+        _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
         children: child
       }, i);
     });
     const overlayElements = overlayRenders.map((overlayInfo) => {
       const info = overlayInfo;
-      return /* @__PURE__ */ jsx3(Sequence, {
+      return /* @__PURE__ */ jsx4(Sequence, {
         from: Math.round(info.overlayFrom),
         durationInFrames: info.durationInFrames,
         name: "<TS.Overlay>",
+        _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
         layout: "absolute-fill",
         ...info.stack ? { stack: info.stack } : {},
         children: info.children
@@ -482,7 +996,7 @@ var TransitionSeriesChildren = ({
     });
     return [...mainChildren || [], ...overlayElements];
   }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
-  return /* @__PURE__ */ jsx3(Fragment, {
+  return /* @__PURE__ */ jsx4(Fragment, {
     children: childrenValue
   });
 };
@@ -492,11 +1006,12 @@ var TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps })
   if (NoReactInternals2.ENABLE_V5_BREAKING_CHANGES && layout !== "absolute-fill") {
     throw new TypeError(`The "layout" prop of <TransitionSeries /> is not supported anymore in v5. TransitionSeries' must be absolutely positioned.`);
   }
-  return /* @__PURE__ */ jsx3(Sequence, {
+  return /* @__PURE__ */ jsx4(Sequence, {
     name: displayName,
     layout,
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/transitions/transitionseries" : undefined,
     ...otherProps,
-    children: /* @__PURE__ */ jsx3(TransitionSeriesChildren, {
+    children: /* @__PURE__ */ jsx4(TransitionSeriesChildren, {
       children
     })
   });
@@ -504,9 +1019,9 @@ var TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps })
 TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;
 TransitionSeries.Overlay = SeriesOverlay;
-Internals.addSequenceStackTraces(TransitionSeries);
-Internals.addSequenceStackTraces(SeriesSequence);
-Internals.addSequenceStackTraces(SeriesOverlay);
+Internals2.addSequenceStackTraces(TransitionSeries);
+Internals2.addSequenceStackTraces(SeriesSequence);
+Internals2.addSequenceStackTraces(SeriesOverlay);
 // src/use-transition-progress.ts
 import React5 from "react";
 var useTransitionProgress = () => {
@@ -525,183 +1040,12 @@ 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,
-  HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
-  useDelayRender
-} from "remotion";
-import { AbsoluteFill as AbsoluteFill2, Internals as Internals2 } 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_UNSUPPORTED_MESSAGE);
-  }
-  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 memoizedEffects = Internals2.useMemoizedEffects({
-    effects: _experimentalEffects ?? [],
-    overrideId: null
-  });
-  const effectsRef = useRef2(memoizedEffects);
-  effectsRef.current = memoizedEffects;
-  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 ?? [],
-      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, memoizedEffects]);
-  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,
+  linearBlur,
+  dreamyZoom,
   TransitionSeries
 };