@remotion/effects 4.0.468 → 4.0.470

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/esm/blur.mjs

@@ -27,20 +27,12 @@ var assertOptionalColor = (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;
 
@@ -48,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() {
@@ -57,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;
@@ -76,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;

package/dist/esm/dot-grid.mjs

@@ -0,0 +1,349 @@
+// src/dot-grid.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);
+};
+
+// 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));
+};
+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/dot-grid.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_DOT_SIZE = 16;
+var DEFAULT_GRID_SIZE = 20;
+var DEFAULT_INVERT = false;
+var dotGridSchema = {
+  dotSize: {
+    type: "number",
+    min: 0,
+    max: 400,
+    step: 1,
+    default: DEFAULT_DOT_SIZE,
+    description: "Dot size"
+  },
+  gridSize: {
+    type: "number",
+    min: 1,
+    max: 400,
+    step: 1,
+    default: DEFAULT_GRID_SIZE,
+    description: "Grid size"
+  },
+  invert: {
+    type: "boolean",
+    default: DEFAULT_INVERT,
+    description: "Invert"
+  }
+};
+var resolve = (p) => ({
+  dotSize: p.dotSize ?? DEFAULT_DOT_SIZE,
+  gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
+  invert: p.invert ?? DEFAULT_INVERT
+});
+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 validatePositive = (value, name) => {
+  if (value <= 0) {
+    throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateDotGridParams = (params) => {
+  assertEffectParamsObject(params, "Dot grid");
+  assertOptionalFiniteNumber(params.dotSize, "dotSize");
+  assertOptionalFiniteNumber(params.gridSize, "gridSize");
+  assertOptionalBoolean(params.invert, "invert");
+  if (params.dotSize !== undefined) {
+    validateNonNegative(params.dotSize, "dotSize");
+  }
+  if (params.gridSize !== undefined) {
+    validatePositive(params.gridSize, "gridSize");
+  }
+};
+var DOT_GRID_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 DOT_GRID_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform float uDotSize;
+uniform float uGridSize;
+uniform bool uInvert;
+
+void main() {
+	vec2 fragPos = vUv * uResolution;
+	vec2 center = uResolution * 0.5;
+	vec2 gridPos = fragPos - center;
+
+	float gridSize = max(uGridSize, 0.001);
+	vec2 cellIndex = floor(gridPos / gridSize + 0.5);
+	vec2 gridCenter = cellIndex * gridSize;
+	vec2 diff = gridPos - gridCenter;
+
+	float radius = uDotSize * 0.5;
+	float dotCoverage = radius <= 0.005
+		? 0.0
+		: 1.0 - smoothstep(radius - 0.75, radius + 0.75, length(diff));
+	float coverage = uInvert ? 1.0 - dotCoverage : dotCoverage;
+
+	vec4 texColor = texture(uSource, vUv);
+	fragColor = texColor * coverage;
+}
+`;
+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(`Dot grid 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(`Dot grid program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var dotGrid = createEffect({
+  type: "remotion/dot-grid",
+  label: "dotGrid()",
+  documentationLink: "https://www.remotion.dev/docs/effects/dot-grid",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `dot-grid-${r.dotSize}-${r.gridSize}-${r.invert ? 1 : 0}`;
+  },
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw createWebGL2ContextError("dot grid effect");
+    }
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    const vs = compileShader(gl, gl.VERTEX_SHADER, DOT_GRID_VS);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, DOT_GRID_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.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"),
+      uDotSize: gl.getUniformLocation(program, "uDotSize"),
+      uGridSize: gl.getUniformLocation(program, "uGridSize"),
+      uInvert: gl.getUniformLocation(program, "uInvert")
+    };
+  },
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const { gl, program, vao, texture } = state;
+    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.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.uGridSize)
+      gl.uniform1f(state.uGridSize, r.gridSize);
+    if (state.uInvert)
+      gl.uniform1i(state.uInvert, r.invert ? 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: dotGridSchema,
+  validateParams: validateDotGridParams
+});
+export {
+  dotGridSchema,
+  dotGrid
+};