@remotion/effects 4.0.467 → 4.0.469

package/dist/color-utils.d.ts

@@ -35,3 +35,5 @@ export declare const validateUnitInterval: (value: number, name: string) => void
 export declare const validateNonNegative: (value: number, name: string) => void;
 export declare const validateSignedUnitInterval: (value: number, name: string) => void;
 export declare const clampColorChannel: (value: number) => number;
+export type ParsedColorRgba = readonly [number, number, number, number];
+export declare const parseColorRgba: (ctx: CanvasRenderingContext2D, color: string) => ParsedColorRgba;

package/dist/dot-grid.d.ts

@@ -0,0 +1,31 @@
+export declare const dotGridSchema: {
+    readonly dotSize: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 400;
+        readonly step: 1;
+        readonly default: 16;
+        readonly description: "Dot size";
+    };
+    readonly gridSize: {
+        readonly type: "number";
+        readonly min: 1;
+        readonly max: 400;
+        readonly step: 1;
+        readonly default: 20;
+        readonly description: "Grid size";
+    };
+    readonly invert: {
+        readonly type: "boolean";
+        readonly default: false;
+        readonly description: "Invert";
+    };
+};
+export type DotGridParams = {
+    readonly dotSize?: number;
+    readonly gridSize?: number;
+    readonly invert?: boolean;
+};
+export declare const dotGrid: (params?: (DotGridParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/drop-shadow/drop-shadow-runtime.d.ts

@@ -0,0 +1,54 @@
+import type { ParsedColorRgba } from '../color-utils.js';
+export type DropShadowState = {
+    readonly gl: WebGL2RenderingContext;
+    readonly programExtract: WebGLProgram;
+    readonly programHorizontal: WebGLProgram;
+    readonly programVertical: WebGLProgram;
+    readonly programComposite: WebGLProgram;
+    readonly vao: WebGLVertexArrayObject;
+    readonly vbo: WebGLBuffer;
+    readonly textureSource: WebGLTexture;
+    readonly textureShadowA: WebGLTexture;
+    readonly textureShadowB: WebGLTexture;
+    readonly framebuffer: WebGLFramebuffer;
+    readonly extract: {
+        readonly uSource: WebGLUniformLocation | null;
+        readonly uColor: WebGLUniformLocation | null;
+        readonly uOpacity: WebGLUniformLocation | null;
+    };
+    readonly horizontal: {
+        readonly uRadius: WebGLUniformLocation | null;
+        readonly uTexelSize: WebGLUniformLocation | null;
+        readonly uSource: WebGLUniformLocation | null;
+    };
+    readonly vertical: {
+        readonly uRadius: WebGLUniformLocation | null;
+        readonly uTexelSize: WebGLUniformLocation | null;
+        readonly uSource: WebGLUniformLocation | null;
+    };
+    readonly composite: {
+        readonly uSource: WebGLUniformLocation | null;
+        readonly uShadow: WebGLUniformLocation | null;
+        readonly uOffset: WebGLUniformLocation | null;
+        readonly uTexelSize: WebGLUniformLocation | null;
+    };
+    readonly colorCtx: CanvasRenderingContext2D;
+    cachedColorStr: string;
+    cachedColorRgba: ParsedColorRgba;
+};
+export declare const setupDropShadow: (target: HTMLCanvasElement) => DropShadowState;
+export declare const cleanupDropShadow: ({ gl, programExtract, programHorizontal, programVertical, programComposite, vao, vbo, textureSource, textureShadowA, textureShadowB, framebuffer, }: DropShadowState) => void;
+type ApplyDropShadowParams = {
+    readonly state: DropShadowState;
+    readonly source: CanvasImageSource;
+    readonly width: number;
+    readonly height: number;
+    readonly radius: number;
+    readonly offsetX: number;
+    readonly offsetY: number;
+    readonly opacity: number;
+    readonly color: ParsedColorRgba;
+    readonly flipSourceY: boolean;
+};
+export declare const applyDropShadow: ({ state, source, width, height, radius, offsetX, offsetY, opacity, color, flipSourceY, }: ApplyDropShadowParams) => void;
+export {};

package/dist/drop-shadow/drop-shadow-shaders.d.ts

@@ -0,0 +1,5 @@
+export declare const DROP_SHADOW_VS = "#version 300 es\nlayout(location = 0) in vec2 aPos;\nlayout(location = 1) in vec2 aUv;\nout vec2 vUv;\n\nvoid main() {\n\tvUv = aUv;\n\tgl_Position = vec4(aPos, 0.0, 1.0);\n}\n";
+export declare const DROP_SHADOW_EXTRACT_FS = "#version 300 es\nprecision highp float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec4 uColor;\nuniform float uOpacity;\n\nvoid main() {\n\tvec4 source = texture(uSource, vUv);\n\tfloat shadowAlpha = source.a * uColor.a * clamp(uOpacity, 0.0, 1.0);\n\n\tfragColor = vec4(uColor.rgb * shadowAlpha, shadowAlpha);\n}\n";
+export declare const DROP_SHADOW_BLUR_FS_HORIZONTAL: string;
+export declare const DROP_SHADOW_BLUR_FS_VERTICAL: string;
+export declare const DROP_SHADOW_COMPOSITE_FS = "#version 300 es\nprecision highp float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform sampler2D uShadow;\nuniform vec2 uOffset;\nuniform vec2 uTexelSize;\n\nvoid main() {\n\tvec4 source = texture(uSource, vUv);\n\tvec2 shadowUv = vUv - vec2(uOffset.x, -uOffset.y) * uTexelSize;\n\tvec4 shadow = vec4(0.0);\n\n\tif (\n\t\tshadowUv.x >= 0.0 &&\n\t\tshadowUv.x <= 1.0 &&\n\t\tshadowUv.y >= 0.0 &&\n\t\tshadowUv.y <= 1.0\n\t) {\n\t\tshadow = texture(uShadow, shadowUv);\n\t}\n\n\tfragColor = source + shadow * (1.0 - source.a);\n}\n";

package/dist/drop-shadow/index.d.ts

@@ -0,0 +1,15 @@
+export type DropShadowParams = {
+    /** Blur radius of the shadow in pixels. Defaults to `12`. */
+    readonly radius?: number;
+    /** Horizontal shadow offset in pixels. Defaults to `8`. */
+    readonly offsetX?: number;
+    /** Vertical shadow offset in pixels. Defaults to `8`. */
+    readonly offsetY?: number;
+    /** Shadow opacity from `0` to `1`. Defaults to `0.5`. */
+    readonly opacity?: number;
+    /** Color of the shadow. Defaults to black. */
+    readonly color?: string;
+};
+export declare const dropShadow: (params?: (DropShadowParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/drop-shadow.d.ts

@@ -0,0 +1 @@
+export { dropShadow, type DropShadowParams } from './drop-shadow/index.js';

package/dist/duotone.d.ts

@@ -0,0 +1,31 @@
+export declare const duotoneSchema: {
+    readonly darkColor: {
+        readonly type: "color";
+        readonly default: "#000000";
+        readonly description: "Dark color";
+    };
+    readonly lightColor: {
+        readonly type: "color";
+        readonly default: "#ffffff";
+        readonly description: "Light color";
+    };
+    readonly threshold: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0.5;
+        readonly description: "Luminance threshold";
+    };
+};
+export type DuotoneParams = {
+    /** Color used for pixels below the luminance threshold. Defaults to black. */
+    readonly darkColor?: string;
+    /** Color used for pixels at or above the luminance threshold. Defaults to white. */
+    readonly lightColor?: string;
+    /** Luminance threshold from `0` to `1`. Defaults to `0.5`. */
+    readonly threshold?: number;
+};
+export declare const duotone: (params?: (DuotoneParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/esm/barrel-distortion.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     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);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 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/barrel-distortion/barrel-distortion-runtime.ts
 import { Internals } from "remotion";
@@ -301,7 +314,7 @@ var validateBarrelDistortionParams = (params) => {
 };
 var barrelDistortion = createEffect({
   type: "remotion/barrel-distortion",
-  label: "Barrel Distortion",
+  label: "barrelDistortion()",
   documentationLink: "https://www.remotion.dev/docs/effects/barrel-distortion",
   backend: "webgl2",
   calculateKey: (params) => {

package/dist/esm/blur.mjs

@@ -17,24 +17,22 @@ var assertRequiredColor = (value, name) => {
     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);
+};
 
 // src/blur/blur-runtime.ts
 import { Internals } from "remotion";
 
-// src/blur/blur-shaders.ts
-var BLUR_VS = `#version 300 es
-layout(location = 0) in vec2 aPos;
-layout(location = 1) in vec2 aUv;
-out vec2 vUv;
-void main() {
-	vUv = aUv;
-	gl_Position = vec4(aPos, 0.0, 1.0);
-}
-`;
-var buildFs = (direction) => {
+// src/gaussian-blur-shader.ts
+var buildGaussianBlurFs = (direction) => {
   const dirVec = direction === "horizontal" ? "vec2(1.0, 0.0)" : "vec2(0.0, 1.0)";
   return `#version 300 es
 precision highp float;
+
 in vec2 vUv;
 out vec4 fragColor;
 
@@ -42,7 +40,9 @@ uniform sampler2D uSource;
 uniform float uRadius;
 uniform vec2 uTexelSize;
 
-const int KERNEL_HALF = 4;
+const int MIN_KERNEL_HALF = 4;
+const int MAX_KERNEL_HALF = 32;
+const float TARGET_SAMPLE_DISTANCE_PX = 2.0;
 const vec2 DIRECTION = ${dirVec};
 
 void main() {
@@ -51,14 +51,24 @@ void main() {
 		return;
 	}
 
-	float pixelStride = uRadius / float(KERNEL_HALF);
+	int kernelHalf = int(
+		min(
+			float(MAX_KERNEL_HALF),
+			max(float(MIN_KERNEL_HALF), ceil(uRadius / TARGET_SAMPLE_DISTANCE_PX))
+		)
+	);
+	float pixelStride = uRadius / float(kernelHalf);
 	float sigma = uRadius / 3.0;
 	float twoSigmaSq = 2.0 * sigma * sigma;
 
 	vec4 sum = vec4(0.0);
 	float weightSum = 0.0;
 
-	for (int i = -KERNEL_HALF; i <= KERNEL_HALF; ++i) {
+	for (int i = -MAX_KERNEL_HALF; i <= MAX_KERNEL_HALF; ++i) {
+		if (abs(i) > kernelHalf) {
+			continue;
+		}
+
 		float offsetPx = float(i) * pixelStride;
 		float w = exp(-(offsetPx * offsetPx) / twoSigmaSq);
 		vec2 uv = vUv + DIRECTION * uTexelSize * offsetPx;
@@ -70,8 +80,19 @@ void main() {
 }
 `;
 };
-var BLUR_FS_HORIZONTAL = buildFs("horizontal");
-var BLUR_FS_VERTICAL = buildFs("vertical");
+
+// src/blur/blur-shaders.ts
+var BLUR_VS = `#version 300 es
+layout(location = 0) in vec2 aPos;
+layout(location = 1) in vec2 aUv;
+out vec2 vUv;
+void main() {
+	vUv = aUv;
+	gl_Position = vec4(aPos, 0.0, 1.0);
+}
+`;
+var BLUR_FS_HORIZONTAL = buildGaussianBlurFs("horizontal");
+var BLUR_FS_VERTICAL = buildGaussianBlurFs("vertical");
 
 // src/blur/blur-runtime.ts
 var { createWebGL2ContextError } = Internals;
@@ -389,7 +410,7 @@ var validateBlurParams = (params) => {
 };
 var blur = createEffect({
   type: "remotion/blur",
-  label: "Blur",
+  label: "blur()",
   documentationLink: "https://www.remotion.dev/docs/effects/blur",
   backend: "webgl2",
   calculateKey: (params) => {

package/dist/esm/brightness.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     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);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 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/brightness.ts
 var { createEffect } = Internals;
@@ -98,7 +111,7 @@ var validateBrightnessParams = (params) => {
 };
 var brightness = createEffect({
   type: "remotion/brightness",
-  label: "Brightness",
+  label: "brightness()",
   documentationLink: "https://www.remotion.dev/docs/effects/brightness",
   backend: "2d",
   calculateKey: (params) => {

package/dist/esm/chromatic-aberration.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     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);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 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/chromatic-aberration/chromatic-aberration-runtime.ts
 import { Internals } from "remotion";
@@ -301,7 +314,7 @@ var validateChromaticAberrationParams = (params) => {
 };
 var chromaticAberration = createEffect({
   type: "remotion/chromatic-aberration",
-  label: "Chromatic Aberration",
+  label: "chromaticAberration()",
   documentationLink: "https://www.remotion.dev/docs/effects/chromatic-aberration",
   backend: "webgl2",
   calculateKey: (params) => {

package/dist/esm/contrast.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     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);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 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/contrast.ts
 var { createEffect } = Internals;
@@ -98,7 +111,7 @@ var validateContrastParams = (params) => {
 };
 var contrast = createEffect({
   type: "remotion/contrast",
-  label: "Contrast",
+  label: "contrast()",
   documentationLink: "https://www.remotion.dev/docs/effects/contrast",
   backend: "2d",
   calculateKey: (params) => {