@remotion/effects 4.0.464 → 4.0.466

package/dist/esm/brightness.mjs

@@ -0,0 +1,138 @@
+// src/brightness.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/brightness.ts
+var { createEffect } = Internals;
+var brightnessSchema = {
+  amount: brightnessAmountSchema
+};
+var resolve = (p) => ({
+  amount: p.amount ?? DEFAULT_BRIGHTNESS_AMOUNT
+});
+var validateBrightnessParams = (params) => {
+  assertEffectParamsObject(params, "Brightness");
+  assertOptionalFiniteNumber(params.amount, "amount");
+  const { amount } = resolve(params);
+  validateSignedUnitInterval(amount, "amount");
+};
+var brightness = createEffect({
+  type: "remotion/brightness",
+  label: "Brightness",
+  documentationLink: "https://www.remotion.dev/docs/effects/brightness",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `brightness-${r.amount}`;
+  },
+  setup: () => null,
+  apply: ({ source, target, width, height, params }) => {
+    const ctx = target.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to acquire 2D context for brightness effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve(params);
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(source, 0, 0, width, height);
+    if (r.amount === 0) {
+      return;
+    }
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const delta = Math.round(r.amount * 255);
+    const { data } = imageData;
+    for (let i = 0;i < data.length; i += 4) {
+      data[i] = clampColorChannel(data[i] + delta);
+      data[i + 1] = clampColorChannel(data[i + 1] + delta);
+      data[i + 2] = clampColorChannel(data[i + 2] + delta);
+    }
+    ctx.putImageData(imageData, 0, 0);
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: brightnessSchema,
+  validateParams: validateBrightnessParams
+});
+export {
+  brightness
+};

package/dist/esm/grayscale.mjs

@@ -0,0 +1,128 @@
+// src/grayscale.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/grayscale.ts
+var { createEffect } = Internals;
+var grayscaleSchema = {
+  amount: colorAmountSchema
+};
+var resolve = (p) => ({
+  amount: p.amount ?? DEFAULT_AMOUNT
+});
+var validateGrayscaleParams = (params) => {
+  assertEffectParamsObject(params, "Grayscale");
+  assertOptionalFiniteNumber(params.amount, "amount");
+  const { amount } = resolve(params);
+  validateUnitInterval(amount, "amount");
+};
+var grayscale = createEffect({
+  type: "remotion/grayscale",
+  label: "Grayscale",
+  documentationLink: "https://www.remotion.dev/docs/effects/grayscale",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `grayscale-${r.amount}`;
+  },
+  setup: () => null,
+  apply: ({ source, target, width, height, params }) => {
+    const ctx = target.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to acquire 2D context for grayscale effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve(params);
+    ctx.clearRect(0, 0, width, height);
+    ctx.filter = `grayscale(${r.amount * 100}%)`;
+    ctx.drawImage(source, 0, 0, width, height);
+    ctx.filter = "none";
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: grayscaleSchema,
+  validateParams: validateGrayscaleParams
+});
+export {
+  grayscale
+};

package/dist/esm/halftone.mjs

@@ -1,18 +1,91 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: (newValue) => all[name] = () => newValue
-    });
+// src/halftone.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/halftone.ts
-import { Internals } from "remotion";
 var { createEffect, createWebGL2ContextError } = Internals;
-var SHADE_OUTSIDE_DOT_SCALE = 0.5;
+var HALFTONE_SHAPES = ["circle", "square", "line"];
+var HALFTONE_SAMPLING = ["bilinear", "nearest"];
 var halftoneSchema = {
   dotSize: {
     type: "number",
@@ -59,6 +132,46 @@ var halftoneSchema = {
     },
     default: "circle",
     description: "Shape"
+  },
+  invert: {
+    type: "boolean",
+    default: false,
+    description: "Invert"
+  },
+  color: {
+    type: "color",
+    default: "black",
+    description: "Color"
+  }
+};
+var formatEnum = (variants) => {
+  if (variants.length === 2) {
+    return `"${variants[0]}" or "${variants[1]}"`;
+  }
+  return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
+};
+var assertOptionalEnum = (value, name, variants) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "string" || !variants.includes(value)) {
+    throw new TypeError(`"${name}" must be ${formatEnum(variants)}`);
+  }
+};
+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)}`);
+  }
+};
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
   }
 };
 var resolve = (p) => ({
@@ -70,8 +183,26 @@ var resolve = (p) => ({
   offsetY: p.offsetY ?? 0,
   sampling: p.sampling ?? "bilinear",
   color: p.color ?? "black",
-  shadeOutside: p.shadeOutside ?? false
+  invert: p.invert ?? false
 });
+var validateHalftoneParams = (params) => {
+  assertEffectParamsObject(params, "Halftone");
+  assertOptionalFiniteNumber(params.dotSize, "dotSize");
+  assertOptionalFiniteNumber(params.dotSpacing, "dotSpacing");
+  assertOptionalFiniteNumber(params.rotation, "rotation");
+  assertOptionalFiniteNumber(params.offsetX, "offsetX");
+  assertOptionalFiniteNumber(params.offsetY, "offsetY");
+  assertOptionalEnum(params.shape, "shape", HALFTONE_SHAPES);
+  assertOptionalEnum(params.sampling, "sampling", HALFTONE_SAMPLING);
+  assertOptionalColor(params.color, "color");
+  assertOptionalBoolean(params.invert, "invert");
+  if (params.dotSize !== undefined && params.dotSize < 1) {
+    throw new TypeError(`"dotSize" must be >= 1, but got ${JSON.stringify(params.dotSize)}`);
+  }
+  if (params.dotSpacing !== undefined && params.dotSpacing < 1) {
+    throw new TypeError(`"dotSpacing" must be >= 1, but got ${JSON.stringify(params.dotSpacing)}`);
+  }
+};
 var HALFTONE_VS = `#version 300 es
 in vec2 aPos;
 in vec2 aUv;
