@remotion/effects 4.0.455

package/README.md

@@ -0,0 +1,7 @@
+# @remotion/effects
+
+Experimental presets for Remotion canvas effect hooks
+
+## Usage
+
+This is an internal package and has no documentation.

package/dist/blur/blur-horizontal.d.ts

@@ -0,0 +1,5 @@
+import type { EffectDescriptor } from 'remotion';
+export type BlurHorizontalParams = {
+    readonly radius: number;
+};
+export declare const blurHorizontal: (params: BlurHorizontalParams) => EffectDescriptor<unknown>;

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

@@ -0,0 +1,13 @@
+export type BlurState = {
+    gl: WebGL2RenderingContext;
+    program: WebGLProgram;
+    vao: WebGLVertexArrayObject;
+    vbo: WebGLBuffer;
+    texture: WebGLTexture;
+    uRadius: WebGLUniformLocation | null;
+    uTexelSize: WebGLUniformLocation | null;
+    uSource: WebGLUniformLocation | null;
+};
+export declare const setupBlur: (target: HTMLCanvasElement, fragmentSource: string) => BlurState;
+export declare const cleanupBlur: (state: BlurState) => void;
+export declare const applyBlur: (state: BlurState, source: CanvasImageSource, width: number, height: number, radius: number) => void;

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

@@ -0,0 +1,3 @@
+export declare const BLUR_VS = "#version 300 es\nin vec2 aPos;\nin vec2 aUv;\nout vec2 vUv;\nvoid main() {\n\tvUv = aUv;\n\tgl_Position = vec4(aPos, 0.0, 1.0);\n}\n";
+export declare const BLUR_FS_HORIZONTAL: string;
+export declare const BLUR_FS_VERTICAL: string;

package/dist/blur/blur-vertical.d.ts

@@ -0,0 +1,5 @@
+import type { EffectDescriptor } from 'remotion';
+export type BlurVerticalParams = {
+    readonly radius: number;
+};
+export declare const blurVertical: (params: BlurVerticalParams) => EffectDescriptor<unknown>;

package/dist/blur/index.d.ts

@@ -0,0 +1,9 @@
+import type { EffectDescriptor } from 'remotion';
+export type BlurParams = {
+    readonly radius: number;
+};
+export declare const blur: (params: BlurParams) => readonly [EffectDescriptor<unknown>, EffectDescriptor<unknown>];
+export { blurHorizontal } from './blur-horizontal.js';
+export type { BlurHorizontalParams } from './blur-horizontal.js';
+export { blurVertical } from './blur-vertical.js';
+export type { BlurVerticalParams } from './blur-vertical.js';

package/dist/esm/index.mjs

