@remotion/transitions 4.0.464 → 4.0.465

package/dissolve.js

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

package/dist/esm/dissolve.mjs

@@ -0,0 +1,376 @@
+// src/html-in-canvas-presentation.tsx
+import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import {
+  HtmlInCanvas,
+  HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  useDelayRender
+} from "remotion";
+import { AbsoluteFill, Internals } from "remotion";
+import { jsx } 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 = 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 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__ */ jsx(AbsoluteFill, {
+    children: /* @__PURE__ */ jsx("canvas", {
+      ref: canvasRef,
+      style: canvasSubtreeStyle,
+      children
+    })
+  });
+};
+var makeHtmlInCanvasPresentation = (shader) => {
+  const CompWithShader = (props) => {
+    const { passedProps, ...otherProps } = props;
+    const { effects, ...restPassedProps } = props.passedProps;
+    return /* @__PURE__ */ jsx(HtmlInCanvasPresentation, {
+      shader,
+      passedProps: restPassedProps,
+      effects,
+      ...otherProps
+    });
+  };
+  return (props) => {
+    return {
+      component: CompWithShader,
+      props
+    };
+  };
+};
+
+// src/presentations/dissolve.tsx
+var DEFAULT_LINE_WIDTH = 0.1;
+var DEFAULT_SPREAD_COLOR = "#ff0000";
+var DEFAULT_HOT_COLOR = "#e6e633";
+var DEFAULT_POW = 5;
+var DEFAULT_INTENSITY = 1;
+var parseHexColor = (hex) => {
+  const cleaned = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (!/^[0-9a-fA-F]{6}$/.test(cleaned)) {
+    throw new Error(`Invalid color "${hex}" passed to dissolve(). Expected a "#rrggbb" hex string.`);
+  }
+  return [
+    parseInt(cleaned.slice(0, 2), 16) / 255,
+    parseInt(cleaned.slice(2, 4), 16) / 255,
+    parseInt(cleaned.slice(4, 6), 16) / 255
+  ];
+};
+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_line_width;
+uniform vec3 u_spread_color;
+uniform vec3 u_hot_color;
+uniform float u_pow;
+uniform float u_intensity;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+vec4 transition(vec2 uv, float progress) {
+	vec4 from = texture(u_next, uv);
+	vec4 to = texture(u_prev, uv);
+	float burn = 0.5 + 0.5 * (0.299 * from.r + 0.587 * from.g + 0.114 * from.b);
+	float show = burn - progress;
+	if (show < 0.001) {
+		return to;
+	}
+	float factor = 1.0 - smoothstep(0.0, u_line_width, show);
+	vec3 burnColor = mix(u_spread_color, u_hot_color, factor);
+	burnColor = pow(burnColor, vec3(u_pow)) * u_intensity;
+	vec3 finalRGB = mix(from.rgb, burnColor, factor * step(0.0001, progress));
+	return vec4(finalRGB, from.a);
+}
+
+void main() {
+	// In Remotion's HTML-in-canvas convention, u_prev is bound to the incoming
+	// scene and u_next is bound to the outgoing scene, so the gl-transitions
+	// "from" → u_next and "to" → u_prev. With this binding, progress = u_time
+	// (no inversion) maps to the gl-transitions convention where progress = 0
+	// shows the outgoing scene and progress = 1 shows the incoming one.
+	float progress = 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 dissolveShader = (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 uLineWidth = gl.getUniformLocation(program, "u_line_width");
+  const uSpreadColor = gl.getUniformLocation(program, "u_spread_color");
+  const uHotColor = gl.getUniformLocation(program, "u_hot_color");
+  const uPow = gl.getUniformLocation(program, "u_pow");
+  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 {
+      lineWidth = DEFAULT_LINE_WIDTH,
+      spreadColor = DEFAULT_SPREAD_COLOR,
+      hotColor = DEFAULT_HOT_COLOR,
+      pow = DEFAULT_POW,
+      intensity = DEFAULT_INTENSITY
+    } = 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);
+    const spread = parseHexColor(spreadColor);
+    const hot = parseHexColor(hotColor);
+    gl.uniform1f(uTime, effectiveTime);
+    gl.uniform1f(uLineWidth, lineWidth);
+    gl.uniform3f(uSpreadColor, spread[0], spread[1], spread[2]);
+    gl.uniform3f(uHotColor, hot[0], hot[1], hot[2]);
+    gl.uniform1f(uPow, pow);
+    gl.uniform1f(uIntensity, intensity);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  };
+  return {
+    clear,
+    cleanup,
+    draw
+  };
+};
+var dissolve = makeHtmlInCanvasPresentation(dissolveShader);
+export {
+  dissolveShader,
+  dissolve
+};

