@remotion/transitions 4.0.465 → 4.0.466

package/dist/esm/swap.mjs

@@ -0,0 +1,393 @@
+// 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/swap.tsx
+var DEFAULT_REFLECTION = 0.4;
+var DEFAULT_PERSPECTIVE = 0.2;
+var DEFAULT_DEPTH = 3;
+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_reflection;
+uniform float u_perspective;
+uniform float u_depth;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+const vec4 black = vec4(0.0, 0.0, 0.0, 1.0);
+const vec2 boundMin = vec2(0.0, 0.0);
+const vec2 boundMax = vec2(1.0, 1.0);
+
+bool inBounds(vec2 p) {
+	return all(lessThan(boundMin, p)) && all(lessThan(p, boundMax));
+}
+
+vec2 project(vec2 p) {
+	return p * vec2(1.0, -1.2) + vec2(0.0, 2.22);
+}
+
+vec4 bgColor(vec2 p, vec2 pfr, vec2 pto) {
+	vec4 c = black;
+	pfr = project(pfr);
+	if (inBounds(pfr)) {
+		c += mix(black, texture(u_prev, pfr), u_reflection * mix(1.0, 0.0, pfr.y));
+	}
+	pto = project(pto);
+	if (inBounds(pto)) {
+		c += mix(black, texture(u_next, pto), u_reflection * mix(1.0, 0.0, pto.y));
+	}
+	return c;
+}
+
+vec4 transition(vec2 p, float progress) {
+	vec2 pfr;
+	vec2 pto = vec2(-1.0);
+
+	float size = mix(1.0, u_depth, progress);
+	float persp = u_perspective * progress;
+	pfr = (p + vec2(-0.0, -0.5)) * vec2(
+		size / (1.0 - u_perspective * progress),
+		size / (1.0 - size * persp * p.x)
+	) + vec2(0.0, 0.5);
+
+	size = mix(1.0, u_depth, 1.0 - progress);
+	persp = u_perspective * (1.0 - progress);
+	pto = (p + vec2(-1.0, -0.5)) * vec2(
+		size / (1.0 - u_perspective * (1.0 - progress)),
+		size / (1.0 - size * persp * (0.5 - p.x))
+	) + vec2(1.0, 0.5);
+
+	if (progress < 0.5) {
+		if (inBounds(pfr)) {
+			return texture(u_prev, pfr);
+		}
+		if (inBounds(pto)) {
+			return texture(u_next, pto);
+		}
+	}
+	if (inBounds(pto)) {
+		return texture(u_next, pto);
+	}
+	if (inBounds(pfr)) {
+		return texture(u_prev, pfr);
+	}
+	return bgColor(p, pfr, pto);
+}
+
+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 swapShader = (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 uReflection = gl.getUniformLocation(program, "u_reflection");
+  const uPerspective = gl.getUniformLocation(program, "u_perspective");
+  const uDepth = gl.getUniformLocation(program, "u_depth");
+  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 {
+      reflection = DEFAULT_REFLECTION,
+      perspective = DEFAULT_PERSPECTIVE,
+      depth = DEFAULT_DEPTH
+    } = 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(uReflection, reflection);
+    gl.uniform1f(uPerspective, perspective);
+    gl.uniform1f(uDepth, depth);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  };
+  return {
+    clear,
+    cleanup,
+    draw
+  };
+};
+var swap = makeHtmlInCanvasPresentation(swapShader);
+export {
+  swapShader,
+  swap
+};

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 export { linearTiming } from './timings/linear-timing.js';
 export { springTiming } from './timings/spring-timing.js';
 export { TransitionSeries } from './TransitionSeries.js';
-export { TransitionPresentation, TransitionPresentationComponentProps, TransitionSeriesOverlayProps, TransitionTiming, } from './types.js';
-export { TransitionState, useTransitionProgress, } from './use-transition-progress.js';
-export { HtmlInCanvasShader, HtmlInCanvasShaderDraw, HtmlInCanvasShaderDrawParams, makeHtmlInCanvasPresentation, } from './html-in-canvas-presentation.js';
+export type { TransitionPresentation, TransitionPresentationComponentProps, TransitionSeriesOverlayProps, TransitionTiming, } from './types.js';
+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 { dreamyZoom } from './presentations/dreamy-zoom.js';
+export type { DreamyZoomProps } from './presentations/dreamy-zoom.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeHtmlInCanvasPresentation = exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
+exports.dreamyZoom = exports.linearBlur = 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,3 +15,7 @@ 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 dreamy_zoom_js_1 = require("./presentations/dreamy-zoom.js");
+Object.defineProperty(exports, "dreamyZoom", { enumerable: true, get: function () { return dreamy_zoom_js_1.dreamyZoom; } });

package/dist/presentations/book-flip.d.ts

@@ -0,0 +1,14 @@
+export type BookFlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
+export type BookFlipProps = {
+    direction?: BookFlipDirection;
+};
+export declare const bookFlipShader: (canvas: OffscreenCanvas) => {
+    clear: () => void;
+    cleanup: () => void;
+    draw: import("..").HtmlInCanvasShaderDraw<BookFlipProps>;
+};
+export declare const bookFlip: (props: BookFlipProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}) => import("..").TransitionPresentation<BookFlipProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}>;

