@remotion/transitions 4.0.466 → 4.0.467

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

@@ -4,7 +4,6 @@ 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, effects, passedProps, bothEnteringAndExiting, }) => {
     if (!remotion_1.HtmlInCanvas.isSupported()) {
         throw new Error(remotion_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
@@ -24,7 +23,7 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
     const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
     const passedPropsRef = (0, react_1.useRef)(passedProps);
     passedPropsRef.current = passedProps;
-    const memoizedEffects = remotion_2.Internals.useMemoizedEffects({
+    const memoizedEffects = remotion_1.Internals.useMemoizedEffects({
         effects: effects !== null && effects !== void 0 ? effects : [],
         overrideId: null,
     });
@@ -36,7 +35,7 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
             instance.cleanup();
         };
     }, [offscreenCanvas, instance]);
-    const chainState = remotion_2.Internals.useEffectChainState();
+    const chainState = remotion_1.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;
@@ -66,7 +65,7 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
             time: progress,
             passedProps: passedPropsRef.current,
         });
-        await remotion_2.Internals.runEffectChain({
+        await remotion_1.Internals.runEffectChain({
             state: chainState.get(width, height),
             source: offscreenCanvas,
             effects: (_e = effectsRef.current) !== null && _e !== void 0 ? _e : [],
@@ -136,7 +135,7 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
     if (passThrough) {
         return children;
     }
-    return (jsx_runtime_1.jsx(remotion_2.AbsoluteFill, { children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, style: canvasSubtreeStyle, children: children }) }));
+    return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, style: canvasSubtreeStyle, children: children }) }));
 };
 exports.HtmlInCanvasPresentation = HtmlInCanvasPresentation;
 const makeHtmlInCanvasPresentation = (shader) => {

package/dist/index.d.ts

@@ -6,7 +6,11 @@ export { useTransitionProgress } from './use-transition-progress.js';
 export type { TransitionState } from './use-transition-progress.js';
 export { makeHtmlInCanvasPresentation } from './html-in-canvas-presentation.js';
 export type { HtmlInCanvasShader, HtmlInCanvasShaderDraw, HtmlInCanvasShaderDrawParams, } from './html-in-canvas-presentation.js';
-export { linearBlur } from './presentations/linear-blur.js';
-export type { LinearBlurProps } from './presentations/linear-blur.js';
+export { crossZoom } from './presentations/cross-zoom.js';
+export type { CrossZoomProps } from './presentations/cross-zoom.js';
 export { dreamyZoom } from './presentations/dreamy-zoom.js';
 export type { DreamyZoomProps } from './presentations/dreamy-zoom.js';
+export { filmBurn } from './presentations/film-burn.js';
+export type { FilmBurnProps } from './presentations/film-burn.js';
+export { linearBlur } from './presentations/linear-blur.js';
+export type { LinearBlurProps } from './presentations/linear-blur.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dreamyZoom = exports.linearBlur = exports.makeHtmlInCanvasPresentation = exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
+exports.linearBlur = exports.filmBurn = exports.dreamyZoom = exports.crossZoom = exports.makeHtmlInCanvasPresentation = exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
 // Timings
 const linear_timing_js_1 = require("./timings/linear-timing.js");
 Object.defineProperty(exports, "linearTiming", { enumerable: true, get: function () { return linear_timing_js_1.linearTiming; } });
@@ -15,7 +15,11 @@ Object.defineProperty(exports, "useTransitionProgress", { enumerable: true, get:
 // HTML-in-canvas
 const html_in_canvas_presentation_js_1 = require("./html-in-canvas-presentation.js");
 Object.defineProperty(exports, "makeHtmlInCanvasPresentation", { enumerable: true, get: function () { return html_in_canvas_presentation_js_1.makeHtmlInCanvasPresentation; } });
-const linear_blur_js_1 = require("./presentations/linear-blur.js");
-Object.defineProperty(exports, "linearBlur", { enumerable: true, get: function () { return linear_blur_js_1.linearBlur; } });
+const cross_zoom_js_1 = require("./presentations/cross-zoom.js");
+Object.defineProperty(exports, "crossZoom", { enumerable: true, get: function () { return cross_zoom_js_1.crossZoom; } });
 const dreamy_zoom_js_1 = require("./presentations/dreamy-zoom.js");
 Object.defineProperty(exports, "dreamyZoom", { enumerable: true, get: function () { return dreamy_zoom_js_1.dreamyZoom; } });
+const film_burn_js_1 = require("./presentations/film-burn.js");
+Object.defineProperty(exports, "filmBurn", { enumerable: true, get: function () { return film_burn_js_1.filmBurn; } });
+const linear_blur_js_1 = require("./presentations/linear-blur.js");
+Object.defineProperty(exports, "linearBlur", { enumerable: true, get: function () { return linear_blur_js_1.linearBlur; } });

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

@@ -0,0 +1,13 @@
+export type CrossZoomProps = {
+    strength?: number;
+};
+export declare const crossZoomShader: (canvas: OffscreenCanvas) => {
+    clear: () => void;
+    cleanup: () => void;
+    draw: import("..").HtmlInCanvasShaderDraw<CrossZoomProps>;
+};
+export declare const crossZoom: (props: CrossZoomProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}) => import("..").TransitionPresentation<CrossZoomProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}>;

package/dist/presentations/cross-zoom.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.crossZoom = exports.crossZoomShader = void 0;
+const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const DEFAULT_STRENGTH = 0.4;
+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/CrossZoom
+// Author: rectalogic · 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_strength;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+const float PI = 3.141592653589793;
+
+float linearEase(float begin, float change, float duration, float time) {
+	return change * time / duration + begin;
+}
+
+float exponentialEaseInOut(float begin, float change, float duration, float time) {
+	if (time == 0.0) {
+		return begin;
+	}
+
+	if (time == duration) {
+		return begin + change;
+	}
+
+	float t = time / (duration / 2.0);
+	if (t < 1.0) {
+		return change / 2.0 * pow(2.0, 10.0 * (t - 1.0)) + begin;
+	}
+
+	return change / 2.0 * (-pow(2.0, -10.0 * (t - 1.0)) + 2.0) + begin;
+}
+
+float sinusoidalEaseInOut(float begin, float change, float duration, float time) {
+	return -change / 2.0 * (cos(PI * time / duration) - 1.0) + begin;
+}
+
+float random(vec2 co) {
+	return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec4 crossFade(vec2 uv, float dissolve) {
+	return mix(texture(u_prev, uv), texture(u_next, uv), dissolve);
+}
+
+vec4 transition(vec2 uv, float progress) {
+	vec2 center = vec2(linearEase(0.25, 0.5, 1.0, progress), 0.5);
+	float dissolve = exponentialEaseInOut(0.0, 1.0, 1.0, progress);
+	float strength = sinusoidalEaseInOut(0.0, u_strength, 0.5, progress);
+
+	vec4 color = vec4(0.0);
+	float total = 0.0;
+	vec2 toCenter = center - uv;
+	float offset = random(uv);
+
+	for (int i = 0; i <= 40; i++) {
+		float percent = (float(i) + offset) / 40.0;
+		float weight = 4.0 * (percent - percent * percent);
+		color += crossFade(uv + toCenter * percent * strength, dissolve) * weight;
+		total += weight;
+	}
+
+	return color / total;
+}
+
+void main() {
+	float progress = 1.0 - 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 crossZoomShader = (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 uStrength = gl.getUniformLocation(program, 'u_strength');
+    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 { strength = DEFAULT_STRENGTH } = 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);
+        gl.uniform1f(uTime, effectiveTime);
+        gl.uniform1f(uStrength, strength);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    };
+    return {
+        clear,
+        cleanup,
+        draw,
+    };
+};
+exports.crossZoomShader = crossZoomShader;
+exports.crossZoom = (0, html_in_canvas_presentation_1.makeHtmlInCanvasPresentation)(exports.crossZoomShader);

package/dist/presentations/film-burn.d.ts

@@ -0,0 +1,13 @@
+export type FilmBurnProps = {
+    seed?: number;
+};
+export declare const filmBurnShader: (canvas: OffscreenCanvas) => {
+    clear: () => void;
+    cleanup: () => void;
+    draw: import("..").HtmlInCanvasShaderDraw<FilmBurnProps>;
+};
+export declare const filmBurn: (props: FilmBurnProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}) => import("..").TransitionPresentation<FilmBurnProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}>;

