@remotion/effects 4.0.521 → 4.0.523

package/dist/effect-internals.d.ts

@@ -0,0 +1,8 @@
+export declare const EffectInternals: {
+    readonly halftone: (params?: (import("./halftone.js").HalftoneParams & {
+        readonly disabled?: boolean | undefined;
+    }) | undefined) => import("remotion").EffectDescriptor<unknown>;
+    readonly tint: (params: import("./tint.js").TintParams & {
+        readonly disabled?: boolean | undefined;
+    }) => import("remotion").EffectDescriptor<unknown>;
+};

package/dist/entrypoints/blur.d.ts

@@ -0,0 +1,6 @@
+import * as blurExports from '../blur/index.js';
+export type { BlurParams } from '../blur/index.js';
+declare const blur: (params: blurExports.BlurParams & {
+    readonly disabled?: boolean | undefined;
+}) => import("remotion").EffectDescriptor<unknown>;
+export { blur };

package/dist/esm/page-turn.mjs

@@ -0,0 +1,521 @@
+// src/page-turn.ts
+import { Internals } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
+  }
+};
+
+// src/color-utils.ts
+var DEFAULT_AMOUNT = 1;
+var DEFAULT_BRIGHTNESS_AMOUNT = 0;
+var DEFAULT_HUE_DEGREES = 0;
+var colorAmountSchema = {
+  type: "number",
+  min: 0,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var hueDegreesSchema = {
+  type: "rotation-degrees",
+  step: 1,
+  default: DEFAULT_HUE_DEGREES,
+  description: "Degrees"
+};
+var assertOptionalFiniteNumber = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredFiniteNumber(value, name);
+};
+var validateUnitInterval = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNonNegative = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateSignedUnitInterval = (value, name) => {
+  if (value < -1) {
+    throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var clampColorChannel = (value) => {
+  return Math.max(0, Math.min(255, value));
+};
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
+
+// src/uv-coordinate.ts
+var publicUvToShaderUv = (uv) => {
+  return [uv[0], 1 - uv[1]];
+};
+
+// src/page-turn.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_PROGRESS = 0.5;
+var DEFAULT_FOLD_POSITION = [1, 1];
+var DEFAULT_ANGLE = 225;
+var DEFAULT_FOLD_RADIUS = 0.18;
+var DEFAULT_LIGHT_DIRECTION = 60;
+var DEFAULT_SHADOW = 0.45;
+var DEFAULT_BACK_OPACITY = 0.85;
+var DEFAULT_PAPER_COLOR = "#fff8dc";
+var pageTurnSchema = {
+  progress: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_PROGRESS,
+    description: "Progress",
+    hiddenFromList: false
+  },
+  foldPosition: {
+    type: "uv-coordinate",
+    step: 0.01,
+    default: DEFAULT_FOLD_POSITION,
+    description: "Fold position"
+  },
+  angle: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_ANGLE,
+    description: "Angle"
+  },
+  foldRadius: {
+    type: "number",
+    min: 0.02,
+    max: 0.5,
+    step: 0.01,
+    default: DEFAULT_FOLD_RADIUS,
+    description: "Fold radius",
+    hiddenFromList: false
+  },
+  lightDirection: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_LIGHT_DIRECTION,
+    description: "Light direction"
+  },
+  shadow: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_SHADOW,
+    description: "Shadow",
+    hiddenFromList: false
+  },
+  backOpacity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_BACK_OPACITY,
+    description: "Back opacity",
+    hiddenFromList: false
+  },
+  paperColor: {
+    type: "color",
+    default: DEFAULT_PAPER_COLOR,
+    description: "Paper color"
+  }
+};
+var resolve = (p) => ({
+  progress: p.progress ?? DEFAULT_PROGRESS,
+  foldPosition: [
+    ...p.foldPosition ?? DEFAULT_FOLD_POSITION
+  ],
+  angle: p.angle ?? DEFAULT_ANGLE,
+  foldRadius: p.foldRadius ?? DEFAULT_FOLD_RADIUS,
+  lightDirection: p.lightDirection ?? DEFAULT_LIGHT_DIRECTION,
+  shadow: p.shadow ?? DEFAULT_SHADOW,
+  backOpacity: p.backOpacity ?? DEFAULT_BACK_OPACITY,
+  paperColor: p.paperColor ?? DEFAULT_PAPER_COLOR
+});
+var assertOptionalUvCoordinate = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
+    throw new TypeError(`"${name}" must be a [number, number] tuple`);
+  }
+};
+var validatePageTurnParams = (params) => {
+  assertEffectParamsObject(params, "Page turn");
+  assertOptionalFiniteNumber(params.progress, "progress");
+  assertOptionalUvCoordinate(params.foldPosition, "foldPosition");
+  assertOptionalFiniteNumber(params.angle, "angle");
+  assertOptionalFiniteNumber(params.foldRadius, "foldRadius");
+  assertOptionalFiniteNumber(params.lightDirection, "lightDirection");
+  assertOptionalFiniteNumber(params.shadow, "shadow");
+  assertOptionalFiniteNumber(params.backOpacity, "backOpacity");
+  assertOptionalColor(params.paperColor, "paperColor");
+  validateUnitInterval(params.progress ?? DEFAULT_PROGRESS, "progress");
+  validateUnitInterval(params.shadow ?? DEFAULT_SHADOW, "shadow");
+  validateUnitInterval(params.backOpacity ?? DEFAULT_BACK_OPACITY, "backOpacity");
+  const foldRadius = params.foldRadius ?? DEFAULT_FOLD_RADIUS;
+  if (foldRadius < 0.02) {
+    throw new TypeError(`"foldRadius" must be >= 0.02, but got ${JSON.stringify(foldRadius)}`);
+  }
+  if (foldRadius > 0.5) {
+    throw new TypeError(`"foldRadius" must be <= 0.5, but got ${JSON.stringify(foldRadius)}`);
+  }
+};
+var PAGE_TURN_VS = `#version 300 es
+in vec2 aPos;
+in vec2 aUv;
+out vec2 vUv;
+
+void main() {
+	vUv = aUv;
+	gl_Position = vec4(aPos, 0.0, 1.0);
+}
+`;
+var PAGE_TURN_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform float uProgress;
+uniform vec2 uFoldPosition;
+uniform vec2 uDirectionVector;
+uniform vec2 uLightVector;
+uniform float uFoldRadius;
+uniform float uShadow;
+uniform float uBackOpacity;
+uniform vec4 uPaperColor;
+
+vec2 rangeFromPosition(vec2 origin, vec2 v) {
+	float a0 = dot(vec2(0.0, 0.0) - origin, v);
+	float a1 = dot(vec2(1.0, 0.0) - origin, v);
+	float a2 = dot(vec2(0.0, 1.0) - origin, v);
+	float a3 = dot(vec2(1.0, 1.0) - origin, v);
+	return vec2(
+		min(min(a0, a1), min(a2, a3)),
+		max(max(a0, a1), max(a2, a3))
+	);
+}
+
+float toTurnAxis(vec2 uv) {
+	vec2 dir = normalize(uDirectionVector);
+	vec2 range = rangeFromPosition(uFoldPosition, dir);
+	float rawAxis = dot(uv - uFoldPosition, dir);
+	return rawAxis / max(range.y, 0.0001);
+}
+
+vec2 fromTurnAxis(float axis, float cross, vec2 dir, float axisSpan) {
+	vec2 perpendicular = vec2(-dir.y, dir.x);
+	return uFoldPosition + dir * (axis * axisSpan) + perpendicular * cross;
+}
+
+float toCrossAxis(vec2 uv, vec2 dir) {
+	vec2 perpendicular = vec2(-dir.y, dir.x);
+	return dot(uv - uFoldPosition, perpendicular);
+}
+
+void main() {
+	vec2 dir = normalize(uDirectionVector);
+	vec2 perpendicular = vec2(-dir.y, dir.x);
+	vec2 axisRange = rangeFromPosition(uFoldPosition, dir);
+	vec2 crossRange = rangeFromPosition(uFoldPosition, perpendicular);
+	float axisSpan = max(axisRange.y, 0.0001);
+	float axis = toTurnAxis(vUv);
+	float cross = toCrossAxis(vUv, dir);
+	float progress = clamp(uProgress, 0.0, 1.0);
+	float radius = clamp(uFoldRadius, 0.02, 0.5);
+	float start = progress - radius;
+	float end = progress;
+
+	if (axis >= end) {
+		fragColor = texture(uSource, vUv);
+		return;
+	}
+
+	if (axis <= start) {
+		fragColor = vec4(0.0);
+		return;
+	}
+
+	float t = clamp((axis - start) / max(radius, 0.0001), 0.0, 1.0);
+	float crossNormalized = (cross - crossRange.x) / max(crossRange.y - crossRange.x, 0.0001);
+	float sourceAxis = mix(max(start, 0.0), end, t);
+	vec2 sampleUv = fromTurnAxis(sourceAxis, cross, dir, axisSpan);
+
+	if (
+		sampleUv.x < 0.0 || sampleUv.x > 1.0 ||
+		sampleUv.y < 0.0 || sampleUv.y > 1.0
+	) {
+		fragColor = vec4(0.0);
+		return;
+	}
+
+	vec4 color = texture(uSource, sampleUv);
+	float crease = smoothstep(0.72, 1.0, t);
+	float freeEdge = 1.0 - smoothstep(0.0, 0.28, t);
+	float backMix = 1.0 - smoothstep(0.22, 0.95, t);
+	float lightAgainstFold = dot(normalize(uLightVector), normalize(dir + perpendicular * 0.24));
+	float diffuse = 0.88 + 0.12 * lightAgainstFold;
+	float shade = diffuse - uShadow * (0.36 * crease + 0.16 * freeEdge);
+	float sheen = pow(max(0.0, 1.0 - abs(t - 0.44) / 0.13), 2.0);
+	float glossyStreak = pow(max(0.0, 1.0 - abs(crossNormalized - (0.36 + t * 0.16)) / 0.09), 2.0);
+	float edgeFade = smoothstep(0.0, 0.08, t);
+
+	vec3 rgb = color.a > 0.001 ? color.rgb / color.a : vec3(0.0);
+	vec3 paperRgb = uPaperColor.rgb;
+	vec3 backRgb = mix(paperRgb, rgb, 0.08 + 0.06 * t);
+	vec3 shaded = mix(rgb, backRgb, backMix) * shade;
+	shaded += vec3(1.0) * sheen * glossyStreak * (0.18 + 0.18 * backMix);
+	shaded += paperRgb * crease * 0.08;
+	float alpha = color.a * mix(1.0, uBackOpacity, backMix) * edgeFade;
+
+	fragColor = vec4(shaded * alpha, alpha);
+}
+`;
+var compileShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create WebGL 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(`Page turn shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var linkProgram = (gl, vs, fs) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  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(`Page turn program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var pageTurn = createEffect({
+  type: "remotion/page-turn",
+  label: "pageTurn()",
+  documentationLink: "https://www.remotion.dev/docs/effects/page-turn",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `page-turn-${r.progress}-${r.foldPosition.join(":")}-${r.angle}-${r.foldRadius}-${r.lightDirection}-${r.shadow}-${r.backOpacity}-${r.paperColor}`;
+  },
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw createWebGL2ContextError("page turn effect");
+    }
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    const vs = compileShader(gl, gl.VERTEX_SHADER, PAGE_TURN_VS);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, PAGE_TURN_FS);
+    const program = linkProgram(gl, vs, fs);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    const vao = gl.createVertexArray();
+    if (!vao) {
+      throw new Error("Failed to create WebGL vertex array");
+    }
+    gl.bindVertexArray(vao);
+    const data = new Float32Array([
+      -1,
+      -1,
+      0,
+      0,
+      1,
+      -1,
+      1,
+      0,
+      -1,
+      1,
+      0,
+      1,
+      1,
+      1,
+      1,
+      1
+    ]);
+    const vbo = gl.createBuffer();
+    if (!vbo) {
+      throw new Error("Failed to create WebGL buffer");
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, "aPos");
+    const aUv = gl.getAttribLocation(program, "aUv");
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(aUv);
+    gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
+    gl.bindVertexArray(null);
+    const texture = gl.createTexture();
+    if (!texture) {
+      throw new Error("Failed to create WebGL texture");
+    }
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    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.bindTexture(gl.TEXTURE_2D, null);
+    const colorCanvas = document.createElement("canvas");
+    colorCanvas.width = 1;
+    colorCanvas.height = 1;
+    const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
+    if (!colorCtx) {
+      throw new Error("Failed to acquire 2D context for color parsing");
+    }
+    return {
+      gl,
+      program,
+      vao,
+      vbo,
+      texture,
+      uSource: gl.getUniformLocation(program, "uSource"),
+      uProgress: gl.getUniformLocation(program, "uProgress"),
+      uFoldPosition: gl.getUniformLocation(program, "uFoldPosition"),
+      uDirectionVector: gl.getUniformLocation(program, "uDirectionVector"),
+      uLightVector: gl.getUniformLocation(program, "uLightVector"),
+      uFoldRadius: gl.getUniformLocation(program, "uFoldRadius"),
+      uShadow: gl.getUniformLocation(program, "uShadow"),
+      uBackOpacity: gl.getUniformLocation(program, "uBackOpacity"),
+      uPaperColor: gl.getUniformLocation(program, "uPaperColor"),
+      colorCtx,
+      cachedPaperColor: "",
+      cachedPaperColorRgba: [255, 248, 220, 255]
+    };
+  },
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const { gl, program, texture, vao } = state;
+    if (state.cachedPaperColor !== r.paperColor) {
+      state.cachedPaperColor = r.paperColor;
+      state.cachedPaperColorRgba = parseColorRgba(state.colorCtx, r.paperColor);
+    }
+    const [paperR, paperG, paperB, paperA] = state.cachedPaperColorRgba;
+    const [foldX, foldY] = publicUvToShaderUv(r.foldPosition);
+    gl.viewport(0, 0, width, height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.bindVertexArray(vao);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    if (state.uSource)
+      gl.uniform1i(state.uSource, 0);
+    if (state.uProgress)
+      gl.uniform1f(state.uProgress, r.progress);
+    if (state.uFoldPosition)
+      gl.uniform2f(state.uFoldPosition, foldX, foldY);
+    if (state.uDirectionVector) {
+      const radians = r.angle * Math.PI / 180;
+      gl.uniform2f(state.uDirectionVector, Math.cos(radians), -Math.sin(radians));
+    }
+    if (state.uLightVector) {
+      const radians = r.lightDirection * Math.PI / 180;
+      gl.uniform2f(state.uLightVector, Math.cos(radians), -Math.sin(radians));
+    }
+    if (state.uFoldRadius)
+      gl.uniform1f(state.uFoldRadius, r.foldRadius);
+    if (state.uShadow)
+      gl.uniform1f(state.uShadow, r.shadow);
+    if (state.uBackOpacity)
+      gl.uniform1f(state.uBackOpacity, r.backOpacity);
+    if (state.uPaperColor)
+      gl.uniform4f(state.uPaperColor, paperR / 255, paperG / 255, paperB / 255, paperA / 255);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, texture }) => {
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+    gl.deleteTexture(texture);
+  },
+  schema: pageTurnSchema,
+  validateParams: validatePageTurnParams
+});
+export {
+  pageTurnSchema,
+  pageTurn
+};

package/dist/esm/tear.mjs

@@ -0,0 +1,392 @@
+// src/tear.ts
+import { Internals } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
+  }
+};
+
+// src/color-utils.ts
+var DEFAULT_AMOUNT = 1;
+var DEFAULT_BRIGHTNESS_AMOUNT = 0;
+var DEFAULT_HUE_DEGREES = 0;
+var colorAmountSchema = {
+  type: "number",
+  min: 0,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var hueDegreesSchema = {
+  type: "rotation-degrees",
+  step: 1,
+  default: DEFAULT_HUE_DEGREES,
+  description: "Degrees"
+};
+var assertOptionalFiniteNumber = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredFiniteNumber(value, name);
+};
+var validateUnitInterval = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNonNegative = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateSignedUnitInterval = (value, name) => {
+  if (value < -1) {
+    throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var clampColorChannel = (value) => {
+  return Math.max(0, Math.min(255, value));
+};
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
+
+// src/tear.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_PROGRESS = 0.5;
+var DEFAULT_ANGLE = 0;
+var DEFAULT_ROTATION = 20;
+var DEFAULT_JAGGEDNESS = 20;
+var MESH_ROWS = 192;
+var tearSchema = {
+  progress: {
+    type: "number",
+    min: 0,
+    step: 0.01,
+    default: DEFAULT_PROGRESS,
+    description: "Progress",
+    hiddenFromList: false
+  },
+  angle: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_ANGLE,
+    description: "Angle",
+    hiddenFromList: false
+  },
+  rotation: {
+    type: "number",
+    min: 0,
+    max: 90,
+    step: 1,
+    default: DEFAULT_ROTATION,
+    description: "Rotation",
+    hiddenFromList: false
+  },
+  jaggedness: {
+    type: "number",
+    min: 0,
+    max: 100,
+    step: 1,
+    default: DEFAULT_JAGGEDNESS,
+    description: "Jaggedness",
+    hiddenFromList: false
+  }
+};
+var resolve = (p) => ({
+  progress: p.progress ?? DEFAULT_PROGRESS,
+  angle: p.angle ?? DEFAULT_ANGLE,
+  rotation: p.rotation ?? DEFAULT_ROTATION,
+  jaggedness: p.jaggedness ?? DEFAULT_JAGGEDNESS
+});
+var validateTearParams = (params) => {
+  assertEffectParamsObject(params, "Tear");
+  assertOptionalFiniteNumber(params.progress, "progress");
+  assertOptionalFiniteNumber(params.angle, "angle");
+  assertOptionalFiniteNumber(params.rotation, "rotation");
+  assertOptionalFiniteNumber(params.jaggedness, "jaggedness");
+  const r = resolve(params);
+  if (r.progress < 0) {
+    throw new Error('"progress" must be >= 0');
+  }
+  if (r.rotation < 0 || r.rotation > 90) {
+    throw new Error('"rotation" must be between 0 and 90');
+  }
+  if (r.jaggedness < 0) {
+    throw new Error('"jaggedness" must be >= 0');
+  }
+};
+var VERTEX_SHADER = `#version 300 es
+in vec2 aPos;
+out vec2 vUv;
+uniform vec2 uResolution;
+uniform float uAngle;
+uniform float uProgress;
+uniform float uRotation;
+uniform float uJaggedness;
+uniform float uSide;
+
+float seam(float y, float width) {
+	// Six zigzags, with matching edges on both pieces. Limit the amplitude
+	// to keep the tear inside the source, even on very narrow canvases.
+	float zigzag = 1.0 - 4.0 * abs(fract(y * 6.0 + 0.25) - 0.5);
+	return width * 0.5 + zigzag * min(uJaggedness, width * 0.45);
+}
+
+void main() {
+	// Work in a rectangle aligned with the rip, large enough to cover the
+	// original canvas at every angle. Rotate UVs back to the source so the
+	// image itself keeps its orientation.
+	float direction = radians(uAngle);
+	float dc = cos(direction);
+	float ds = sin(direction);
+	mat2 toCanvas = mat2(dc, -ds, ds, dc);
+	vec2 extent = vec2(
+		abs(dc) * uResolution.x + abs(ds) * uResolution.y,
+		abs(ds) * uResolution.x + abs(dc) * uResolution.y
+	);
+	float outerEdge = uSide < 0.0 ? 0.0 : extent.x;
+	vec2 source = vec2(mix(outerEdge, seam(aPos.y, extent.x), aPos.x), aPos.y * extent.y);
+	vec2 sourceCanvas = toCanvas * (source - extent * 0.5) + uResolution * 0.5;
+	vUv = vec2(sourceCanvas.x / uResolution.x, 1.0 - sourceCanvas.y / uResolution.y);
+
+	float tearProgress = min(uProgress, 1.0);
+	float tipY = tearProgress * extent.y;
+	// Keep the motion independent of the jagged edge. Following the seam
+	// with the pivot would rock the entire image at every zigzag.
+	vec2 pivot = vec2(extent.x * 0.5, tipY);
+	// The short bend near the tip joins the rotating portion continuously
+	// to the untouched area below it. Work in pixels to preserve angles
+	// at different aspect ratios.
+	float fullAngle = radians(uRotation) * tearProgress;
+	// Widen the bend for larger rotations / wider sheets so neighboring
+	// rows cannot fold over each other at the outside edges.
+	float bendHeight = max(extent.y * 0.15, fullAngle * extent.x * 1.5);
+	float bend = smoothstep(0.0, bendHeight, tipY - source.y);
+	float angle = uSide * fullAngle * bend;
+	float c = cos(angle);
+	float s = sin(angle);
+	vec2 delta = source - pivot;
+	vec2 position = pivot + vec2(c * delta.x - s * delta.y, s * delta.x + c * delta.y);
+	// After the tear reaches the bottom, keep the rotation stable and
+	// move each piece outward by half a canvas width per unit of progress.
+	position.x += uSide * max(uProgress - 1.0, 0.0) * extent.x * 0.5;
+	position = toCanvas * (position - extent * 0.5) + uResolution * 0.5;
+	gl_Position = vec4(position.x / uResolution.x * 2.0 - 1.0, 1.0 - position.y / uResolution.y * 2.0, 0.0, 1.0);
+}
+`;
+var FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+
+void main() {
+	// The rotated mesh extends beyond the original image. Those parts
+	// must remain transparent instead of smearing clamped border pixels.
+	if (any(lessThan(vUv, vec2(0.0))) || any(greaterThan(vUv, vec2(1.0)))) {
+		discard;
+	}
+	fragColor = texture(uSource, vUv);
+}
+`;
+var compileShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create WebGL 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(`Tear shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var linkProgram = (gl, vs, fs) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  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(`Tear program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var createTearState = (gl) => {
+  const vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = linkProgram(gl, vs, fs);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  const vao = gl.createVertexArray();
+  if (!vao) {
+    throw new Error("Failed to create WebGL vertex array");
+  }
+  gl.bindVertexArray(vao);
+  const data = new Float32Array((MESH_ROWS + 1) * 4);
+  for (let row = 0;row <= MESH_ROWS; row++) {
+    data.set([0, row / MESH_ROWS, 1, row / MESH_ROWS], row * 4);
+  }
+  const vbo = gl.createBuffer();
+  if (!vbo) {
+    throw new Error("Failed to create WebGL buffer");
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+  const aPos = gl.getAttribLocation(program, "aPos");
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 8, 0);
+  gl.bindVertexArray(null);
+  const texture = gl.createTexture();
+  if (!texture) {
+    throw new Error("Failed to create WebGL texture");
+  }
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  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.bindTexture(gl.TEXTURE_2D, null);
+  return {
+    gl,
+    program,
+    vao,
+    vbo,
+    texture,
+    uSource: gl.getUniformLocation(program, "uSource"),
+    uResolution: gl.getUniformLocation(program, "uResolution"),
+    uAngle: gl.getUniformLocation(program, "uAngle"),
+    uProgress: gl.getUniformLocation(program, "uProgress"),
+    uRotation: gl.getUniformLocation(program, "uRotation"),
+    uJaggedness: gl.getUniformLocation(program, "uJaggedness"),
+    uSide: gl.getUniformLocation(program, "uSide")
+  };
+};
+var tear = createEffect({
+  type: "dev.remotion.effects.tear",
+  label: "tear()",
+  documentationLink: "https://www.remotion.dev/docs/effects/tear",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `tear-${r.progress}-${r.rotation}-${r.jaggedness}-${r.angle}`;
+  },
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw createWebGL2ContextError("tear effect");
+    }
+    return createTearState(gl);
+  },
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    state.gl.viewport(0, 0, width, height);
+    state.gl.bindFramebuffer(state.gl.FRAMEBUFFER, null);
+    state.gl.clearColor(0, 0, 0, 0);
+    state.gl.clear(state.gl.COLOR_BUFFER_BIT);
+    state.gl.useProgram(state.program);
+    state.gl.bindVertexArray(state.vao);
+    state.gl.activeTexture(state.gl.TEXTURE0);
+    state.gl.bindTexture(state.gl.TEXTURE_2D, state.texture);
+    state.gl.pixelStorei(state.gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    state.gl.pixelStorei(state.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    state.gl.texImage2D(state.gl.TEXTURE_2D, 0, state.gl.RGBA, state.gl.RGBA, state.gl.UNSIGNED_BYTE, source);
+    if (state.uSource)
+      state.gl.uniform1i(state.uSource, 0);
+    if (state.uAngle)
+      state.gl.uniform1f(state.uAngle, r.angle % 360);
+    if (state.uProgress)
+      state.gl.uniform1f(state.uProgress, r.progress);
+    if (state.uRotation)
+      state.gl.uniform1f(state.uRotation, r.rotation);
+    if (state.uJaggedness)
+      state.gl.uniform1f(state.uJaggedness, r.jaggedness);
+    if (state.uResolution)
+      state.gl.uniform2f(state.uResolution, width, height);
+    for (const side of [-1, 1]) {
+      if (state.uSide)
+        state.gl.uniform1f(state.uSide, side);
+      state.gl.drawArrays(state.gl.TRIANGLE_STRIP, 0, (MESH_ROWS + 1) * 2);
+    }
+    state.gl.bindVertexArray(null);
+    state.gl.bindTexture(state.gl.TEXTURE_2D, null);
+    state.gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, texture }) => {
+    gl.deleteTexture(texture);
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+  },
+  schema: tearSchema,
+  validateParams: validateTearParams
+});
+export {
+  tear
+};