package/dist/presentations/book-flip.js

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bookFlip = exports.bookFlipShader = void 0;
+const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const DIRECTION_FROM_LEFT = 0;
+const DIRECTION_FROM_RIGHT = 1;
+const DIRECTION_FROM_TOP = 2;
+const DIRECTION_FROM_BOTTOM = 3;
+const DEFAULT_DIRECTION = 'from-right';
+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/BookFlip
+// Author: hong · 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_direction;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+const float EPSILON = 0.0001;
+
+float avoidZero(float value) {
+	if (abs(value) < EPSILON) {
+		return value < 0.0 ? -EPSILON : EPSILON;
+	}
+
+	return value;
+}
+
+vec2 skewRight(vec2 p, float progress) {
+	float skewX = (p.x - progress) / avoidZero(0.5 - progress) * 0.5;
+	float skewY =
+		(p.y - 0.5) /
+			avoidZero(0.5 + progress * (p.x - 0.5) / 0.5) *
+			0.5 +
+		0.5;
+	return vec2(skewX, skewY);
+}
+
+vec2 skewLeft(vec2 p, float progress) {
+	float skewX = (p.x - 0.5) / avoidZero(progress - 0.5) * 0.5 + 0.5;
+	float skewY =
+		(p.y - 0.5) /
+			avoidZero(0.5 + (1.0 - progress) * (0.5 - p.x) / 0.5) *
+			0.5 +
+		0.5;
+	return vec2(skewX, skewY);
+}
+
+vec4 addShade(float progress) {
+	float shadeVal = max(0.7, abs(progress - 0.5) * 2.0);
+	return vec4(vec3(shadeVal), 1.0);
+}
+
+vec2 toCanonicalUv(vec2 p) {
+	if (u_direction < 0.5) {
+		return p;
+	}
+
+	if (u_direction < 1.5) {
+		return vec2(1.0 - p.x, p.y);
+	}
+
+	if (u_direction < 2.5) {
+		return vec2(p.y, 1.0 - p.x);
+	}
+
+	return vec2(1.0 - p.y, p.x);
+}
+
+vec2 fromCanonicalUv(vec2 p) {
+	if (u_direction < 0.5) {
+		return p;
+	}
+
+	if (u_direction < 1.5) {
+		return vec2(1.0 - p.x, p.y);
+	}
+
+	if (u_direction < 2.5) {
+		return vec2(1.0 - p.y, p.x);
+	}
+
+	return vec2(p.y, 1.0 - p.x);
+}
+
+vec4 samplePrev(vec2 p) {
+	return texture(u_prev, fromCanonicalUv(p));
+}
+
+vec4 sampleNext(vec2 p) {
+	return texture(u_next, fromCanonicalUv(p));
+}
+
+vec4 transition(vec2 p, float progress) {
+	float pr = step(1.0 - progress, p.x);
+
+	if (p.x < 0.5) {
+		return mix(
+			samplePrev(p),
+			sampleNext(skewLeft(p, progress)) * addShade(progress),
+			pr
+		);
+	}
+
+	return mix(
+		samplePrev(skewRight(p, progress)) * addShade(progress),
+		sampleNext(p),
+		pr
+	);
+}
+
+void main() {
+	vec2 p = toCanonicalUv(v_uv);
+	float progress = 1.0 - u_time;
+	outColor = transition(p, 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 getDirectionConstant = (direction) => {
+    switch (direction) {
+        case 'from-left':
+            return DIRECTION_FROM_LEFT;
+        case 'from-right':
+            return DIRECTION_FROM_RIGHT;
+        case 'from-top':
+            return DIRECTION_FROM_TOP;
+        case 'from-bottom':
+            return DIRECTION_FROM_BOTTOM;
+        default:
+            return DIRECTION_FROM_RIGHT;
+    }
+};
+const bookFlipShader = (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 uDirection = gl.getUniformLocation(program, 'u_direction');
+    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 { direction = DEFAULT_DIRECTION } = passedProps;
+        if (!prevImage && !nextImage) {
+            return;
+        }
+        if (prevImage && (prevImage.width === 0 || prevImage.height === 0)) {
+            return;
+        }
+        if (nextImage && (nextImage.width === 0 || nextImage.height === 0)) {
+            return;
+        }
+        // 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(uDirection, getDirectionConstant(direction));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    };
+    return {
+        clear,
+        cleanup,
+        draw,
+    };
+};
+exports.bookFlipShader = bookFlipShader;
+exports.bookFlip = (0, html_in_canvas_presentation_1.makeHtmlInCanvasPresentation)(exports.bookFlipShader);

package/dist/presentations/crosswarp.d.ts

@@ -0,0 +1,11 @@
+export type CrosswarpProps = Record<string, never>;
+export declare const crosswarpShader: (canvas: OffscreenCanvas) => {
+    clear: () => void;
+    cleanup: () => void;
+    draw: import("..").HtmlInCanvasShaderDraw<CrosswarpProps>;
+};
+export declare const crosswarp: (props: CrosswarpProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}) => import("..").TransitionPresentation<CrosswarpProps & {
+    effects?: import("remotion").EffectsProp | undefined;
+}>;