@remotion/transitions 4.0.466 → 4.0.467

package/dist/esm/index.mjs

@@ -77,13 +77,14 @@ var slide = (props) => {
 };
 
 // src/html-in-canvas-presentation.tsx
-import { useLayoutEffect, useMemo as useMemo2, useRef, useState, useCallback } from "react";
+import { useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState } from "react";
 import {
-  HtmlInCanvas,
+  AbsoluteFill as AbsoluteFill2,
   HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  HtmlInCanvas,
+  Internals,
   useDelayRender
 } from "remotion";
-import { AbsoluteFill as AbsoluteFill2, Internals } from "remotion";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,
@@ -250,7 +251,8 @@ var makeHtmlInCanvasPresentation = (shader) => {
   };
 };
 
-// src/presentations/linear-blur.tsx
+// src/presentations/cross-zoom.tsx
+var DEFAULT_STRENGTH = 0.4;
 var VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
 out vec2 v_uv;
@@ -264,31 +266,64 @@ precision highp float;
 uniform sampler2D u_prev;
 uniform sampler2D u_next;
 uniform float u_time;
-uniform float u_intensity;
+uniform float u_strength;
 
 in vec2 v_uv;
 out vec4 outColor;
 
-const int PASSES = 6;
+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) {
-	vec4 c1 = vec4(0.0);
-	vec4 c2 = vec4(0.0);
+	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);
 
-	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);
-		}
+	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;
 	}
 
-	c1 /= float(PASSES * PASSES);
-	c2 /= float(PASSES * PASSES);
-	return mix(c1, c2, progress);
+	return color / total;
 }
 
 void main() {
@@ -339,7 +374,7 @@ var createTexture = (gl) => {
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
   return tex;
 };
-var linearBlurShader = (canvas) => {
+var crossZoomShader = (canvas) => {
   const gl = canvas.getContext("webgl2", { premultipliedAlpha: true });
   if (!gl) {
     throw new Error("Failed to create WebGL2 context");
@@ -358,7 +393,7 @@ var linearBlurShader = (canvas) => {
   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 uStrength = gl.getUniformLocation(program, "u_strength");
   const cleanup = () => {
     gl.deleteProgram(program);
     gl.deleteTexture(prevTex);
@@ -376,7 +411,7 @@ var linearBlurShader = (canvas) => {
     time,
     passedProps
   }) => {
-    const { intensity = 0.1 } = passedProps;
+    const { strength = DEFAULT_STRENGTH } = passedProps;
     if (!prevImage && !nextImage) {
       return;
     }
@@ -404,7 +439,7 @@ var linearBlurShader = (canvas) => {
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);
-    gl.uniform1f(uIntensity, intensity);
+    gl.uniform1f(uStrength, strength);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   };
   return {
@@ -413,7 +448,7 @@ var linearBlurShader = (canvas) => {
     draw
   };
 };
-var linearBlur = makeHtmlInCanvasPresentation(linearBlurShader);
+var crossZoom = makeHtmlInCanvasPresentation(crossZoomShader);
 
 // src/presentations/dreamy-zoom.tsx
 var DEFAULT_ROTATION = 6;
@@ -585,6 +620,436 @@ var dreamyZoomShader = (canvas) => {
 };
 var dreamyZoom = makeHtmlInCanvasPresentation(dreamyZoomShader);
 
+// src/presentations/film-burn.tsx
+var DEFAULT_SEED = 2.31;
+var VERTEX_SHADER3 = `#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_SHADER3 = `#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);
+}`;
+var compileShader3 = (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 createProgram3 = (gl) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  const vs = compileShader3(gl, VERTEX_SHADER3, gl.VERTEX_SHADER);
+  const fs = compileShader3(gl, FRAGMENT_SHADER3, 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 createTexture3 = (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 filmBurnShader = (canvas) => {
+  const gl = canvas.getContext("webgl2", { premultipliedAlpha: true });
+  if (!gl) {
+    throw new Error("Failed to create WebGL2 context");
+  }
+  const program = createProgram3(gl);
+  const prevTex = createTexture3(gl);
+  const nextTex = createTexture3(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;
+    }
+    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
+  };
+};
+var filmBurn = makeHtmlInCanvasPresentation(filmBurnShader);
+
+// src/presentations/linear-blur.tsx
+var VERTEX_SHADER4 = `#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_SHADER4 = `#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 compileShader4 = (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 createProgram4 = (gl) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  const vs = compileShader4(gl, VERTEX_SHADER4, gl.VERTEX_SHADER);
+  const fs = compileShader4(gl, FRAGMENT_SHADER4, 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 createTexture4 = (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 = createProgram4(gl);
+  const prevTex = createTexture4(gl);
+  const nextTex = createTexture4(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/timings/linear-timing.ts
 import { interpolate } from "remotion";
 var linearTiming = (options) => {
@@ -1046,6 +1511,8 @@ export {
   makeHtmlInCanvasPresentation,
   linearTiming,
   linearBlur,
+  filmBurn,
   dreamyZoom,
+  crossZoom,
   TransitionSeries
 };

package/dist/esm/linear-blur.mjs

@@ -1,11 +1,12 @@
 // src/html-in-canvas-presentation.tsx
-import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
-  HtmlInCanvas,
+  AbsoluteFill,
   HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  HtmlInCanvas,
+  Internals,
   useDelayRender
 } from "remotion";
-import { AbsoluteFill, Internals } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,

package/dist/esm/ripple.mjs

@@ -1,11 +1,12 @@
 // src/html-in-canvas-presentation.tsx
-import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
-  HtmlInCanvas,
+  AbsoluteFill,
   HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  HtmlInCanvas,
+  Internals,
   useDelayRender
 } from "remotion";
-import { AbsoluteFill, Internals } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,

package/dist/esm/swap.mjs

@@ -1,11 +1,12 @@
 // src/html-in-canvas-presentation.tsx
-import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
-  HtmlInCanvas,
+  AbsoluteFill,
   HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  HtmlInCanvas,
+  Internals,
   useDelayRender
 } from "remotion";
-import { AbsoluteFill, Internals } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,

package/dist/esm/zoom-blur.mjs

@@ -1,11 +1,12 @@
 // src/html-in-canvas-presentation.tsx
-import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
-  HtmlInCanvas,
+  AbsoluteFill,
   HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  HtmlInCanvas,
+  Internals,
   useDelayRender
 } from "remotion";
-import { AbsoluteFill, Internals } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,

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

@@ -1,11 +1,12 @@
 // src/html-in-canvas-presentation.tsx
-import { useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
-  HtmlInCanvas,
+  AbsoluteFill,
   HTML_IN_CANVAS_UNSUPPORTED_MESSAGE,
+  HtmlInCanvas,
+  Internals,
   useDelayRender
 } from "remotion";
-import { AbsoluteFill, Internals } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,