@remotion/effects 4.0.522 → 4.0.523

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/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.522",
+	"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.522"
+		"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.522",
+		"@remotion/eslint-config-internal": "4.0.523",
 		"@vitest/browser-playwright": "4.0.9",
 		"eslint": "9.19.0",
 		"vitest": "4.0.9",