@remotion/effects 4.0.499 → 4.0.501

package/dist/esm/starburst.mjs

@@ -0,0 +1,347 @@
+// src/starburst.ts
+import { Internals } from "remotion";
+import { NoReactInternals } from "remotion/no-react";
+var { createEffect, createWebGL2ContextError } = Internals;
+var colorToRgb = (color) => {
+  const packed = NoReactInternals.processColor(color);
+  return [packed >>> 16 & 255, packed >>> 8 & 255, packed & 255];
+};
+var DEFAULT_ORIGIN = [0.5, 0.5];
+var starburstEffectSchema = {
+  rays: {
+    type: "number",
+    min: 2,
+    max: 100,
+    step: 1,
+    default: undefined,
+    description: "Number of Rays",
+    hiddenFromList: false
+  },
+  colors: {
+    type: "array",
+    item: {
+      type: "color"
+    },
+    default: undefined,
+    minLength: 2,
+    newItemDefault: "#ff0000",
+    description: "Colors",
+    keyframable: false
+  },
+  rotation: {
+    type: "number",
+    min: 0,
+    max: 360,
+    step: 1,
+    default: 0,
+    description: "Rotation",
+    hiddenFromList: false
+  },
+  smoothness: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 0,
+    description: "Edge Smoothness",
+    hiddenFromList: false
+  },
+  origin: {
+    type: "uv-coordinate",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_ORIGIN,
+    description: "Origin"
+  }
+};
+var resolve = (p) => ({
+  rays: p.rays,
+  colors: p.colors,
+  rotation: p.rotation ?? 0,
+  smoothness: p.smoothness ?? 0,
+  origin: p.origin ?? DEFAULT_ORIGIN
+});
+var validateStarburstEffectParams = (params) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`Starburst effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+  const { rays, colors } = params;
+  if (typeof rays !== "number" || !Number.isFinite(rays)) {
+    throw new TypeError(`"rays" must be a finite number, but got ${JSON.stringify(rays)}`);
+  }
+  if (rays < 2 || rays > 100) {
+    throw new RangeError(`"rays" must be between 2 and 100, but got ${rays}`);
+  }
+  if (!Array.isArray(colors) || colors.length < 2) {
+    throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
+  }
+  const r = resolve(params);
+  if (typeof r.rotation !== "number" || !Number.isFinite(r.rotation)) {
+    throw new TypeError(`"rotation" must be a finite number, but got ${JSON.stringify(params.rotation)}`);
+  }
+  if (typeof r.smoothness !== "number" || !Number.isFinite(r.smoothness)) {
+    throw new TypeError(`"smoothness" must be a finite number, but got ${JSON.stringify(params.smoothness)}`);
+  }
+  if (r.smoothness < 0 || r.smoothness > 1) {
+    throw new RangeError(`"smoothness" must be between 0 and 1, but got ${r.smoothness}`);
+  }
+  if (!Array.isArray(r.origin) || r.origin.length !== 2 || r.origin.some((coordinate) => {
+    return typeof coordinate !== "number" || !Number.isFinite(coordinate);
+  })) {
+    throw new TypeError('"origin" must be a [number, number] tuple');
+  }
+  if (r.origin.some((coordinate) => coordinate < 0 || coordinate > 1)) {
+    throw new RangeError(`"origin" must contain coordinates between 0 and 1, but got ${JSON.stringify(r.origin)}`);
+  }
+  for (const c of r.colors) {
+    colorToRgb(c);
+  }
+};
+var STARBURST_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 STARBURST_FS = `#version 300 es
+precision highp float;
+
+uniform sampler2D colorPalette;
+uniform float numRays;
+uniform float rotationOffset;
+uniform float smoothEdge;
+uniform vec2 resolution;
+uniform float numColors;
+uniform vec2 origin;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+const float Pi = 3.14159265359;
+
+void main() {
+	vec2 uv = vUv;
+	vec2 center = uv - origin;
+	center.x *= resolution.x / resolution.y;
+
+	float angle = atan(center.y, center.x) + rotationOffset;
+	float normalizedAngle = (angle + Pi) / (2.0 * Pi);
+	float sector = normalizedAngle * numRays;
+	float rayIndex = mod(floor(sector), numRays);
+
+	float colorIndex = mod(rayIndex, numColors);
+	float texCoord = (colorIndex + 0.5) / numColors;
+	vec3 col = texture(colorPalette, vec2(texCoord, 0.5)).rgb;
+
+	float fractSector = fract(sector);
+	float edgeSmooth = smoothEdge * 0.5;
+	float nextColorIndex = mod(rayIndex + 1.0, numColors);
+	float nextTexCoord = (nextColorIndex + 0.5) / numColors;
+	vec3 nextCol = texture(colorPalette, vec2(nextTexCoord, 0.5)).rgb;
+
+	float blend = smoothstep(1.0 - edgeSmooth, 1.0, fractSector);
+	col = mix(col, nextCol, blend);
+	float blendStart = smoothstep(edgeSmooth, 0.0, fractSector);
+	float prevColorIndex = mod(rayIndex - 1.0 + numColors, numColors);
+	float prevTexCoord = (prevColorIndex + 0.5) / numColors;
+	vec3 prevCol = texture(colorPalette, vec2(prevTexCoord, 0.5)).rgb;
+	col = mix(col, prevCol, blendStart);
+
+	fragColor = vec4(col, 1.0);
+}
+`;
+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(`Starburst 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(`Starburst program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var starburst = createEffect({
+  type: "remotion/starburst",
+  label: "starburst()",
+  documentationLink: "https://www.remotion.dev/docs/effects/starburst",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `starburst-${r.rays}-${r.colors.join("|")}-${r.rotation}-${r.smoothness}-${r.origin.join(":")}`;
+  },
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw createWebGL2ContextError("starburst effect");
+    }
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    const vs = compileShader(gl, gl.VERTEX_SHADER, STARBURST_VS);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, STARBURST_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 paletteTexture = gl.createTexture();
+    if (!paletteTexture) {
+      throw new Error("Failed to create WebGL palette texture");
+    }
+    gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    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);
+    return {
+      gl,
+      program,
+      vao,
+      vbo,
+      paletteTexture,
+      uColorPalette: gl.getUniformLocation(program, "colorPalette"),
+      uNumRays: gl.getUniformLocation(program, "numRays"),
+      uRotationOffset: gl.getUniformLocation(program, "rotationOffset"),
+      uSmoothEdge: gl.getUniformLocation(program, "smoothEdge"),
+      uResolution: gl.getUniformLocation(program, "resolution"),
+      uNumColors: gl.getUniformLocation(program, "numColors"),
+      uOrigin: gl.getUniformLocation(program, "origin"),
+      cachedPaletteKey: "",
+      palettePixelData: new Uint8Array(0)
+    };
+  },
+  apply: ({ width, height, params, state }) => {
+    const r = resolve(params);
+    const {
+      gl,
+      program,
+      vao,
+      paletteTexture,
+      uColorPalette,
+      uNumRays,
+      uRotationOffset,
+      uSmoothEdge,
+      uResolution,
+      uNumColors,
+      uOrigin
+    } = state;
+    const rotationRad = r.rotation * Math.PI / 180;
+    const paletteKey = r.colors.join("|");
+    const paletteDirty = state.cachedPaletteKey !== paletteKey;
+    if (paletteDirty) {
+      state.cachedPaletteKey = paletteKey;
+      const len = r.colors.length * 4;
+      if (state.palettePixelData.length !== len) {
+        state.palettePixelData = new Uint8Array(len);
+      }
+      const { palettePixelData } = state;
+      for (let i = 0;i < r.colors.length; i++) {
+        const rgb = colorToRgb(r.colors[i]);
+        palettePixelData[i * 4] = rgb[0];
+        palettePixelData[i * 4 + 1] = rgb[1];
+        palettePixelData[i * 4 + 2] = rgb[2];
+        palettePixelData[i * 4 + 3] = 255;
+      }
+    }
+    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, paletteTexture);
+    if (paletteDirty) {
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.colors.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
+    }
+    if (uColorPalette)
+      gl.uniform1i(uColorPalette, 0);
+    if (uNumRays)
+      gl.uniform1f(uNumRays, r.rays);
+    if (uNumColors)
+      gl.uniform1f(uNumColors, r.colors.length);
+    if (uRotationOffset)
+      gl.uniform1f(uRotationOffset, rotationRad);
+    if (uSmoothEdge)
+      gl.uniform1f(uSmoothEdge, r.smoothness);
+    if (uOrigin)
+      gl.uniform2f(uOrigin, r.origin[0], 1 - r.origin[1]);
+    if (uResolution)
+      gl.uniform2f(uResolution, width, height);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, paletteTexture }) => {
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+    gl.deleteTexture(paletteTexture);
+  },
+  schema: starburstEffectSchema,
+  validateParams: validateStarburstEffectParams
+});
+export {
+  starburstEffectSchema,
+  starburst
+};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { checkerboard, type CheckerboardParams } from './checkerboard.js';
 export { pattern, type PatternOrigin, type PatternParams } from './pattern.js';
 export { rings, type RingsCenter, type RingsParams } from './rings.js';
+export { starburst, starburstEffectSchema, type StarburstEffectParams, type StarburstOrigin, } from './starburst.js';
+export { lightLeak, lightLeakEffectSchema, type LightLeakEffectParams, } from './light-leak.js';
 export { gridlines, type GridlinesParams } from './gridlines.js';
 export { zigzag, type ZigzagDirection, type ZigzagParams } from './zigzag.js';
 export { linearGradient, type LinearGradientParams, type LinearGradientUvCoordinate, } from './linear-gradient.js';

package/dist/light-leak.d.ts

@@ -0,0 +1,34 @@
+export declare const lightLeakEffectSchema: {
+    readonly seed: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Seed";
+        readonly hiddenFromList: false;
+    };
+    readonly hueShift: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 360;
+        readonly default: 0;
+        readonly description: "Hue Shift";
+        readonly hiddenFromList: false;
+    };
+    readonly progress: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0.5;
+        readonly description: "Progress";
+        readonly hiddenFromList: false;
+    };
+};
+export type LightLeakEffectParams = {
+    readonly seed?: number;
+    readonly hueShift?: number;
+    /** Evolve/retract phase from 0 (start) to 1 (end). Defaults to 0.5. */
+    readonly progress?: number;
+};
+export declare const lightLeak: (params?: (LightLeakEffectParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/dist/starburst.d.ts

@@ -0,0 +1,59 @@
+export declare const starburstEffectSchema: {
+    readonly rays: {
+        readonly type: "number";
+        readonly min: 2;
+        readonly max: 100;
+        readonly step: 1;
+        readonly default: undefined;
+        readonly description: "Number of Rays";
+        readonly hiddenFromList: false;
+    };
+    readonly colors: {
+        readonly type: "array";
+        readonly item: {
+            readonly type: "color";
+        };
+        readonly default: undefined;
+        readonly minLength: 2;
+        readonly newItemDefault: "#ff0000";
+        readonly description: "Colors";
+        readonly keyframable: false;
+    };
+    readonly rotation: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 360;
+        readonly step: 1;
+        readonly default: 0;
+        readonly description: "Rotation";
+        readonly hiddenFromList: false;
+    };
+    readonly smoothness: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 0;
+        readonly description: "Edge Smoothness";
+        readonly hiddenFromList: false;
+    };
+    readonly origin: {
+        readonly type: "uv-coordinate";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: readonly [0.5, 0.5];
+        readonly description: "Origin";
+    };
+};
+export type StarburstOrigin = readonly [number, number];
+export type StarburstEffectParams = {
+    readonly rays: number;
+    readonly colors: readonly string[];
+    readonly rotation?: number;
+    readonly smoothness?: number;
+    readonly origin?: StarburstOrigin;
+};
+export declare const starburst: (params: StarburstEffectParams & {
+    readonly disabled?: boolean | undefined;
+}) => import("remotion").EffectDescriptor<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/effects",
-	"version": "4.0.499",
+	"version": "4.0.501",
 	"description": "Effects that can be applied to Remotion-based canvas components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.499"
+		"remotion": "4.0.501"
 	},
 	"exports": {
 		".": {
@@ -189,6 +189,11 @@
 			"module": "./dist/esm/linear-progressive-pixelate.mjs",
 			"import": "./dist/esm/linear-progressive-pixelate.mjs"
 		},
+		"./light-leak": {
+			"types": "./dist/light-leak.d.ts",
+			"module": "./dist/esm/light-leak.mjs",
+			"import": "./dist/esm/light-leak.mjs"
+		},
 		"./light-trail": {
 			"types": "./dist/light-trail.d.ts",
 			"module": "./dist/esm/light-trail.mjs",
@@ -279,6 +284,11 @@
 			"module": "./dist/esm/speckle.mjs",
 			"import": "./dist/esm/speckle.mjs"
 		},
+		"./starburst": {
+			"types": "./dist/starburst.d.ts",
+			"module": "./dist/esm/starburst.mjs",
+			"import": "./dist/esm/starburst.mjs"
+		},
 		"./thermal-vision": {
 			"types": "./dist/thermal-vision.d.ts",
 			"module": "./dist/esm/thermal-vision.mjs",
@@ -431,6 +441,9 @@
 			"linear-progressive-pixelate": [
 				"dist/linear-progressive-pixelate.d.ts"
 			],
+			"light-leak": [
+				"dist/light-leak.d.ts"
+			],
 			"light-trail": [
 				"dist/light-trail.d.ts"
 			],
@@ -485,6 +498,9 @@
 			"speckle": [
 				"dist/speckle.d.ts"
 			],
+			"starburst": [
+				"dist/starburst.d.ts"
+			],
 			"thermal-vision": [
 				"dist/thermal-vision.d.ts"
 			],
@@ -522,7 +538,7 @@
 	},
 	"homepage": "https://www.remotion.dev/docs/effects/api",
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.499",
+		"@remotion/eslint-config-internal": "4.0.501",
 		"@vitest/browser-playwright": "4.0.9",
 		"eslint": "9.19.0",
 		"vitest": "4.0.9",