@@ -0,0 +1,626 @@
+// src/blur/blur-horizontal.ts
+import { Internals } from "remotion";
+
+// src/blur/blur-shaders.ts
+var BLUR_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 buildFs = (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;
+
+uniform sampler2D uSource;
+uniform float uRadius;
+uniform vec2 uTexelSize;
+
+const int KERNEL_HALF = 4;
+const vec2 DIRECTION = ${dirVec};
+
+void main() {
+	if (uRadius <= 0.0) {
+		fragColor = texture(uSource, vUv);
+		return;
+	}
+
+	float pixelStride = uRadius / float(KERNEL_HALF);
+	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) {
+		float offsetPx = float(i) * pixelStride;
+		float w = exp(-(offsetPx * offsetPx) / twoSigmaSq);
+		vec2 uv = vUv + DIRECTION * uTexelSize * offsetPx;
+		sum += texture(uSource, uv) * w;
+		weightSum += w;
+	}
+
+	fragColor = sum / weightSum;
+}
+`;
+};
+var BLUR_FS_HORIZONTAL = buildFs("horizontal");
+var BLUR_FS_VERTICAL = buildFs("vertical");
+
+// src/blur/blur-runtime.ts
+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(`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(`Program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var setupBlur = (target, fragmentSource) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl) {
+    throw new Error("Failed to acquire WebGL2 context for blur effect");
+  }
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  const vs = compileShader(gl, gl.VERTEX_SHADER, BLUR_VS);
+  const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  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_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  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 uRadius = gl.getUniformLocation(program, "uRadius");
+  const uTexelSize = gl.getUniformLocation(program, "uTexelSize");
+  const uSource = gl.getUniformLocation(program, "uSource");
+  return { gl, program, vao, vbo, texture, uRadius, uTexelSize, uSource };
+};
+var cleanupBlur = (state) => {
+  const { gl, program, vao, vbo, texture } = state;
+  gl.deleteBuffer(vbo);
+  gl.deleteProgram(program);
+  gl.deleteVertexArray(vao);
+  gl.deleteTexture(texture);
+};
+var applyBlur = (state, source, width, height, radius) => {
+  const { gl, program, vao, texture, uRadius, uTexelSize, uSource } = 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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  if (uSource)
+    gl.uniform1i(uSource, 0);
+  if (uRadius)
+    gl.uniform1f(uRadius, radius);
+  if (uTexelSize)
+    gl.uniform2f(uTexelSize, 1 / width, 1 / height);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  gl.bindVertexArray(null);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  gl.useProgram(null);
+};
+
+// src/blur/blur-horizontal.ts
+var { createDescriptor, defineEffect } = Internals;
+var blurHorizontalDef = defineEffect({
+  type: "remotion/blur-horizontal",
+  label: "Blur (horizontal)",
+  backend: "webgl2",
+  setup: (target) => setupBlur(target, BLUR_FS_HORIZONTAL),
+  apply: ({ source, width, height, params, state }) => {
+    applyBlur(state, source, width, height, params.radius);
+  },
+  cleanup: (state) => cleanupBlur(state),
+  schema: null
+});
+var blurHorizontal = (params) => createDescriptor(blurHorizontalDef, params);
+
+// src/blur/blur-vertical.ts
+import { Internals as Internals2 } from "remotion";
+var { createDescriptor: createDescriptor2, defineEffect: defineEffect2 } = Internals2;
+var blurVerticalDef = defineEffect2({
+  type: "remotion/blur-vertical",
+  label: "Blur (vertical)",
+  backend: "webgl2",
+  setup: (target) => setupBlur(target, BLUR_FS_VERTICAL),
+  apply: ({ source, width, height, params, state }) => {
+    applyBlur(state, source, width, height, params.radius);
+  },
+  cleanup: (state) => cleanupBlur(state),
+  schema: null
+});
+var blurVertical = (params) => createDescriptor2(blurVerticalDef, params);
+
+// src/blur/index.ts
+var blur = (params) => [
+  blurHorizontal({ radius: params.radius }),
+  blurVertical({ radius: params.radius })
+];
+// src/halftone.ts
+import { Internals as Internals3 } from "remotion";
+var { createDescriptor: createDescriptor3, defineEffect: defineEffect3 } = Internals3;
+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"
+  }
+};
+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 compileShader2 = (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 linkProgram2 = (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 halftoneDef = defineEffect3({
+  type: "remotion/halftone",
+  label: "Halftone",
+  backend: "webgl2",
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw new Error("Failed to acquire WebGL2 context for halftone effect");
+    }
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    const vs = compileShader2(gl, gl.VERTEX_SHADER, HALFTONE_VS);
+    const fs = compileShader2(gl, gl.FRAGMENT_SHADER, HALFTONE_FS);
+    const program = linkProgram2(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 }) => {
+    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.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
+});
+var halftone = (params = {}) => createDescriptor3(halftoneDef, params);
+// src/tint.ts
+import { Internals as Internals4 } from "remotion";
+var { createDescriptor: createDescriptor4, defineEffect: defineEffect4 } = Internals4;
+var tintSchema = {
+  amount: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 0.5,
+    description: "Amount"
+  }
+};
+var tintDef = defineEffect4({
+  type: "remotion/tint",
+  label: "Tint",
+  backend: "2d",
+  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 amount = Math.max(0, Math.min(1, params.amount ?? 0.5));
+    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 = params.color;
+    ctx.fillRect(0, 0, width, height);
+    ctx.globalAlpha = 1;
+    ctx.globalCompositeOperation = "source-over";
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: tintSchema
+});
+var tint = (params) => createDescriptor4(tintDef, params);
+// src/wave.ts
+import { Internals as Internals5 } from "remotion";
+var { createDescriptor: createDescriptor5, defineEffect: defineEffect5 } = Internals5;
+var resolve2 = (p) => ({
+  amplitude: p.amplitude ?? 60,
+  wavelength: p.wavelength ?? 240,
+  speed: p.speed ?? 1 / 6,
+  sliceWidth: p.sliceWidth ?? 4,
+  background: p.background ?? "transparent"
+});
+var waveDef = defineEffect5({
+  type: "remotion/wave",
+  label: "Wave",
+  backend: "2d",
+  setup: () => null,
+  apply: ({ source, target, frame, width, height, params }) => {
+    const ctx = target.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to acquire 2D context for wave effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve2(params);
+    ctx.clearRect(0, 0, width, height);
+    if (r.background !== "transparent") {
+      ctx.fillStyle = r.background;
+      ctx.fillRect(0, 0, width, height);
+    }
+    for (let x = 0;x < width; x += r.sliceWidth) {
+      const offset = Math.sin(x / r.wavelength * Math.PI * 2 + frame * r.speed) * r.amplitude;
+      ctx.drawImage(source, x, 0, r.sliceWidth, height, x, offset, r.sliceWidth, height);
+    }
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: null
+});
+var wave = (params = {}) => createDescriptor5(waveDef, params);
+export {
+  wave,
+  tint,
+  halftone,
+  blurVertical,
+  blurHorizontal,
+  blur
+};

package/dist/halftone.d.ts

@@ -0,0 +1,64 @@
+import type { EffectDescriptor } from 'remotion';
+export declare const halftoneSchema: {
+    readonly dotSize: {
+        readonly type: "number";
+        readonly min: 1;
+        readonly max: 200;
+        readonly step: 1;
+        readonly default: 20;
+        readonly description: "Dot size";
+    };
+    readonly dotSpacing: {
+        readonly type: "number";
+        readonly min: 1;
+        readonly max: 200;
+        readonly step: 1;
+        readonly default: 20;
+        readonly description: "Dot spacing";
+    };
+    readonly rotation: {
+        readonly type: "number";
+        readonly min: -180;
+        readonly max: 180;
+        readonly step: 1;
+        readonly default: 0;
+        readonly description: "Rotation";
+    };
+    readonly offsetX: {
+        readonly type: "number";
+        readonly step: 1;
+        readonly default: 0;
+        readonly description: "Offset X";
+    };
+    readonly offsetY: {
+        readonly type: "number";
+        readonly step: 1;
+        readonly default: 0;
+        readonly description: "Offset Y";
+    };
+};
+export type HalftoneShape = 'circle' | 'square' | 'line';
+export type HalftoneSampling = 'bilinear' | 'nearest';
+export type HalftoneParams = {
+    readonly shape?: HalftoneShape;
+    readonly dotSize?: number;
+    /**
+     * Distance between adjacent dot centers on the halftone grid (pitch).
+     * When omitted, matches `dotSize` so dots can touch at full coverage (same as before).
+     */
+    readonly dotSpacing?: number;
+    readonly rotation?: number;
+    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.
+     */
+    readonly shadeOutside?: boolean;
+};
+export declare const halftone: (params?: HalftoneParams) => EffectDescriptor<unknown>;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { blur, blurHorizontal, blurVertical } from './blur/index.js';
+export type { BlurHorizontalParams, BlurParams, BlurVerticalParams, } from './blur/index.js';
+export { halftone } from './halftone.js';
+export type { HalftoneParams, HalftoneSampling, HalftoneShape, } from './halftone.js';
+export { tint } from './tint.js';
+export type { TintParams } from './tint.js';
+export { wave } from './wave.js';
+export type { WaveParams } from './wave.js';

package/dist/tint.d.ts

@@ -0,0 +1,16 @@
+import type { EffectDescriptor } from 'remotion';
+export declare const tintSchema: {
+    readonly amount: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0.5;
+        readonly description: "Amount";
+    };
+};
+export type TintParams = {
+    readonly color: string;
+    readonly amount?: number;
+};
+export declare const tint: (params: TintParams) => EffectDescriptor<unknown>;

package/dist/wave.d.ts

@@ -0,0 +1,9 @@
+import type { EffectDescriptor } from 'remotion';
+export type WaveParams = {
+    readonly amplitude?: number;
+    readonly wavelength?: number;
+    readonly speed?: number;
+    readonly sliceWidth?: number;
+    readonly background?: string;
+};
+export declare const wave: (params?: WaveParams) => EffectDescriptor<unknown>;

package/package.json

@@ -0,0 +1,51 @@
+{
+	"name": "@remotion/effects",
+	"version": "4.0.455",
+	"description": "Experimental presets for Remotion canvas effect hooks",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"module": "dist/esm/index.mjs",
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/effects"
+	},
+	"sideEffects": false,
+	"type": "module",
+	"scripts": {
+		"formatting": "oxfmt src --check",
+		"format": "oxfmt src",
+		"lint": "eslint src",
+		"watch": "tsgo -w",
+		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts"
+	},
+	"author": "Jonny Burger <jonny@remotion.dev>",
+	"contributors": [],
+	"license": "UNLICENSED",
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"dependencies": {
+		"remotion": "4.0.455"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs"
+		},
+		"./package.json": "./package.json"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "4.0.455",
+		"eslint": "9.19.0",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
+	},
+	"keywords": [
+		"remotion",
+		"effects",
+		"webgl",
+		"canvas"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
+}