@remotion/effects 4.0.465 → 4.0.467

package/dist/esm/translate.mjs

@@ -0,0 +1,205 @@
+// src/translate/index.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)}`);
+  }
+};
+
+// 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"
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount"
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount"
+};
+var hueDegreesSchema = {
+  type: "number",
+  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));
+};
+
+// src/translate/index.ts
+var { createEffect } = Internals;
+var xyTranslateSchema = {
+  x: {
+    type: "number",
+    step: 1,
+    default: 0,
+    description: "X"
+  },
+  y: {
+    type: "number",
+    step: 1,
+    default: 0,
+    description: "Y"
+  }
+};
+var uvTranslateSchema = {
+  u: {
+    type: "number",
+    step: 0.01,
+    default: 0,
+    description: "U"
+  },
+  v: {
+    type: "number",
+    step: 0.01,
+    default: 0,
+    description: "V"
+  }
+};
+var resolveXyTranslate = (params) => ({
+  x: params.x ?? 0,
+  y: params.y ?? 0
+});
+var resolveUvTranslate = (params) => ({
+  u: params.u ?? 0,
+  v: params.v ?? 0
+});
+var validateXyTranslateParams = (params) => {
+  assertEffectParamsObject(params, "xyTranslate");
+  assertOptionalFiniteNumber(params.x, "x");
+  assertOptionalFiniteNumber(params.y, "y");
+};
+var validateUvTranslateParams = (params) => {
+  assertEffectParamsObject(params, "uvTranslate");
+  assertOptionalFiniteNumber(params.u, "u");
+  assertOptionalFiniteNumber(params.v, "v");
+};
+var applyTranslate = ({
+  source,
+  target,
+  width,
+  height,
+  x,
+  y
+}) => {
+  const ctx = target.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to acquire 2D context for translate effect. The canvas may have been assigned a different context type.");
+  }
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(source, x, y, width, height);
+};
+var xyTranslate = createEffect({
+  type: "remotion/xy-translate",
+  label: "XY Translate",
+  documentationLink: "https://www.remotion.dev/docs/effects/xy-translate",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolveXyTranslate(params);
+    return `xy-translate-${r.x}-${r.y}`;
+  },
+  setup: () => null,
+  apply: ({ source, target, width, height, params }) => {
+    const r = resolveXyTranslate(params);
+    applyTranslate({
+      source,
+      target,
+      width,
+      height,
+      x: r.x,
+      y: r.y
+    });
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: xyTranslateSchema,
+  validateParams: validateXyTranslateParams
+});
+var uvTranslate = createEffect({
+  type: "remotion/uv-translate",
+  label: "UV Translate",
+  documentationLink: "https://www.remotion.dev/docs/effects/uv-translate",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolveUvTranslate(params);
+    return `uv-translate-${r.u}-${r.v}`;
+  },
+  setup: () => null,
+  apply: ({ source, target, width, height, params }) => {
+    const r = resolveUvTranslate(params);
+    applyTranslate({
+      source,
+      target,
+      width,
+      height,
+      x: r.u * width,
+      y: r.v * height
+    });
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: uvTranslateSchema,
+  validateParams: validateUvTranslateParams
+});
+export {
+  xyTranslate,
+  uvTranslate
+};

package/dist/esm/wave.mjs