package/dist/presentations/film-burn.js

@@ -0,0 +1,265 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filmBurn = exports.filmBurnShader = void 0;
+const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const DEFAULT_SEED = 2.31;
+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/FilmBurn
+// Author: Anastasia Dunbar · 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_seed;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+#define PI 3.14159265358979323
+#define CLAMPS(x) clamp(x, 0.0, 1.0)
+#define REPEATS 50.0
+
+float sigmoid(float x, float a) {
+	float b = pow(x * 2.0, a) / 2.0;
+	if (x > 0.5) {
+		b = 1.0 - pow(2.0 - (x * 2.0), a) / 2.0;
+	}
+	return b;
+}
+
+float rand(float co) {
+	return fract(sin((co * 24.9898) + u_seed) * 43758.5453);
+}
+
+float rand(vec2 co) {
+	return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float apow(float a, float b) {
+	return pow(abs(a), b) * sign(b);
+}
+
+vec3 pow3(vec3 a, vec3 b) {
+	return vec3(apow(a.r, b.r), apow(a.g, b.g), apow(a.b, b.b));
+}
+
+float smoothMix(float a, float b, float c) {
+	return mix(a, b, sigmoid(c, 2.0));
+}
+
+float random(vec2 co, float shft) {
+	co += 10.0;
+	return smoothMix(
+		fract(
+			sin(
+				dot(
+					co.xy,
+					vec2(12.9898 + (floor(shft) * 0.5), 78.233 + u_seed)
+				)
+			) * 43758.5453
+		),
+		fract(
+			sin(
+				dot(
+					co.xy,
+					vec2(12.9898 + (floor(shft + 1.0) * 0.5), 78.233 + u_seed)
+				)
+			) * 43758.5453
+		),
+		fract(shft)
+	);
+}
+
+float smoothRandom(vec2 co, float shft) {
+	return smoothMix(
+		smoothMix(
+			random(floor(co), shft),
+			random(floor(co + vec2(1.0, 0.0)), shft),
+			fract(co.x)
+		),
+		smoothMix(
+			random(floor(co + vec2(0.0, 1.0)), shft),
+			random(floor(co + vec2(1.0, 1.0)), shft),
+			fract(co.x)
+		),
+		fract(co.y)
+	);
+}
+
+vec4 sampleTexture(vec2 p, float progress) {
+	return mix(texture(u_prev, p), texture(u_next, p), sigmoid(progress, 10.0));
+}
+
+vec4 transition(vec2 p, float progress) {
+	vec3 f = vec3(0.0);
+	for (float i = 0.0; i < 13.0; i++) {
+		f += sin(((p.x * rand(i) * 6.0) + (progress * 8.0)) + rand(i + 1.43)) *
+			sin(
+				((p.y * rand(i + 4.4) * 6.0) + (progress * 6.0)) +
+					rand(i + 2.4)
+			);
+		f += 1.0 - CLAMPS(
+			length(
+				p -
+					vec2(
+						smoothRandom(vec2(progress * 1.3), i + 1.0),
+						smoothRandom(vec2(progress * 0.5), i + 6.25)
+					)
+			) * mix(20.0, 70.0, rand(i))
+		);
+	}
+
+	f += 4.0;
+	f /= 11.0;
+	f = pow3(
+		f * vec3(1.0, 0.7, 0.6),
+		vec3(1.0, 2.0 - sin(progress * PI), 1.3)
+	);
+	f *= sin(progress * PI);
+
+	p -= 0.5;
+	p *= 1.0 + (smoothRandom(vec2(progress * 5.0), 6.3) * sin(progress * PI) * 0.05);
+	p += 0.5;
+
+	vec4 blurredImage = vec4(0.0);
+	float blurAmount = sin(progress * PI) * 0.03;
+	for (float i = 0.0; i < REPEATS; i++) {
+		vec2 q = vec2(
+			cos(degrees((i / REPEATS) * 360.0)),
+			sin(degrees((i / REPEATS) * 360.0))
+		) * (rand(vec2(i, p.x + p.y)) + blurAmount);
+		vec2 uv2 = p + (q * blurAmount);
+		blurredImage += sampleTexture(uv2, progress);
+	}
+
+	blurredImage /= REPEATS;
+	return blurredImage + vec4(f, 0.0);
+}
+
+void main() {
+	float progress = 1.0 - 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 filmBurnShader = (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 uSeed = gl.getUniformLocation(program, 'u_seed');
+    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 { seed = DEFAULT_SEED } = 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);
+        gl.uniform1f(uTime, effectiveTime);
+        gl.uniform1f(uSeed, seed);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    };
+    return {
+        clear,
+        cleanup,
+        draw,
+    };
+};
+exports.filmBurnShader = filmBurnShader;
+exports.filmBurn = (0, html_in_canvas_presentation_1.makeHtmlInCanvasPresentation)(exports.filmBurnShader);

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentType } from 'react';
 import type React from 'react';
