@remotion/effects 4.0.536 → 4.0.537

package/THIRD_PARTY_LICENSES.md

@@ -0,0 +1,30 @@
+# Third-party licenses
+
+## EffectCraft
+
+The Fractal Noise, Turbulent Displace, Lens Blur, and Bevel Alpha shaders are
+adapted from the noise, distortion, blur, and perspective engines in
+[EffectCraft](https://github.com/storytold/effectcraft), revision
+`8f02f52a44a4b1ea807d8824b92301b96f896a06`. It is used under the MIT license.
+
+MIT License
+
+Copyright (c) 2026 ArtCraft Team and the EffectCraft contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/bevel-alpha/index.d.ts

@@ -0,0 +1,13 @@
+export type BevelAlphaParams = {
+    /** Width of the rounded bevel in pixels, from 0 to 200. Defaults to `2`. */
+    readonly edgeThickness?: number;
+    /** Light direction in degrees, clockwise from above. Defaults to `-60`. */
+    readonly lightAngle?: number;
+    /** CSS color of the highlights. Defaults to `white`. */
+    readonly lightColor?: string;
+    /** Strength of highlights and shadows, from 0 to 1. Defaults to `0.4`. */
+    readonly lightIntensity?: number;
+};
+export declare const bevelAlpha: (params?: (BevelAlphaParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/bevel-alpha/shaders.d.ts

@@ -0,0 +1,3 @@
+export declare const BEVEL_ALPHA_VERTEX_SHADER = "#version 300 es\nlayout(location = 0) in vec2 aPos;\nlayout(location = 1) in vec2 aUv;\nout vec2 vUv;\nvoid main() {\n\tvUv = aUv;\n\tgl_Position = vec4(aPos, 0.0, 1.0);\n}\n";
+export declare const buildBevelAlphaBlurShader: (direction: "horizontal" | "vertical") => string;
+export declare const BEVEL_ALPHA_SHADE_SHADER = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\nuniform sampler2D uSource;\nuniform sampler2D uHeight;\nuniform vec2 uResolution;\nuniform float uEdgeThickness;\nuniform vec3 uLightDirection;\nuniform vec3 uLightColor;\nuniform float uLightIntensity;\n\n// Store a 16-bit height in two 8-bit channels. This avoids banded normals\n// without requiring floating-point render targets or WebGL extensions.\nvec4 encodeHeight(float height) {\n\tfloat value = floor(clamp(height, 0.0, 1.0) * 65535.0 + 0.5);\n\treturn vec4(floor(value / 256.0), mod(value, 256.0), 0.0, 255.0) / 255.0;\n}\nfloat decodeHeight(vec4 value) {\n\treturn dot(value.rg, vec2(65280.0, 255.0)) / 65535.0;\n}\n\nfloat heightAt(ivec2 pixel) {\n\treturn decodeHeight(texelFetch(uHeight, clamp(pixel, ivec2(0), ivec2(uResolution) - 1), 0));\n}\nvoid main() {\n\tvec4 source = texelFetch(uSource, ivec2(gl_FragCoord.xy), 0);\n\tif (uEdgeThickness == 0.0 || uLightIntensity == 0.0 || source.a == 0.0) {\n\t\tfragColor = source;\n\t\treturn;\n\t}\n\tivec2 pixel = ivec2(gl_FragCoord.xy);\n\tfloat dx = (heightAt(pixel + ivec2(1, 0)) - heightAt(pixel - ivec2(1, 0))) * 0.5;\n\t// Screen-space Y points down; texture-space Y points up.\n\tfloat dy = (heightAt(pixel - ivec2(0, 1)) - heightAt(pixel + ivec2(0, 1))) * 0.5;\n\tvec3 normal = normalize(vec3(-dx * uEdgeThickness * 1.25, -dy * uEdgeThickness * 1.25, 1.0));\n\tfloat shade = (dot(normal, uLightDirection) - uLightDirection.z) * uLightIntensity * 2.0;\n\tvec3 color = source.rgb;\n\tif (shade > 0.0) {\n\t\tcolor += uLightColor * shade * source.a;\n\t} else {\n\t\tcolor *= max(1.0 + shade, 0.0);\n\t}\n\tfragColor = vec4(clamp(color, vec3(0.0), vec3(source.a)), source.a);\n}\n";

package/dist/bevel-alpha.d.ts

@@ -0,0 +1 @@
+export { bevelAlpha, type BevelAlphaParams } from './bevel-alpha/index.js';

package/dist/cylinder/index.d.ts

@@ -0,0 +1,20 @@
+export type CylinderRender = 'both' | 'front' | 'back';
+export type CylinderParams = {
+    /** Cylinder radius in pixels. Defaults to 250. */
+    readonly radius?: number;
+    /** Texture rotation around the cylinder, in degrees. Defaults to 0. */
+    readonly rotation?: number;
+    /** Cylinder orientation in degrees, applied in X, Y, Z order. */
+    readonly rotationX?: number;
+    readonly rotationY?: number;
+    readonly rotationZ?: number;
+    /** Center as fractions of the canvas width and height. Defaults to [0.5, 0.5]. */
+    readonly position?: readonly [number, number];
+    /** Which faces to show. Defaults to 'both'. */
+    readonly render?: CylinderRender;
+    /** Darkening at the silhouette, from 0 to 1. Defaults to 0.35. */
+    readonly shading?: number;
+};
+export declare const cylinder: (params?: (CylinderParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/cylinder/shader.d.ts

@@ -0,0 +1 @@
+export declare const CYLINDER_SHADER = "\nstruct Params {\n  resolution: vec2f,\n  center: vec2f,\n  radius: f32,\n  spin: f32,\n  shading: f32,\n  faces: f32,\n  rotation: vec4f,\n}\n@group(0) @binding(0) var source: texture_2d<f32>;\n@group(0) @binding(1) var sourceSampler: sampler;\n@group(0) @binding(2) var<uniform> params: Params;\n\n@vertex fn vertex(@builtin(vertex_index) index: u32) -> @builtin(position) vec4f {\n  let positions = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));\n  return vec4f(positions[index], 0, 1);\n}\n\nfn sampleFace(point: vec3f, inverse: mat3x3f, rotation: mat3x3f) -> vec4f {\n  let local = inverse * point;\n  let uv = vec2f(fract((atan2(local.x, local.z) + params.spin) / 6.28318530718 + 0.5), local.y / params.resolution.y + 0.5);\n  let color = textureSampleLevel(source, sourceSampler, uv, 0);\n  if (uv.y < 0 || uv.y > 1) { return vec4f(0); }\n  let normal = rotation * vec3f(local.x / params.radius, 0, local.z / params.radius);\n  let shade = mix(1.0, abs(normal.z), params.shading);\n  return vec4f(color.rgb * shade, color.a);\n}\n\n@fragment fn fragment(@builtin(position) position: vec4f) -> @location(0) vec4f {\n  let s = sin(params.rotation.xyz);\n  let c = cos(params.rotation.xyz);\n  let rx = mat3x3f(vec3f(1, 0, 0), vec3f(0, c.x, s.x), vec3f(0, -s.x, c.x));\n  let ry = mat3x3f(vec3f(c.y, 0, -s.y), vec3f(0, 1, 0), vec3f(s.y, 0, c.y));\n  let rz = mat3x3f(vec3f(c.z, s.z, 0), vec3f(-s.z, c.z, 0), vec3f(0, 0, 1));\n  let rotation = rz * ry * rx;\n  let axis = rotation[1];\n  let p = position.xy - params.center;\n  // Orthographic viewing ray intersecting the rotated, open cylinder wall.\n  let a = 1.0 - axis.z * axis.z;\n  let da = dot(p, axis.xy);\n  let b = -da * axis.z;\n  let discriminant = b * b - a * (dot(p, p) - da * da - params.radius * params.radius);\n  if (a < 0.000001 || discriminant <= 0) { return vec4f(0); }\n  let root = sqrt(discriminant);\n  let inverse = transpose(rotation);\n  let front = sampleFace(vec3f(p, (-b + root) / a), inverse, rotation);\n  let back = sampleFace(vec3f(p, (-b - root) / a), inverse, rotation);\n  if (params.faces == 1) { return front; }\n  if (params.faces == 2) { return back; }\n  // Both the texture and output use premultiplied alpha.\n  return front + back * (1.0 - front.a);\n}\n";

package/dist/cylinder.d.ts

@@ -0,0 +1 @@
+export { cylinder, type CylinderParams, type CylinderRender, } from './cylinder/index.js';

package/dist/esm/bevel-alpha.mjs

@@ -0,0 +1,474 @@
+// src/bevel-alpha/index.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);
+};
+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)}`);
+  }
+};
+
+// 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",
+  hiddenFromList: false
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount",
+  hiddenFromList: false
+};
+var hueDegreesSchema = {
+  type: "rotation-degrees",
+  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/bevel-alpha/shaders.ts
+var BEVEL_ALPHA_VERTEX_SHADER = `#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 HEIGHT_ENCODING = `
+// Store a 16-bit height in two 8-bit channels. This avoids banded normals
+// without requiring floating-point render targets or WebGL extensions.
+vec4 encodeHeight(float height) {
+	float value = floor(clamp(height, 0.0, 1.0) * 65535.0 + 0.5);
+	return vec4(floor(value / 256.0), mod(value, 256.0), 0.0, 255.0) / 255.0;
+}
+float decodeHeight(vec4 value) {
+	return dot(value.rg, vec2(65280.0, 255.0)) / 65535.0;
+}
+`;
+var buildBevelAlphaBlurShader = (direction) => `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform float uRadius;
+${HEIGHT_ENCODING}
+float readHeight(vec2 uv) {
+	${direction === "horizontal" ? "return texture(uSource, uv).a;" : `
+	// Decode before interpolating: packed channel values cannot be filtered.
+	vec2 pixel = uv * uResolution - 0.5;
+	ivec2 lower = ivec2(int(gl_FragCoord.x), int(floor(pixel.y)));
+	ivec2 maximum = ivec2(uResolution) - 1;
+	float a = decodeHeight(texelFetch(uSource, clamp(lower, ivec2(0), maximum), 0));
+	float b = decodeHeight(texelFetch(uSource, clamp(lower + ivec2(0, 1), ivec2(0), maximum), 0));
+	return mix(a, b, fract(pixel.y));`}
+}
+void main() {
+	float radius = max(uRadius, 0.0001);
+	int halfKernel = int(clamp(ceil(radius), 4.0, 64.0));
+	float sigma = radius / 3.0;
+	float sum = 0.0;
+	float total = 0.0;
+	for (int i = -64; i <= 64; i++) {
+		if (abs(i) > halfKernel) continue;
+		float offset = float(i) * radius / float(halfKernel);
+		float weight = exp(-0.5 * offset * offset / (sigma * sigma));
+		vec2 uv = vUv + ${direction === "horizontal" ? "vec2(offset, 0.0)" : "vec2(0.0, offset)"} / uResolution;
+		sum += readHeight(uv) * weight;
+		total += weight;
+	}
+	fragColor = encodeHeight(sum / total);
+}
+`;
+var BEVEL_ALPHA_SHADE_SHADER = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uSource;
+uniform sampler2D uHeight;
+uniform vec2 uResolution;
+uniform float uEdgeThickness;
+uniform vec3 uLightDirection;
+uniform vec3 uLightColor;
+uniform float uLightIntensity;
+${HEIGHT_ENCODING}
+float heightAt(ivec2 pixel) {
+	return decodeHeight(texelFetch(uHeight, clamp(pixel, ivec2(0), ivec2(uResolution) - 1), 0));
+}
+void main() {
+	vec4 source = texelFetch(uSource, ivec2(gl_FragCoord.xy), 0);
+	if (uEdgeThickness == 0.0 || uLightIntensity == 0.0 || source.a == 0.0) {
+		fragColor = source;
+		return;
+	}
+	ivec2 pixel = ivec2(gl_FragCoord.xy);
+	float dx = (heightAt(pixel + ivec2(1, 0)) - heightAt(pixel - ivec2(1, 0))) * 0.5;
+	// Screen-space Y points down; texture-space Y points up.
+	float dy = (heightAt(pixel - ivec2(0, 1)) - heightAt(pixel + ivec2(0, 1))) * 0.5;
+	vec3 normal = normalize(vec3(-dx * uEdgeThickness * 1.25, -dy * uEdgeThickness * 1.25, 1.0));
+	float shade = (dot(normal, uLightDirection) - uLightDirection.z) * uLightIntensity * 2.0;
+	vec3 color = source.rgb;
+	if (shade > 0.0) {
+		color += uLightColor * shade * source.a;
+	} else {
+		color *= max(1.0 + shade, 0.0);
+	}
+	fragColor = vec4(clamp(color, vec3(0.0), vec3(source.a)), source.a);
+}
+`;
+
+// src/bevel-alpha/index.ts
+var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_EDGE_THICKNESS = 2;
+var DEFAULT_LIGHT_ANGLE = -60;
+var DEFAULT_LIGHT_COLOR = "white";
+var DEFAULT_LIGHT_INTENSITY = 0.4;
+var bevelAlphaSchema = {
+  edgeThickness: {
+    type: "number",
+    min: 0,
+    max: 200,
+    step: 0.1,
+    default: DEFAULT_EDGE_THICKNESS,
+    description: "Edge thickness",
+    hiddenFromList: false
+  },
+  lightAngle: {
+    type: "rotation-degrees",
+    step: 1,
+    default: DEFAULT_LIGHT_ANGLE,
+    description: "Light angle"
+  },
+  lightColor: {
+    type: "color",
+    default: DEFAULT_LIGHT_COLOR,
+    description: "Light color"
+  },
+  lightIntensity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_LIGHT_INTENSITY,
+    description: "Light intensity",
+    hiddenFromList: false
+  }
+};
+var resolve = (p) => ({
+  edgeThickness: p.edgeThickness ?? DEFAULT_EDGE_THICKNESS,
+  lightAngle: p.lightAngle ?? DEFAULT_LIGHT_ANGLE,
+  lightColor: p.lightColor ?? DEFAULT_LIGHT_COLOR,
+  lightIntensity: p.lightIntensity ?? DEFAULT_LIGHT_INTENSITY
+});
+var validateBevelAlphaParams = (params) => {
+  assertEffectParamsObject(params, "Bevel alpha");
+  assertOptionalFiniteNumber(params.edgeThickness, "edgeThickness");
+  assertOptionalFiniteNumber(params.lightAngle, "lightAngle");
+  assertOptionalColor(params.lightColor, "lightColor");
+  assertOptionalFiniteNumber(params.lightIntensity, "lightIntensity");
+  const r = resolve(params);
+  validateNonNegative(r.edgeThickness, "edgeThickness");
+  if (r.edgeThickness > 200)
+    throw new TypeError('"edgeThickness" must be at most 200');
+  validateUnitInterval(r.lightIntensity, "lightIntensity");
+};
+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(`BevelAlpha 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(`BevelAlpha program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var setupBevelAlpha = (target) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl)
+    throw createWebGL2ContextError("bevel alpha effect");
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  const vs = compileShader(gl, gl.VERTEX_SHADER, BEVEL_ALPHA_VERTEX_SHADER);
+  const programs = [
+    buildBevelAlphaBlurShader("horizontal"),
+    buildBevelAlphaBlurShader("vertical"),
+    BEVEL_ALPHA_SHADE_SHADER
+  ].map((source) => {
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, source);
+    const shaderProgram = linkProgram(gl, vs, fs);
+    gl.deleteShader(fs);
+    return shaderProgram;
+  });
+  gl.deleteShader(vs);
+  const [horizontalProgram, verticalProgram, program] = programs;
+  const passes = [horizontalProgram, verticalProgram].map((p) => ({
+    program: p,
+    uSource: gl.getUniformLocation(p, "uSource"),
+    uResolution: gl.getUniformLocation(p, "uResolution"),
+    uRadius: gl.getUniformLocation(p, "uRadius")
+  }));
+  const vao = gl.createVertexArray();
+  const vbo = gl.createBuffer();
+  const framebuffer = gl.createFramebuffer();
+  if (!vao || !vbo || !framebuffer)
+    throw new Error("Could not allocate bevel alpha WebGL resources");
+  gl.bindVertexArray(vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+  gl.enableVertexAttribArray(1);
+  gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
+  gl.bindVertexArray(null);
+  const textures = [gl.LINEAR, gl.NEAREST, gl.NEAREST].map((filter) => {
+    const texture = gl.createTexture();
+    if (!texture)
+      throw new Error("Could not allocate bevel alpha texture");
+    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.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);
+    return texture;
+  });
+  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,
+    horizontal: passes[0],
+    vertical: passes[1],
+    program,
+    vao,
+    vbo,
+    framebuffer,
+    texture: textures[0],
+    intermediate: textures[1],
+    heightTexture: textures[2],
+    uSource: gl.getUniformLocation(program, "uSource"),
+    uHeight: gl.getUniformLocation(program, "uHeight"),
+    uResolution: gl.getUniformLocation(program, "uResolution"),
+    uEdgeThickness: gl.getUniformLocation(program, "uEdgeThickness"),
+    uLightDirection: gl.getUniformLocation(program, "uLightDirection"),
+    uLightColor: gl.getUniformLocation(program, "uLightColor"),
+    uLightIntensity: gl.getUniformLocation(program, "uLightIntensity"),
+    colorCtx,
+    cachedColor: "",
+    cachedColorRgba: [255, 255, 255, 255],
+    width: 0,
+    height: 0
+  };
+};
+var bevelAlpha = createEffect({
+  type: "remotion/bevel-alpha",
+  label: "bevelAlpha()",
+  documentationLink: "https://www.remotion.dev/docs/effects/bevel-alpha",
+  backend: "webgl2",
+  calculateKey: (params) => `bevel-alpha-${JSON.stringify(resolve(params))}`,
+  setup: setupBevelAlpha,
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const {
+      gl,
+      texture,
+      intermediate,
+      heightTexture,
+      program,
+      vao,
+      framebuffer
+    } = state;
+    if (state.cachedColor !== r.lightColor) {
+      state.cachedColor = r.lightColor;
+      state.cachedColorRgba = parseColorRgba(state.colorCtx, r.lightColor);
+    }
+    gl.viewport(0, 0, width, height);
+    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.width !== width || state.height !== height) {
+      for (const output of [intermediate, heightTexture]) {
+        gl.bindTexture(gl.TEXTURE_2D, output);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      }
+      state.width = width;
+      state.height = height;
+    }
+    gl.bindVertexArray(vao);
+    if (r.edgeThickness > 0 && r.lightIntensity > 0) {
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      const ditherEnabled = gl.isEnabled(gl.DITHER);
+      gl.disable(gl.DITHER);
+      try {
+        for (const [pass, input, output] of [
+          [state.horizontal, texture, intermediate],
+          [state.vertical, intermediate, heightTexture]
+        ]) {
+          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output, 0);
+          if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE)
+            throw new Error("Bevel alpha framebuffer is incomplete");
+          gl.bindTexture(gl.TEXTURE_2D, input);
+          gl.useProgram(pass.program);
+          gl.uniform1i(pass.uSource, 0);
+          gl.uniform2f(pass.uResolution, width, height);
+          gl.uniform1f(pass.uRadius, r.edgeThickness * 1.5);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+      } finally {
+        if (ditherEnabled)
+          gl.enable(gl.DITHER);
+      }
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, heightTexture);
+    gl.useProgram(program);
+    gl.uniform1i(state.uSource, 0);
+    gl.uniform1i(state.uHeight, 1);
+    gl.uniform2f(state.uResolution, width, height);
+    gl.uniform1f(state.uEdgeThickness, r.edgeThickness);
+    const angle = r.lightAngle % 360 * Math.PI / 180;
+    gl.uniform3f(state.uLightDirection, Math.sin(angle) * Math.SQRT1_2, -Math.cos(angle) * Math.SQRT1_2, Math.SQRT1_2);
+    const [red, green, blue, alpha] = state.cachedColorRgba;
+    gl.uniform3f(state.uLightColor, red / 255 * alpha / 255, green / 255 * alpha / 255, blue / 255 * alpha / 255);
+    gl.uniform1f(state.uLightIntensity, r.lightIntensity);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: (state) => {
+    const { gl } = state;
+    for (const texture of [
+      state.texture,
+      state.intermediate,
+      state.heightTexture
+    ])
+      gl.deleteTexture(texture);
+    for (const program of [
+      state.horizontal.program,
+      state.vertical.program,
+      state.program
+    ])
+      gl.deleteProgram(program);
+    gl.deleteFramebuffer(state.framebuffer);
+    gl.deleteBuffer(state.vbo);
+    gl.deleteVertexArray(state.vao);
+  },
+  schema: bevelAlphaSchema,
+  validateParams: validateBevelAlphaParams
+});
+export {
+  bevelAlpha
+};