package/dist/page-turn.d.ts

@@ -0,0 +1,91 @@
+export declare const pageTurnSchema: {
+    readonly progress: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0.5;
+        readonly description: "Progress";
+        readonly hiddenFromList: false;
+    };
+    readonly foldPosition: {
+        readonly type: "uv-coordinate";
+        readonly step: 0.01;
+        readonly default: readonly [1, 1];
+        readonly description: "Fold position";
+    };
+    readonly angle: {
+        readonly type: "rotation-degrees";
+        readonly step: 1;
+        readonly default: 225;
+        readonly description: "Angle";
+    };
+    readonly foldRadius: {
+        readonly type: "number";
+        readonly min: 0.02;
+        readonly max: 0.5;
+        readonly step: 0.01;
+        readonly default: 0.18;
+        readonly description: "Fold radius";
+        readonly hiddenFromList: false;
+    };
+    readonly lightDirection: {
+        readonly type: "rotation-degrees";
+        readonly step: 1;
+        readonly default: 60;
+        readonly description: "Light direction";
+    };
+    readonly shadow: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0.45;
+        readonly description: "Shadow";
+        readonly hiddenFromList: false;
+    };
+    readonly backOpacity: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0.85;
+        readonly description: "Back opacity";
+        readonly hiddenFromList: false;
+    };
+    readonly paperColor: {
+        readonly type: "color";
+        readonly default: "#fff8dc";
+        readonly description: "Paper color";
+    };
+};
+export type PageTurnFoldPosition = readonly [number, number];
+export type PageTurnParams = {
+    /**
+     * Turn amount from 0 (flat source) to 1 (fully turned away).
+     * Defaults to `0.5`.
+     */
+    readonly progress?: number;
+    /**
+     * Point where the page starts folding, in UV coordinates.
+     * Defaults to `[1, 1]`.
+     */
+    readonly foldPosition?: PageTurnFoldPosition;
+    /** Direction of the turn in degrees. Defaults to `225`. */
+    readonly angle?: number;
+    /**
+     * Width of the curled band as a fraction of the canvas. Defaults to `0.18`.
+     */
+    readonly foldRadius?: number;
+    /** Direction of the light in degrees. Defaults to `60`. */
+    readonly lightDirection?: number;
+    /** Strength of the crease and back-face shading. Defaults to `0.45`. */
+    readonly shadow?: number;
+    /** Opacity of the dimmed back face of the page. Defaults to `0.85`. */
+    readonly backOpacity?: number;
+    /** Color of the paper back side. Defaults to `#fff8dc`. */
+    readonly paperColor?: string;
+};
+export declare const pageTurn: (params?: (PageTurnParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/tear.d.ts

@@ -0,0 +1,13 @@
+export type TearParams = {
+    /** Tear progress: 0 is intact, 1 reaches the opposite edge, and values above 1 move the pieces farther apart. Defaults to 0.5. */
+    readonly progress?: number;
+    /** Rip direction in degrees: 0 top-to-bottom, 90 left-to-right. Defaults to 0. */
+    readonly angle?: number;
+    /** Maximum outward rotation in degrees, between 0 and 90. Defaults to 20. */
+    readonly rotation?: number;
+    /** Zigzag amplitude in pixels. Use 0 for a straight seam. Defaults to 20. */
+    readonly jaggedness?: number;
+};
+export declare const tear: (params?: (TearParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/effects",
-	"version": "4.0.521",
+	"version": "4.0.523",
 	"description": "Effects that can be applied to Remotion-based canvas components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.521"
+		"remotion": "4.0.523"
 	},
 	"exports": {
 		".": {
@@ -319,6 +319,11 @@
 			"module": "./dist/esm/starburst.mjs",
 			"import": "./dist/esm/starburst.mjs"
 		},
+		"./tear": {
+			"types": "./dist/tear.d.ts",
+			"module": "./dist/esm/tear.mjs",
+			"import": "./dist/esm/tear.mjs"
+		},
 		"./thermal-vision": {
 			"types": "./dist/thermal-vision.d.ts",
 			"module": "./dist/esm/thermal-vision.mjs",
@@ -564,6 +569,9 @@
 			"starburst": [
 				"dist/starburst.d.ts"
 			],
+			"tear": [
+				"dist/tear.d.ts"
+			],
 			"thermal-vision": [
 				"dist/thermal-vision.d.ts"
 			],
@@ -610,7 +618,7 @@
 	},
 	"homepage": "https://www.remotion.dev/docs/effects/api",
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.521",
+		"@remotion/eslint-config-internal": "4.0.523",
 		"@vitest/browser-playwright": "4.0.9",
 		"eslint": "9.19.0",
 		"vitest": "4.0.9",