+import type { ComponentType } from 'react';
 import type { DrawFunction } from './TransitionSeries';
 export type PresentationDirection = 'entering' | 'exiting';
 export type TransitionTiming = {

package/film-burn.js

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

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.466",
+	"version": "4.0.467",
 	"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.466",
-		"@remotion/shapes": "4.0.466",
-		"@remotion/paths": "4.0.466"
+		"remotion": "4.0.467",
+		"@remotion/shapes": "4.0.467",
+		"@remotion/paths": "4.0.467"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.466",
+		"remotion": "4.0.467",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.466",
-		"@remotion/player": "4.0.466",
-		"@remotion/eslint-config-internal": "4.0.466",
+		"@remotion/test-utils": "4.0.467",
+		"@remotion/player": "4.0.467",
+		"@remotion/eslint-config-internal": "4.0.467",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -103,6 +103,12 @@
 			"import": "./dist/esm/dreamy-zoom.mjs",
 			"require": "./dist/presentations/dreamy-zoom.js"
 		},
+		"./film-burn": {
+			"types": "./dist/presentations/film-burn.d.ts",
+			"module": "./dist/esm/film-burn.mjs",
+			"import": "./dist/esm/film-burn.mjs",
+			"require": "./dist/presentations/film-burn.js"
+		},
 		"./linear-blur": {
 			"types": "./dist/presentations/linear-blur.d.ts",
 			"module": "./dist/esm/linear-blur.mjs",
@@ -145,6 +151,12 @@
 			"import": "./dist/esm/crosswarp.mjs",
 			"require": "./dist/presentations/crosswarp.js"
 		},
+		"./cross-zoom": {
+			"types": "./dist/presentations/cross-zoom.d.ts",
+			"module": "./dist/esm/cross-zoom.mjs",
+			"import": "./dist/esm/cross-zoom.mjs",
+			"require": "./dist/presentations/cross-zoom.js"
+		},
 		"./swap": {
 			"types": "./dist/presentations/swap.d.ts",
 			"module": "./dist/esm/swap.mjs",
@@ -185,6 +197,9 @@
 			"dreamy-zoom": [
 				"dist/presentations/dreamy-zoom.d.ts"
 			],
+			"film-burn": [
+				"dist/presentations/film-burn.d.ts"
+			],
 			"linear-blur": [
 				"dist/presentations/linear-blur.d.ts"
 			],
@@ -200,6 +215,9 @@
 			"crosswarp": [
 				"dist/presentations/crosswarp.d.ts"
 			],
+			"cross-zoom": [
+				"dist/presentations/cross-zoom.d.ts"
+			],
 			"swap": [
 				"dist/presentations/swap.d.ts"
 			]