@remotion/effects 4.0.490 → 4.0.491

package/dist/esm/skew.mjs

@@ -0,0 +1,345 @@
+// src/skew.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/skew.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_X = 20;
+var DEFAULT_Y = 0;
+var DEFAULT_ORIGIN = [0.5, 0.5];
+var MAX_ABSOLUTE_ANGLE = 89;
+var skewSchema = {
+  x: {
+    type: "rotation-degrees",
+    min: -80,
+    max: 80,
+    step: 1,
+    default: DEFAULT_X,
+    description: "X angle"
+  },
+  y: {
+    type: "rotation-degrees",
+    min: -80,
+    max: 80,
+    step: 1,
+    default: DEFAULT_Y,
+    description: "Y angle"
+  },
+  origin: {
+    type: "uv-coordinate",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_ORIGIN,
+    description: "Origin"
+  }
+};
+var resolve = (params) => ({
+  x: params.x ?? DEFAULT_X,
+  y: params.y ?? DEFAULT_Y,
+  origin: [...params.origin ?? DEFAULT_ORIGIN]
+});
+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 validateUvCoordinate = (value, name) => {
+  if (value < 0 || value > 1) {
+    throw new TypeError(`"${name}" must be between 0 and 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateAngle = (value, name) => {
+  if (Math.abs(value) >= MAX_ABSOLUTE_ANGLE) {
+    throw new TypeError(`"${name}" must be greater than -${MAX_ABSOLUTE_ANGLE} and less than ${MAX_ABSOLUTE_ANGLE}, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateSkewParams = (params) => {
+  assertEffectParamsObject(params, "Skew");
+  assertOptionalFiniteNumber(params.x, "x");
+  assertOptionalFiniteNumber(params.y, "y");
+  assertOptionalUvCoordinate(params.origin, "origin");
+  const resolved = resolve(params);
+  validateAngle(resolved.x, "x");
+  validateAngle(resolved.y, "y");
+  validateUvCoordinate(resolved.origin[0], "origin[0]");
+  validateUvCoordinate(resolved.origin[1], "origin[1]");
+};
+var SKEW_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 SKEW_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform vec2 uSkew;
+uniform vec2 uOrigin;
+
+void main() {
+	vec2 destination = (vUv - uOrigin) * uResolution;
+
+	// Invert a horizontal skew followed by a vertical skew.
+	float sourceY = destination.y - uSkew.y * destination.x;
+	float sourceX = destination.x - uSkew.x * sourceY;
+	vec2 sourceUv = vec2(sourceX, sourceY) / uResolution + uOrigin;
+
+	if (any(lessThan(sourceUv, vec2(0.0))) || any(greaterThan(sourceUv, vec2(1.0)))) {
+		fragColor = vec4(0.0);
+		return;
+	}
+
+	fragColor = texture(uSource, sourceUv);
+}
+`;
+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(`Skew shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var setupSkew = (target) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl) {
+    throw createWebGL2ContextError("skew effect");
+  }
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, SKEW_VS);
+  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, SKEW_FS);
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Skew program link failed: ${log ?? "(no log)"}`);
+  }
+  const vao = gl.createVertexArray();
+  const vbo = gl.createBuffer();
+  if (!vao || !vbo) {
+    throw new Error("Failed to create WebGL geometry");
+  }
+  gl.bindVertexArray(vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), 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);
+  return {
+    gl,
+    program,
+    vao,
+    vbo,
+    texture,
+    uSource: gl.getUniformLocation(program, "uSource"),
+    uResolution: gl.getUniformLocation(program, "uResolution"),
+    uSkew: gl.getUniformLocation(program, "uSkew"),
+    uOrigin: gl.getUniformLocation(program, "uOrigin")
+  };
+};
+var skew = createEffect({
+  type: "dev.remotion.effects.skew",
+  label: "skew()",
+  documentationLink: "https://www.remotion.dev/docs/effects/skew",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const resolved = resolve(params);
+    return `skew-${resolved.x}-${resolved.y}-${resolved.origin[0]}-${resolved.origin[1]}`;
+  },
+  setup: setupSkew,
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const resolved = resolve(params);
+    const radians = Math.PI / 180;
+    const { gl } = state;
+    gl.viewport(0, 0, width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(state.program);
+    gl.bindVertexArray(state.vao);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, state.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.uResolution)
+      gl.uniform2f(state.uResolution, width, height);
+    if (state.uSkew) {
+      gl.uniform2f(state.uSkew, Math.tan(resolved.x * radians), Math.tan(resolved.y * radians));
+    }
+    if (state.uOrigin) {
+      const [originX, originY] = publicUvToShaderUv(resolved.origin);
+      gl.uniform2f(state.uOrigin, originX, originY);
+    }
+    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.deleteTexture(texture);
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+  },
+  schema: skewSchema,
+  validateParams: validateSkewParams
+});
+export {
+  skew
+};

package/dist/liquid-contours.d.ts

@@ -0,0 +1,101 @@
+export declare const liquidContoursSchema: {
+    readonly firstColor: {
+        readonly type: "color";
+        readonly default: "#ff1a0a";
+        readonly description: "First color";
+    };
+    readonly secondColor: {
+        readonly type: "color";
+        readonly default: "#050505";
+        readonly description: "Second color";
+    };
+    readonly spacing: {
+        readonly type: "number";
+        readonly min: 2;
+        readonly max: 300;
+        readonly step: 1;
+        readonly default: 62;
+        readonly description: "Spacing";
+        readonly hiddenFromList: false;
+    };
+    readonly scale: {
+        readonly type: "number";
+        readonly min: 20;
+        readonly max: 1000;
+        readonly step: 1;
+        readonly default: 300;
+        readonly description: "Scale";
+        readonly hiddenFromList: false;
+    };
+    readonly complexity: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0;
+        readonly description: "Complexity";
+        readonly hiddenFromList: false;
+    };
+    readonly smoothness: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Edge smoothness";
+        readonly hiddenFromList: false;
+    };
+    readonly seed: {
+        readonly type: "number";
+        readonly step: 1;
+        readonly default: 4;
+        readonly description: "Seed";
+        readonly hiddenFromList: false;
+    };
+    readonly offsetX: {
+        readonly type: "number";
+        readonly step: 0.1;
+        readonly default: 13.4;
+        readonly description: "Offset X";
+        readonly hiddenFromList: false;
+    };
+    readonly offsetY: {
+        readonly type: "number";
+        readonly step: 0.1;
+        readonly default: 0;
+        readonly description: "Offset Y";
+        readonly hiddenFromList: false;
+    };
+    readonly phase: {
+        readonly type: "number";
+        readonly step: 0.01;
+        readonly default: 3.23;
+        readonly description: "Phase";
+        readonly hiddenFromList: false;
+    };
+};
+export type LiquidContoursParams = {
+    /** First alternating band color. Defaults to `#ff1a0a`. */
+    readonly firstColor?: string;
+    /** Second alternating band color. Defaults to `#050505`. */
+    readonly secondColor?: string;
+    /** Width of a pair of bands in pixels. Defaults to `62`. */
+    readonly spacing?: number;
+    /** Size of the generated shapes in pixels. Defaults to `300`. */
+    readonly scale?: number;
+    /** Amount of small-scale detail from `0` to `1`. Defaults to `0`. */
+    readonly complexity?: number;
+    /** Edge softness from `0` to `1`. Defaults to `1`. */
+    readonly smoothness?: number;
+    /** Deterministic seed. Defaults to `4`. */
+    readonly seed?: number;
+    /** Horizontal pattern offset in pixels. Defaults to `13.4`. */
+    readonly offsetX?: number;
+    /** Vertical pattern offset in pixels. Defaults to `0`. */
+    readonly offsetY?: number;
+    /** Shifts the alternating bands. Defaults to `3.23`. */
+    readonly phase?: number;
+};
+export declare const liquidContours: (params?: (LiquidContoursParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

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/skew.d.ts

@@ -0,0 +1,12 @@
+export type SkewOrigin = readonly [number, number];
+export type SkewParams = {
+    /** Horizontal skew angle in degrees. Defaults to `20`. */
+    readonly x?: number;
+    /** Vertical skew angle in degrees. Defaults to `0`. */
+    readonly y?: number;
+    /** Origin of the skew in UV coordinates. Defaults to `[0.5, 0.5]`. */
+    readonly origin?: SkewOrigin;
+};
+export declare const skew: (params?: (SkewParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/effects",
-	"version": "4.0.490",
+	"version": "4.0.491",
 	"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.490"
+		"remotion": "4.0.491"
 	},
 	"exports": {
 		".": {
@@ -169,6 +169,11 @@
 			"module": "./dist/esm/linear-gradient-tint.mjs",
 			"import": "./dist/esm/linear-gradient-tint.mjs"
 		},
+		"./liquid-contours": {
+			"types": "./dist/liquid-contours.d.ts",
+			"module": "./dist/esm/liquid-contours.mjs",
+			"import": "./dist/esm/liquid-contours.mjs"
+		},
 		"./linear-progressive-blur": {
 			"types": "./dist/linear-progressive-blur.d.ts",
 			"module": "./dist/esm/linear-progressive-blur.mjs",
@@ -259,6 +264,11 @@
 			"module": "./dist/esm/shrinkwrap.mjs",
 			"import": "./dist/esm/shrinkwrap.mjs"
 		},
+		"./skew": {
+			"types": "./dist/skew.d.ts",
+			"module": "./dist/esm/skew.mjs",
+			"import": "./dist/esm/skew.mjs"
+		},
 		"./speckle": {
 			"types": "./dist/speckle.d.ts",
 			"module": "./dist/esm/speckle.mjs",
@@ -404,6 +414,9 @@
 			"linear-gradient-tint": [
 				"dist/linear-gradient-tint.d.ts"
 			],
+			"liquid-contours": [
+				"dist/liquid-contours.d.ts"
+			],
 			"linear-progressive-blur": [
 				"dist/linear-progressive-blur.d.ts"
 			],
@@ -458,6 +471,9 @@
 			"shrinkwrap": [
 				"dist/shrinkwrap.d.ts"
 			],
+			"skew": [
+				"dist/skew.d.ts"
+			],
 			"speckle": [
 				"dist/speckle.d.ts"
 			],
@@ -498,7 +514,7 @@
 	},
 	"homepage": "https://www.remotion.dev/docs/effects/api",
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.490",
+		"@remotion/eslint-config-internal": "4.0.491",
 		"@vitest/browser-playwright": "4.0.9",
 		"eslint": "9.19.0",
 		"vitest": "4.0.9",