@remotion/effects 4.0.465 → 4.0.466

package/dist/esm/index.mjs

@@ -1,428 +0,0 @@
-// src/halftone.ts
-import { Internals } from "remotion";
-var { createEffect, createWebGL2ContextError } = Internals;
-var SHADE_OUTSIDE_DOT_SCALE = 0.5;
-var halftoneSchema = {
-  dotSize: {
-    type: "number",
-    min: 1,
-    max: 200,
-    step: 1,
-    default: 20,
-    description: "Dot size"
-  },
-  dotSpacing: {
-    type: "number",
-    min: 1,
-    max: 200,
-    step: 1,
-    default: 20,
-    description: "Dot spacing"
-  },
-  rotation: {
-    type: "number",
-    min: -180,
-    max: 180,
-    step: 1,
-    default: 0,
-    description: "Rotation"
-  },
-  offsetX: {
-    type: "number",
-    step: 1,
-    default: 0,
-    description: "Offset X"
-  },
-  offsetY: {
-    type: "number",
-    step: 1,
-    default: 0,
-    description: "Offset Y"
-  },
-  shape: {
-    type: "enum",
-    variants: {
-      circle: {},
-      square: {},
-      line: {}
-    },
-    default: "circle",
-    description: "Shape"
-  }
-};
-var resolve = (p) => ({
-  shape: p.shape ?? "circle",
-  dotSize: p.dotSize ?? 20,
-  dotSpacing: p.dotSpacing ?? p.dotSize ?? 20,
-  rotation: p.rotation ?? 0,
-  offsetX: p.offsetX ?? 0,
-  offsetY: p.offsetY ?? 0,
-  sampling: p.sampling ?? "bilinear",
-  color: p.color ?? "black",
-  shadeOutside: p.shadeOutside ?? false
-});
-var HALFTONE_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 HALFTONE_FS = `#version 300 es
-precision highp float;
-
-in vec2 vUv;
-out vec4 fragColor;
-
-uniform sampler2D uSource;
-uniform vec2 uResolution;
-uniform float uDotSize;
-uniform float uDotSpacing;
-uniform float uRotation;
-uniform vec2 uOffset;
-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;
-
-	vec2 d = fragPos - center;
-	float cosR = cos(uRotation);
-	float sinR = sin(uRotation);
-
-	vec2 gridPos = vec2(
-		d.x * cosR + d.y * sinR,
-		-d.x * sinR + d.y * cosR
-	);
-
-	float spacing = max(uDotSpacing, 0.001);
-	vec2 cellIndex = floor((gridPos + uOffset) / spacing + 0.5);
-	vec2 gridCenter = cellIndex * spacing - uOffset;
-
-	vec2 canvasPos = center + vec2(
-		gridCenter.x * cosR - gridCenter.y * sinR,
-		gridCenter.x * sinR + gridCenter.y * cosR
-	);
-
-	vec2 sampleUv = clamp(canvasPos / uResolution, vec2(0.0), vec2(1.0));
-	vec4 texColor = texture(uSource, sampleUv);
-
-	float alpha = texColor.a;
-	vec3 rgb = alpha > 0.001 ? texColor.rgb / alpha : vec3(0.0);
-	float lum = dot(rgb, vec3(0.299, 0.587, 0.114));
-
-	float lumDefault = lum * alpha + (1.0 - alpha);
-	float dotScale = uShadeOutside
-		? (1.0 - alpha) * SHADE_OUTSIDE_SCALE
-		: 1.0 - lumDefault;
-
-	if (dotScale <= 0.01) {
-		fragColor = vec4(0.0);
-		return;
-	}
-
-	vec2 diff = gridPos - gridCenter;
-	float halfSize = uDotSize * 0.5;
-	float coverage = 0.0;
-
-	if (uShape == 0) {
-		float radius = halfSize * dotScale;
-		float dist = length(diff);
-		coverage = 1.0 - smoothstep(radius - 0.75, radius + 0.75, dist);
-	} else if (uShape == 1) {
-		float s = uDotSize * dotScale * 0.5;
-		coverage = (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.x)))
-				 * (1.0 - smoothstep(s - 0.5, s + 0.5, abs(diff.y)));
-	} else {
-		float lineHalf = uDotSize * dotScale * 0.5;
-		coverage = (1.0 - smoothstep(halfSize - 0.5, halfSize + 0.5, abs(diff.x)))
-				 * (1.0 - smoothstep(lineHalf - 0.5, lineHalf + 0.5, abs(diff.y)));
-	}
-
-	fragColor = uColor * coverage;
-}
-`;
-var SHAPE_INDEX = {
-  circle: 0,
-  square: 1,
-  line: 2
-};
-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(`Halftone 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(`Halftone program link failed: ${log ?? "(no log)"}`);
-  }
-  return program;
-};
-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] / 255, data[1] / 255, data[2] / 255, data[3] / 255];
-};
-var halftone = createEffect({
-  type: "remotion/halftone",
-  label: "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}`;
-  },
-  setup: (target) => {
-    const gl = target.getContext("webgl2", {
-      premultipliedAlpha: true,
-      alpha: true,
-      preserveDrawingBuffer: true
-    });
-    if (!gl) {
-      throw createWebGL2ContextError("halftone effect");
-    }
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_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);
-    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.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"),
-      uResolution: gl.getUniformLocation(program, "uResolution"),
-      uDotSize: gl.getUniformLocation(program, "uDotSize"),
-      uDotSpacing: gl.getUniformLocation(program, "uDotSpacing"),
-      uRotation: gl.getUniformLocation(program, "uRotation"),
-      uOffset: gl.getUniformLocation(program, "uOffset"),
-      uColor: gl.getUniformLocation(program, "uColor"),
-      uShape: gl.getUniformLocation(program, "uShape"),
-      uShadeOutside: gl.getUniformLocation(program, "uShadeOutside"),
-      colorCtx,
-      cachedColorStr: "",
-      cachedColorRgba: [0, 0, 0, 1]
-    };
-  },
-  apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve(params);
-    const { gl, program, vao, texture } = state;
-    if (state.cachedColorStr !== r.color) {
-      state.cachedColorStr = r.color;
-      state.cachedColorRgba = parseColorRgba(state.colorCtx, r.color);
-    }
-    const [cr, cg, cb, ca] = state.cachedColorRgba;
-    const filter = r.sampling === "nearest" ? gl.NEAREST : gl.LINEAR;
-    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.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);
-    if (state.uResolution)
-      gl.uniform2f(state.uResolution, width, height);
-    if (state.uDotSize)
-      gl.uniform1f(state.uDotSize, r.dotSize);
-    if (state.uDotSpacing)
-      gl.uniform1f(state.uDotSpacing, r.dotSpacing);
-    if (state.uRotation)
-      gl.uniform1f(state.uRotation, r.rotation * Math.PI / 180);
-    if (state.uOffset)
-      gl.uniform2f(state.uOffset, r.offsetX, r.offsetY);
-    if (state.uColor)
-      gl.uniform4f(state.uColor, cr * ca, cg * ca, cb * ca, ca);
-    if (state.uShape)
-      gl.uniform1i(state.uShape, SHAPE_INDEX[r.shape]);
-    if (state.uShadeOutside)
-      gl.uniform1i(state.uShadeOutside, r.shadeOutside ? 1 : 0);
-    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: halftoneSchema,
-  validateParams: () => {}
-});
-
-// src/tint.ts
-import { Internals as Internals2 } 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/tint.ts
-var { createEffect: createEffect2 } = Internals2;
-var DEFAULT_AMOUNT = 0.5;
-var tintSchema = {
-  color: {
-    type: "color",
-    default: undefined,
-    description: "Color"
-  },
-  amount: {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: DEFAULT_AMOUNT,
-    description: "Amount"
-  }
-};
-var resolve2 = (p) => ({
-  color: p.color,
-  amount: p.amount ?? DEFAULT_AMOUNT
-});
-var validateTintParams = (params) => {
-  assertEffectParamsObject(params, "Tint");
-  assertRequiredColor(params.color, "color");
-};
-var tint = createEffect2({
-  type: "remotion/tint",
-  label: "Tint",
-  backend: "2d",
-  calculateKey: (params) => {
-    const r = resolve2(params);
-    return `tint-${r.color}-${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 tint effect. The canvas may have been assigned a different context type.");
-    }
-    const r = resolve2(params);
-    const amount = Math.max(0, Math.min(1, r.amount));
-    ctx.clearRect(0, 0, width, height);
-    ctx.globalAlpha = 1;
-    ctx.globalCompositeOperation = "source-over";
-    ctx.drawImage(source, 0, 0, width, height);
-    ctx.globalAlpha = amount;
-    ctx.globalCompositeOperation = "source-atop";
-    ctx.fillStyle = r.color;
-    ctx.fillRect(0, 0, width, height);
-    ctx.globalAlpha = 1;
-    ctx.globalCompositeOperation = "source-over";
-  },
-  cleanup: () => {
-    return;
-  },
-  schema: tintSchema,
-  validateParams: validateTintParams
-});
-
-// src/effect-internals.ts
-var EffectInternals = {
-  halftone,
-  tint
-};
-export {
-  tintSchema,
-  halftoneSchema,
-  EffectInternals
-};

package/dist/esm/invert.mjs

@@ -0,0 +1,128 @@
+// src/invert.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/invert.ts
+var { createEffect } = Internals;
+var invertSchema = {
+  amount: colorAmountSchema
+};
+var resolve = (p) => ({
+  amount: p.amount ?? DEFAULT_AMOUNT
+});
+var validateInvertParams = (params) => {
+  assertEffectParamsObject(params, "Invert");
+  assertOptionalFiniteNumber(params.amount, "amount");
+  const { amount } = resolve(params);
+  validateUnitInterval(amount, "amount");
+};
+var invert = createEffect({
+  type: "remotion/invert",
+  label: "Invert",
+  documentationLink: "https://www.remotion.dev/docs/effects/invert",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `invert-${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 invert effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve(params);
+    ctx.clearRect(0, 0, width, height);
+    ctx.filter = `invert(${r.amount * 100}%)`;
+    ctx.drawImage(source, 0, 0, width, height);
+    ctx.filter = "none";
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: invertSchema,
+  validateParams: validateInvertParams
+});
+export {
+  invert
+};