@@ -97,8 +228,6 @@ uniform vec4 uColor;
 uniform int uShape;
 uniform bool uShadeOutside;
 
-const float SHADE_OUTSIDE_SCALE = ${SHADE_OUTSIDE_DOT_SCALE.toFixed(1)};
-
 void main() {
 	vec2 fragPos = vUv * uResolution;
 	vec2 center = uResolution * 0.5;
@@ -130,7 +259,7 @@ void main() {
 
 	float lumDefault = lum * alpha + (1.0 - alpha);
 	float dotScale = uShadeOutside
-		? (1.0 - alpha) * SHADE_OUTSIDE_SCALE
+		? lumDefault
 		: 1.0 - lumDefault;
 
 	if (dotScale <= 0.01) {
@@ -203,10 +332,11 @@ var parseColorRgba = (ctx, color) => {
 var halftone = createEffect({
   type: "remotion/halftone",
   label: "Halftone",
+  documentationLink: "https://www.remotion.dev/docs/effects/halftone",
   backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
-    return `halftone-${r.shape}-${r.dotSize}-${r.dotSpacing}-${r.rotation}-${r.offsetX}-${r.offsetY}-${r.sampling}-${r.color}-${r.shadeOutside ? 1 : 0}`;
+    return `halftone-${r.shape}-${r.dotSize}-${r.dotSpacing}-${r.rotation}-${r.offsetX}-${r.offsetY}-${r.sampling}-${r.color}-${r.invert ? 1 : 0}`;
   },
   setup: (target) => {
     const gl = target.getContext("webgl2", {
@@ -218,7 +348,6 @@ var halftone = createEffect({
       throw createWebGL2ContextError("halftone effect");
     }
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
     const vs = compileShader(gl, gl.VERTEX_SHADER, HALFTONE_VS);
     const fs = compileShader(gl, gl.FRAGMENT_SHADER, HALFTONE_FS);
     const program = linkProgram(gl, vs, fs);
@@ -295,7 +424,7 @@ var halftone = createEffect({
       cachedColorRgba: [0, 0, 0, 1]
     };
   },
-  apply: ({ source, width, height, params, state }) => {
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
     const r = resolve(params);
     const { gl, program, vao, texture } = state;
     if (state.cachedColorStr !== r.color) {
@@ -313,6 +442,7 @@ var halftone = createEffect({
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+    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);
@@ -331,7 +461,7 @@ var halftone = createEffect({
     if (state.uShape)
       gl.uniform1i(state.uShape, SHAPE_INDEX[r.shape]);
     if (state.uShadeOutside)
-      gl.uniform1i(state.uShadeOutside, r.shadeOutside ? 1 : 0);
+      gl.uniform1i(state.uShadeOutside, r.invert ? 1 : 0);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     gl.bindVertexArray(null);
     gl.bindTexture(gl.TEXTURE_2D, null);
@@ -344,7 +474,7 @@ var halftone = createEffect({
     gl.deleteTexture(texture);
   },
   schema: halftoneSchema,
-  validateParams: () => {}
+  validateParams: validateHalftoneParams
 });
 export {
   halftoneSchema,

package/dist/esm/hue.mjs

@@ -0,0 +1,126 @@
+// src/hue.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/hue.ts
+var { createEffect } = Internals;
+var hueSchema = {
+  degrees: hueDegreesSchema
+};
+var resolve = (p) => ({
+  degrees: p.degrees ?? DEFAULT_HUE_DEGREES
+});
+var validateHueParams = (params) => {
+  assertEffectParamsObject(params, "Hue");
+  assertOptionalFiniteNumber(params.degrees, "degrees");
+};
+var hue = createEffect({
+  type: "remotion/hue",
+  label: "Hue",
+  documentationLink: "https://www.remotion.dev/docs/effects/hue",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `hue-${r.degrees}`;
+  },
+  setup: () => null,
+  apply: ({ source, target, width, height, params }) => {
+    const ctx = target.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to acquire 2D context for hue effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve(params);
+    ctx.clearRect(0, 0, width, height);
+    ctx.filter = `hue-rotate(${r.degrees}deg)`;
+    ctx.drawImage(source, 0, 0, width, height);
+    ctx.filter = "none";
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: hueSchema,
+  validateParams: validateHueParams
+});
+export {
+  hue
+};

package/dist/esm/index.mjs

@@ -1 +0,0 @@
-export {};