package/dist/esm/index.mjs

@@ -541,7 +541,7 @@ var HtmlInCanvasPresentation = ({
   presentationProgress,
   presentationDirection,
   shader,
-  _experimentalEffects,
+  effects,
   passedProps,
   bothEnteringAndExiting
 }) => {
@@ -564,7 +564,7 @@ var HtmlInCanvasPresentation = ({
   const passedPropsRef = useRef2(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals2.useMemoizedEffects({
-    effects: _experimentalEffects ?? [],
+    effects: effects ?? [],
     overrideId: null
   });
   const effectsRef = useRef2(memoizedEffects);
@@ -683,11 +683,11 @@ var HtmlInCanvasPresentation = ({
 var makeHtmlInCanvasPresentation = (shader) => {
   const CompWithShader = (props) => {
     const { passedProps, ...otherProps } = props;
-    const { _experimentalEffects, ...restPassedProps } = props.passedProps;
+    const { effects, ...restPassedProps } = props.passedProps;
     return /* @__PURE__ */ jsx4(HtmlInCanvasPresentation, {
       shader,
       passedProps: restPassedProps,
-      _experimentalEffects,
+      effects,
       ...otherProps
     });
   };

package/dist/esm/zoom-blur.mjs

@@ -14,7 +14,7 @@ var HtmlInCanvasPresentation = ({
   presentationProgress,
   presentationDirection,
   shader,
-  _experimentalEffects,
+  effects,
   passedProps,
   bothEnteringAndExiting
 }) => {
@@ -37,7 +37,7 @@ var HtmlInCanvasPresentation = ({
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
-    effects: _experimentalEffects ?? [],
+    effects: effects ?? [],
     overrideId: null
   });
   const effectsRef = useRef(memoizedEffects);
@@ -156,11 +156,11 @@ var HtmlInCanvasPresentation = ({
 var makeHtmlInCanvasPresentation = (shader) => {
   const CompWithShader = (props) => {
     const { passedProps, ...otherProps } = props;
-    const { _experimentalEffects, ...restPassedProps } = props.passedProps;
+    const { effects, ...restPassedProps } = props.passedProps;
     return /* @__PURE__ */ jsx(HtmlInCanvasPresentation, {
       shader,
       passedProps: restPassedProps,
-      _experimentalEffects,
+      effects,
       ...otherProps
     });
   };

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

@@ -14,7 +14,7 @@ var HtmlInCanvasPresentation = ({
   presentationProgress,
   presentationDirection,
   shader,
-  _experimentalEffects,
+  effects,
   passedProps,
   bothEnteringAndExiting
 }) => {
@@ -37,7 +37,7 @@ var HtmlInCanvasPresentation = ({
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
-    effects: _experimentalEffects ?? [],
+    effects: effects ?? [],
     overrideId: null
   });
   const effectsRef = useRef(memoizedEffects);
@@ -156,11 +156,11 @@ var HtmlInCanvasPresentation = ({
 var makeHtmlInCanvasPresentation = (shader) => {
   const CompWithShader = (props) => {
     const { passedProps, ...otherProps } = props;
-    const { _experimentalEffects, ...restPassedProps } = props.passedProps;
+    const { effects, ...restPassedProps } = props.passedProps;
     return /* @__PURE__ */ jsx(HtmlInCanvasPresentation, {
       shader,
       passedProps: restPassedProps,
-      _experimentalEffects,
+      effects,
       ...otherProps
     });
   };

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

@@ -1,8 +1,8 @@
 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> & {
+export declare const HtmlInCanvasPresentation: <TPassedProps extends Record<string, unknown>>({ children, onElementImage, onUnmount, presentationProgress, presentationDirection, shader, effects, passedProps, bothEnteringAndExiting, }: TransitionPresentationComponentProps<TPassedProps> & {
     readonly shader: HtmlInCanvasShader<TPassedProps>;
-    readonly _experimentalEffects?: EffectsProp | undefined;
+    readonly effects?: 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 HtmlInCanvasShaderDrawParams<Props> = {
     prevImage: ElementImage | null;
@@ -19,7 +19,7 @@ export type HtmlInCanvasShader<Props> = (canvas: OffscreenCanvas) => {
     draw: HtmlInCanvasShaderDraw<Props>;
 };
 export declare const makeHtmlInCanvasPresentation: <TPassedProps extends Record<string, unknown>>(shader: HtmlInCanvasShader<TPassedProps>) => (props: TPassedProps & {
-    _experimentalEffects?: EffectsProp | undefined;
+    effects?: EffectsProp | undefined;
 }) => TransitionPresentation<TPassedProps & {
-    _experimentalEffects?: EffectsProp | undefined;
+    effects?: EffectsProp | undefined;
 }>;

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

@@ -5,7 +5,7 @@ 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, }) => {
+const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, presentationProgress, presentationDirection, shader, effects, passedProps, bothEnteringAndExiting, }) => {
     if (!remotion_1.HtmlInCanvas.isSupported()) {
         throw new Error(remotion_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
     }
@@ -25,7 +25,7 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
     const passedPropsRef = (0, react_1.useRef)(passedProps);
     passedPropsRef.current = passedProps;
     const memoizedEffects = remotion_2.Internals.useMemoizedEffects({
-        effects: _experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : [],
+        effects: effects !== null && effects !== void 0 ? effects : [],
         overrideId: null,
     });
     const effectsRef = (0, react_1.useRef)(memoizedEffects);
@@ -142,8 +142,8 @@ 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 }));
+        const { effects, ...restPassedProps } = props.passedProps;
+        return (jsx_runtime_1.jsx(exports.HtmlInCanvasPresentation, { shader: shader, passedProps: restPassedProps, effects: effects, ...otherProps }));
     };
     return (props) => {
         return {

package/dist/presentations/dissolve.d.ts

@@ -0,0 +1,17 @@
+export type DissolveProps = {
+    lineWidth?: number;
+    spreadColor?: string;
+    hotColor?: string;
+    pow?: number;
+    intensity?: number;
+};
+export declare const dissolveShader: (canvas: OffscreenCanvas) => {
+    clear: () => void;
+    cleanup: () => void;
+    draw: import("..").HtmlInCanvasShaderDraw<DissolveProps>;
+};
+export declare const dissolve: (props: DissolveProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}) => import("..").TransitionPresentation<DissolveProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}>;

package/dist/presentations/dissolve.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dissolve = exports.dissolveShader = void 0;
+const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const DEFAULT_LINE_WIDTH = 0.1;
+const DEFAULT_SPREAD_COLOR = '#ff0000';
+const DEFAULT_HOT_COLOR = '#e6e633';
+const DEFAULT_POW = 5.0;
+const DEFAULT_INTENSITY = 1.0;
+const parseHexColor = (hex) => {
+    const cleaned = hex.startsWith('#') ? hex.slice(1) : hex;
+    if (!/^[0-9a-fA-F]{6}$/.test(cleaned)) {
+        throw new Error(`Invalid color "${hex}" passed to dissolve(). Expected a "#rrggbb" hex string.`);
+    }
+    return [
+        parseInt(cleaned.slice(0, 2), 16) / 255,
+        parseInt(cleaned.slice(2, 4), 16) / 255,
+        parseInt(cleaned.slice(4, 6), 16) / 255,
+    ];
+};
+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/dissolve
+// Author: hjm1fb · License: MIT
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform sampler2D u_prev;
+uniform sampler2D u_next;
+uniform float u_time;
+uniform float u_line_width;
+uniform vec3 u_spread_color;
+uniform vec3 u_hot_color;
+uniform float u_pow;
+uniform float u_intensity;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+vec4 transition(vec2 uv, float progress) {
+	vec4 from = texture(u_next, uv);
+	vec4 to = texture(u_prev, uv);
+	float burn = 0.5 + 0.5 * (0.299 * from.r + 0.587 * from.g + 0.114 * from.b);
+	float show = burn - progress;
+	if (show < 0.001) {
+		return to;
+	}
+	float factor = 1.0 - smoothstep(0.0, u_line_width, show);
+	vec3 burnColor = mix(u_spread_color, u_hot_color, factor);
+	burnColor = pow(burnColor, vec3(u_pow)) * u_intensity;
+	vec3 finalRGB = mix(from.rgb, burnColor, factor * step(0.0001, progress));
+	return vec4(finalRGB, from.a);
+}
+
+void main() {
+	// In Remotion's HTML-in-canvas convention, u_prev is bound to the incoming
+	// scene and u_next is bound to the outgoing scene, so the gl-transitions
+	// "from" → u_next and "to" → u_prev. With this binding, progress = u_time
+	// (no inversion) maps to the gl-transitions convention where progress = 0
+	// shows the outgoing scene and progress = 1 shows the incoming one.
+	float progress = u_time;
+	outColor = transition(v_uv, progress);
+}`;
+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 dissolveShader = (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 uLineWidth = gl.getUniformLocation(program, 'u_line_width');
+    const uSpreadColor = gl.getUniformLocation(program, 'u_spread_color');
+    const uHotColor = gl.getUniformLocation(program, 'u_hot_color');
+    const uPow = gl.getUniformLocation(program, 'u_pow');
+    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 { lineWidth = DEFAULT_LINE_WIDTH, spreadColor = DEFAULT_SPREAD_COLOR, hotColor = DEFAULT_HOT_COLOR, pow = DEFAULT_POW, intensity = DEFAULT_INTENSITY, } = passedProps;
+        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);
+        const spread = parseHexColor(spreadColor);
+        const hot = parseHexColor(hotColor);
+        gl.uniform1f(uTime, effectiveTime);
+        gl.uniform1f(uLineWidth, lineWidth);
+        gl.uniform3f(uSpreadColor, spread[0], spread[1], spread[2]);
+        gl.uniform3f(uHotColor, hot[0], hot[1], hot[2]);
+        gl.uniform1f(uPow, pow);
+        gl.uniform1f(uIntensity, intensity);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    };
+    return {
+        clear,
+        cleanup,
+        draw,
+    };
+};
+exports.dissolveShader = dissolveShader;
+exports.dissolve = (0, html_in_canvas_presentation_1.makeHtmlInCanvasPresentation)(exports.dissolveShader);

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

@@ -7,7 +7,7 @@ export declare const zoomBlurShader: (canvas: OffscreenCanvas) => {
     draw: import("..").HtmlInCanvasShaderDraw<ZoomBlurProps>;
 };
 export declare const zoomBlur: (props: ZoomBlurProps & {
-    _experimentalEffects?: import("remotion").EffectsProp | undefined;
+    effects?: import("remotion").EffectsProp | undefined;
 }) => import("..").TransitionPresentation<ZoomBlurProps & {
-    _experimentalEffects?: import("remotion").EffectsProp | undefined;
+    effects?: import("remotion").EffectsProp | undefined;
 }>;

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

@@ -5,7 +5,7 @@ export declare const zoomInOutShader: (canvas: OffscreenCanvas) => {
     draw: import("..").HtmlInCanvasShaderDraw<ZoomInOutProps>;
 };
 export declare const zoomInOut: (props: ZoomInOutProps & {
-    _experimentalEffects?: import("remotion").EffectsProp | undefined;
+    effects?: import("remotion").EffectsProp | undefined;
 }) => import("..").TransitionPresentation<ZoomInOutProps & {
-    _experimentalEffects?: import("remotion").EffectsProp | undefined;
+    effects?: import("remotion").EffectsProp | undefined;
 }>;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.464",
+	"version": "4.0.465",
 	"description": "Library for creating transitions in Remotion",
 	"main": "dist/esm/index.mjs",
 	"module": "dist/esm/index.js",
@@ -22,18 +22,18 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.464",
-		"@remotion/shapes": "4.0.464",
-		"@remotion/paths": "4.0.464"
+		"remotion": "4.0.465",
+		"@remotion/shapes": "4.0.465",
+		"@remotion/paths": "4.0.465"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.464",
+		"remotion": "4.0.465",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.464",
-		"@remotion/player": "4.0.464",
-		"@remotion/eslint-config-internal": "4.0.464",
+		"@remotion/test-utils": "4.0.465",
+		"@remotion/player": "4.0.465",
+		"@remotion/eslint-config-internal": "4.0.465",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -109,6 +109,12 @@
 			"import": "./dist/esm/iris.mjs",
 			"require": "./dist/presentations/iris.js"
 		},
+		"./dissolve": {
+			"types": "./dist/presentations/dissolve.d.ts",
+			"module": "./dist/esm/dissolve.mjs",
+			"import": "./dist/esm/dissolve.mjs",
+			"require": "./dist/presentations/dissolve.js"
+		},
 		"./package.json": "./package.json"
 	},
 	"typesVersions": {
@@ -139,6 +145,9 @@
 			],
 			"zoom-in-out": [
 				"dist/presentations/zoom-in-out.d.ts"
+			],
+			"dissolve": [
+				"dist/presentations/dissolve.d.ts"
 			]
 		}
 	},