@@ -297,6 +297,7 @@ var validateWaveParams = (params) => {
 var wave = createEffect({
   type: "remotion/wave",
   label: "Wave",
+  documentationLink: "https://www.remotion.dev/docs/effects/wave",
   backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);

package/dist/grayscale.d.ts

@@ -0,0 +1,7 @@
+export type GrayscaleParams = {
+    /** Mix between original color and grayscale. Defaults to `1`. */
+    readonly amount?: number;
+};
+export declare const grayscale: (params?: (GrayscaleParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/halftone.d.ts

@@ -1,3 +1,6 @@
+declare const HALFTONE_SHAPES: readonly ["circle", "square", "line"];
+declare const HALFTONE_SAMPLING: readonly ["bilinear", "nearest"];
+declare const HALFTONE_COLOR_MODES: readonly ["solid", "source"];
 export declare const halftoneSchema: {
     readonly dotSize: {
         readonly type: "number";
@@ -45,10 +48,31 @@ export declare const halftoneSchema: {
         readonly default: "circle";
         readonly description: "Shape";
     };
+    readonly invert: {
+        readonly type: "boolean";
+        readonly default: false;
+        readonly description: "Invert";
+    };
+    readonly colorMode: {
+        readonly type: "enum";
+        readonly default: "solid";
+        readonly description: "Color mode";
+        readonly variants: {
+            readonly solid: {
+                readonly dotColor: {
+                    readonly type: "color";
+                    readonly default: "red";
+                    readonly description: "Dot color";
+                };
+            };
+            readonly source: {};
+        };
+    };
 };
-export type HalftoneShape = 'circle' | 'square' | 'line';
-export type HalftoneSampling = 'bilinear' | 'nearest';
-export type HalftoneParams = {
+export type HalftoneShape = (typeof HALFTONE_SHAPES)[number];
+export type HalftoneSampling = (typeof HALFTONE_SAMPLING)[number];
+export type HalftoneColorMode = (typeof HALFTONE_COLOR_MODES)[number];
+type HalftoneCommonParams = {
     readonly shape?: HalftoneShape;
     readonly dotSize?: number;
     /**
@@ -60,16 +84,21 @@ export type HalftoneParams = {
     readonly offsetX?: number;
     readonly offsetY?: number;
     readonly sampling?: HalftoneSampling;
-    /** Dot color. Defaults to black. */
-    readonly color?: string;
     /**
-     * When false (default), halftone follows luminance on opaque pixels (classic
-     * halftone on your subject). When true, the same dot pattern fills transparent
-     * and low-alpha areas instead—e.g. the canvas around a cut-out shape—while
-     * leaving the opaque shape mostly free of those dots.
+     * When false (default), dark areas produce larger dots.
+     * When true, the pattern is inverted:
+     * bright and transparent areas produce larger dots instead.
      */
-    readonly shadeOutside?: boolean;
+    readonly invert?: boolean;
 };
+export type HalftoneParams = HalftoneCommonParams & ({
+    readonly colorMode?: 'solid';
+    /** Dot color. Defaults to red. */
+    readonly dotColor?: string;
+} | {
+    readonly colorMode: 'source';
+});
 export declare const halftone: (params?: (HalftoneParams & {
     readonly disabled?: boolean | undefined;
 }) | undefined) => import("remotion").EffectDescriptor<unknown>;
+export {};

package/dist/hue.d.ts

@@ -0,0 +1,7 @@
+export type HueParams = {
+    /** Hue rotation in degrees. Defaults to `0`. */
+    readonly degrees?: number;
+};
+export declare const hue: (params?: (HueParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/index.d.ts

@@ -1,3 +1 @@
-export { EffectInternals } from './effect-internals.js';
-export { halftoneSchema, type HalftoneParams } from './halftone.js';
-export { tintSchema, type TintParams } from './tint.js';
+export {};

package/dist/invert.d.ts

@@ -0,0 +1,7 @@
+export type InvertParams = {
+    /** Mix between original color and inverted color. Defaults to `1`. */
+    readonly amount?: number;
+};
+export declare const invert: (params?: (InvertParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/mirror/index.d.ts

@@ -0,0 +1,13 @@
+import { type MirrorDirection } from './mirror-runtime.js';
+export type { MirrorDirection };
+export type MirrorParams = {
+    /** Mirror direction. Defaults to `horizontal`. */
+    readonly direction?: MirrorDirection;
+    /** Mirror position in UV coordinates. Defaults to `0.5`. */
+    readonly position?: number;
+    /** Mirror the other side of the image. Defaults to `false`. */
+    readonly invert?: boolean;
+};
+export declare const mirror: (params?: (MirrorParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/mirror/mirror-runtime.d.ts

@@ -0,0 +1,26 @@
+export type MirrorDirection = 'horizontal' | 'vertical';
+export type MirrorState = {
+    gl: WebGL2RenderingContext;
+    program: WebGLProgram;
+    vao: WebGLVertexArrayObject;
+    vbo: WebGLBuffer;
+    textureSource: WebGLTexture;
+    uniforms: {
+        uSource: WebGLUniformLocation | null;
+        uPosition: WebGLUniformLocation | null;
+        uDirection: WebGLUniformLocation | null;
+        uInvert: WebGLUniformLocation | null;
+    };
+};
+export declare const setupMirror: (target: HTMLCanvasElement) => MirrorState;
+export declare const cleanupMirror: (state: MirrorState) => void;
+export declare const applyMirror: ({ state, source, width, height, position, direction, invert, flipSourceY, }: {
+    readonly state: MirrorState;
+    readonly source: CanvasImageSource;
+    readonly width: number;
+    readonly height: number;
+    readonly position: number;
+    readonly direction: MirrorDirection;
+    readonly invert: boolean;
+    readonly flipSourceY: boolean;
+}) => void;

package/dist/mirror/mirror-shaders.d.ts

@@ -0,0 +1,2 @@
+export declare const MIRROR_VS = "#version 300 es\nlayout(location = 0) in vec2 aPos;\nlayout(location = 1) in vec2 aUv;\nout vec2 vUv;\nvoid main() {\n\tvUv = aUv;\n\tgl_Position = vec4(aPos, 0.0, 1.0);\n}\n";
+export declare const MIRROR_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform float uPosition;\nuniform int uDirection;\nuniform bool uInvert;\n\nvoid main() {\n\tvec2 srcUv = vUv;\n\tfloat coord = uDirection == 0 ? vUv.x : vUv.y;\n\tbool shouldMirror = uInvert ? coord < uPosition : coord > uPosition;\n\n\tif (shouldMirror) {\n\t\tfloat mirrored = 2.0 * uPosition - coord;\n\t\tif (uDirection == 0) {\n\t\t\tsrcUv.x = mirrored;\n\t\t} else {\n\t\t\tsrcUv.y = mirrored;\n\t\t}\n\t}\n\n\tfragColor = texture(uSource, clamp(srcUv, vec2(0.0), vec2(1.0)));\n}\n";

package/dist/mirror.d.ts

@@ -0,0 +1 @@
+export { mirror, type MirrorDirection, type MirrorParams, } from './mirror/index.js';

package/dist/saturation.d.ts

@@ -0,0 +1,7 @@
+export type SaturationParams = {
+    /** Saturation multiplier. `1` leaves colors unchanged, `0` makes them grayscale. Defaults to `1`. */
+    readonly amount?: number;
+};
+export declare const saturation: (params?: (SaturationParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/scale/index.d.ts

@@ -0,0 +1,11 @@
+export type ScaleParams = {
+    /** Scale factor. Defaults to `1`. Must be greater than 0. */
+    readonly scale: number;
+    /** Whether to apply horizontal scaling. Defaults to `true`. */
+    readonly horizontal?: boolean;
+    /** Whether to apply vertical scaling. Defaults to `true`. */
+    readonly vertical?: boolean;
+};
+export declare const scale: (params: ScaleParams & {
+    readonly disabled?: boolean | undefined;
+}) => import("remotion").EffectDescriptor<unknown>;

package/dist/scale.d.ts

@@ -0,0 +1 @@
+export { scale, type ScaleParams } from './scale/index.js';

package/dist/translate/index.d.ts

@@ -0,0 +1,18 @@
+export type XyTranslateParams = {
+    /** Horizontal offset in pixels. Defaults to `0`. */
+    readonly x?: number;
+    /** Vertical offset in pixels. Defaults to `0`. */
+    readonly y?: number;
+};
+export type UvTranslateParams = {
+    /** Horizontal offset in UV coordinates. `1` equals the full canvas width. Defaults to `0`. */
+    readonly u?: number;
+    /** Vertical offset in UV coordinates. `1` equals the full canvas height. Defaults to `0`. */
+    readonly v?: number;
+};
+export declare const xyTranslate: (params?: (XyTranslateParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;
+export declare const uvTranslate: (params?: (UvTranslateParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/translate.d.ts

@@ -0,0 +1 @@
+export { uvTranslate, xyTranslate, type UvTranslateParams, type XyTranslateParams, } from './translate/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/effects",
-	"version": "4.0.465",
+	"version": "4.0.467",
 	"description": "Effects that can be applied to Remotion-based canvas components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.465"
+		"remotion": "4.0.467"
 	},
 	"exports": {
 		".": {
@@ -32,11 +32,76 @@
 			"module": "./dist/esm/index.mjs",
 			"import": "./dist/esm/index.mjs"
 		},
+		"./barrel-distortion": {
+			"types": "./dist/barrel-distortion.d.ts",
+			"module": "./dist/esm/barrel-distortion.mjs",
+			"import": "./dist/esm/barrel-distortion.mjs"
+		},
 		"./blur": {
 			"types": "./dist/blur.d.ts",
 			"module": "./dist/esm/blur.mjs",
 			"import": "./dist/esm/blur.mjs"
 		},
+		"./chromatic-aberration": {
+			"types": "./dist/chromatic-aberration.d.ts",
+			"module": "./dist/esm/chromatic-aberration.mjs",
+			"import": "./dist/esm/chromatic-aberration.mjs"
+		},
+		"./brightness": {
+			"types": "./dist/brightness.d.ts",
+			"module": "./dist/esm/brightness.mjs",
+			"import": "./dist/esm/brightness.mjs"
+		},
+		"./contrast": {
+			"types": "./dist/contrast.d.ts",
+			"module": "./dist/esm/contrast.mjs",
+			"import": "./dist/esm/contrast.mjs"
+		},
+		"./halftone": {
+			"types": "./dist/halftone.d.ts",
+			"module": "./dist/esm/halftone.mjs",
+			"import": "./dist/esm/halftone.mjs"
+		},
+		"./grayscale": {
+			"types": "./dist/grayscale.d.ts",
+			"module": "./dist/esm/grayscale.mjs",
+			"import": "./dist/esm/grayscale.mjs"
+		},
+		"./hue": {
+			"types": "./dist/hue.d.ts",
+			"module": "./dist/esm/hue.mjs",
+			"import": "./dist/esm/hue.mjs"
+		},
+		"./invert": {
+			"types": "./dist/invert.d.ts",
+			"module": "./dist/esm/invert.mjs",
+			"import": "./dist/esm/invert.mjs"
+		},
+		"./mirror": {
+			"types": "./dist/mirror.d.ts",
+			"module": "./dist/esm/mirror.mjs",
+			"import": "./dist/esm/mirror.mjs"
+		},
+		"./saturation": {
+			"types": "./dist/saturation.d.ts",
+			"module": "./dist/esm/saturation.mjs",
+			"import": "./dist/esm/saturation.mjs"
+		},
+		"./scale": {
+			"types": "./dist/scale.d.ts",
+			"module": "./dist/esm/scale.mjs",
+			"import": "./dist/esm/scale.mjs"
+		},
+		"./tint": {
+			"types": "./dist/tint.d.ts",
+			"module": "./dist/esm/tint.mjs",
+			"import": "./dist/esm/tint.mjs"
+		},
+		"./translate": {
+			"types": "./dist/translate.d.ts",
+			"module": "./dist/esm/translate.mjs",
+			"import": "./dist/esm/translate.mjs"
+		},
 		"./wave": {
 			"types": "./dist/wave.d.ts",
 			"module": "./dist/esm/wave.mjs",
@@ -46,9 +111,48 @@
 	},
 	"typesVersions": {
 		">=1.0": {
+			"barrel-distortion": [
+				"dist/barrel-distortion.d.ts"
+			],
 			"blur": [
 				"dist/blur.d.ts"
 			],
+			"chromatic-aberration": [
+				"dist/chromatic-aberration.d.ts"
+			],
+			"brightness": [
+				"dist/brightness.d.ts"
+			],
+			"contrast": [
+				"dist/contrast.d.ts"
+			],
+			"halftone": [
+				"dist/halftone.d.ts"
+			],
+			"grayscale": [
+				"dist/grayscale.d.ts"
+			],
+			"hue": [
+				"dist/hue.d.ts"
+			],
+			"invert": [
+				"dist/invert.d.ts"
+			],
+			"mirror": [
+				"dist/mirror.d.ts"
+			],
+			"saturation": [
+				"dist/saturation.d.ts"
+			],
+			"scale": [
+				"dist/scale.d.ts"
+			],
+			"tint": [
+				"dist/tint.d.ts"
+			],
+			"translate": [
+				"dist/translate.d.ts"
+			],
 			"wave": [
 				"dist/wave.d.ts"
 			]
@@ -56,7 +160,7 @@
 	},
 	"homepage": "https://www.remotion.dev/docs/effects/api",
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.465",
+		"@remotion/eslint-config-internal": "4.0.467",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},