@remotion/effects 4.0.471 → 4.0.473

package/dist/esm/vignette.mjs

@@ -34,14 +34,16 @@ var colorAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var colorMultiplierSchema = {
   type: "number",
   min: 0,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var brightnessAmountSchema = {
   type: "number",
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_BRIGHTNESS_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var hueDegreesSchema = {
-  type: "number",
+  type: "rotation-degrees",
   step: 1,
   default: DEFAULT_HUE_DEGREES,
   description: "Degrees"
@@ -104,6 +107,7 @@ var DEFAULT_FEATHER = 0.35;
 var DEFAULT_ROUNDNESS = 1;
 var DEFAULT_COLOR = "#000000";
 var DEFAULT_MODE = "color";
+var DEFAULT_CENTER = [0.5, 0.5];
 var vignetteSchema = {
   amount: {
     type: "number",
@@ -111,7 +115,8 @@ var vignetteSchema = {
     max: 1,
     step: 0.01,
     default: DEFAULT_AMOUNT2,
-    description: "Amount"
+    description: "Amount",
+    hiddenFromList: false
   },
   radius: {
     type: "number",
@@ -119,7 +124,8 @@ var vignetteSchema = {
     max: 1,
     step: 0.01,
     default: DEFAULT_RADIUS,
-    description: "Radius"
+    description: "Radius",
+    hiddenFromList: false
   },
   feather: {
     type: "number",
@@ -127,7 +133,8 @@ var vignetteSchema = {
     max: 1,
     step: 0.01,
     default: DEFAULT_FEATHER,
-    description: "Feather"
+    description: "Feather",
+    hiddenFromList: false
   },
   roundness: {
     type: "number",
@@ -135,7 +142,8 @@ var vignetteSchema = {
     max: 1,
     step: 0.01,
     default: DEFAULT_ROUNDNESS,
-    description: "Roundness"
+    description: "Roundness",
+    hiddenFromList: false
   },
   color: {
     type: "color",
@@ -150,6 +158,12 @@ var vignetteSchema = {
       color: {},
       alpha: {}
     }
+  },
+  center: {
+    type: "uv-coordinate",
+    step: 0.01,
+    default: DEFAULT_CENTER,
+    description: "Center"
   }
 };
 var formatEnum = (variants) => {
@@ -172,8 +186,17 @@ var resolve = (p) => ({
   feather: p.feather ?? DEFAULT_FEATHER,
   roundness: p.roundness ?? DEFAULT_ROUNDNESS,
   color: p.color ?? DEFAULT_COLOR,
-  mode: p.mode ?? DEFAULT_MODE
+  mode: p.mode ?? DEFAULT_MODE,
+  center: [...p.center ?? DEFAULT_CENTER]
 });
+var assertOptionalUvCoordinate = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
+    throw new TypeError(`"${name}" must be a [number, number] tuple`);
+  }
+};
 var validateVignetteParams = (params) => {
   assertEffectParamsObject(params, "Vignette");
   assertOptionalFiniteNumber(params.amount, "amount");
@@ -182,6 +205,7 @@ var validateVignetteParams = (params) => {
   assertOptionalFiniteNumber(params.roundness, "roundness");
   assertOptionalColor(params.color, "color");
   assertOptionalEnum(params.mode, "mode", VIGNETTE_MODES);
+  assertOptionalUvCoordinate(params.center, "center");
   const r = resolve(params);
   validateUnitInterval(r.amount, "amount");
   validateUnitInterval(r.radius, "radius");
@@ -211,9 +235,10 @@ uniform float uFeather;
 uniform float uRoundness;
 uniform vec4 uColor;
 uniform int uMode;
+uniform vec2 uCenter;
 
 float vignetteMask() {
-	vec2 centered = abs(vUv * 2.0 - 1.0);
+	vec2 centered = abs(vUv - uCenter) * 2.0;
 	float rectangleDistance = max(centered.x, centered.y);
 	float ellipseDistance = length(centered);
 	float distanceFromCenter = mix(rectangleDistance, ellipseDistance, uRoundness);
@@ -363,7 +388,8 @@ var setupVignette = (target) => {
       uFeather: gl.getUniformLocation(program, "uFeather"),
       uRoundness: gl.getUniformLocation(program, "uRoundness"),
       uColor: gl.getUniformLocation(program, "uColor"),
-      uMode: gl.getUniformLocation(program, "uMode")
+      uMode: gl.getUniformLocation(program, "uMode"),
+      uCenter: gl.getUniformLocation(program, "uCenter")
     },
     colorCtx,
     cachedColor: "",
@@ -387,7 +413,7 @@ var vignette = createEffect({
   backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
-    return `vignette-${r.amount}-${r.radius}-${r.feather}-${r.roundness}-${r.color}-${r.mode}`;
+    return `vignette-${r.amount}-${r.radius}-${r.feather}-${r.roundness}-${r.color}-${r.mode}-${r.center.join(":")}`;
   },
   setup: (target) => setupVignette(target),
   apply: ({ source, width, height, params, state, flipSourceY }) => {
@@ -418,6 +444,8 @@ var vignette = createEffect({
       gl.uniform4f(uniforms.uColor, red, green, blue, alpha);
     if (uniforms.uMode)
       gl.uniform1i(uniforms.uMode, r.mode === "alpha" ? 1 : 0);
+    if (uniforms.uCenter)
+      gl.uniform2f(uniforms.uCenter, r.center[0], r.center[1]);
     gl.bindVertexArray(vao);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     gl.bindVertexArray(null);

package/dist/esm/wave.mjs

@@ -244,7 +244,8 @@ var waveSchema = {
   phase: {
     type: "number",
     default: 0,
-    description: "Phase"
+    description: "Phase",
+    hiddenFromList: false
   },
   direction: {
     type: "enum",
@@ -261,7 +262,8 @@ var waveSchema = {
     max: 500,
     step: 1,
     default: 60,
-    description: "Amplitude"
+    description: "Amplitude",
+    hiddenFromList: false
   },
   wavelength: {
     type: "number",
@@ -269,7 +271,8 @@ var waveSchema = {
     max: 2000,
     step: 1,
     default: 240,
-    description: "Wavelength"
+    description: "Wavelength",
+    hiddenFromList: false
   }
 };
 var resolve = (p) => ({

package/dist/esm/waves.mjs

@@ -34,14 +34,16 @@ var colorAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var colorMultiplierSchema = {
   type: "number",
   min: 0,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var brightnessAmountSchema = {
   type: "number",
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_BRIGHTNESS_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var hueDegreesSchema = {
-  type: "number",
+  type: "rotation-degrees",
   step: 1,
   default: DEFAULT_HUE_DEGREES,
   description: "Degrees"
@@ -123,7 +126,8 @@ var wavesSchema = {
     max: 400,
     step: 0.1,
     default: DEFAULT_THICKNESS,
-    description: "Thickness"
+    description: "Thickness",
+    hiddenFromList: false
   },
   gap: {
     type: "number",
@@ -131,12 +135,11 @@ var wavesSchema = {
     max: 400,
     step: 0.1,
     default: DEFAULT_GAP,
-    description: "Gap"
+    description: "Gap",
+    hiddenFromList: false
   },
   angle: {
-    type: "number",
-    min: -180,
-    max: 180,
+    type: "rotation-degrees",
     step: 1,
     default: DEFAULT_ANGLE,
     description: "Angle"
@@ -145,7 +148,8 @@ var wavesSchema = {
     type: "number",
     step: 0.1,
     default: DEFAULT_OFFSET,
-    description: "Offset"
+    description: "Offset",
+    hiddenFromList: false
   },
   amplitude: {
     type: "number",
@@ -153,7 +157,8 @@ var wavesSchema = {
     max: 500,
     step: 0.1,
     default: DEFAULT_AMPLITUDE,
-    description: "Amplitude"
+    description: "Amplitude",
+    hiddenFromList: false
   },
   wavelength: {
     type: "number",
@@ -161,7 +166,8 @@ var wavesSchema = {
     max: 2000,
     step: 1,
     default: DEFAULT_WAVELENGTH,
-    description: "Wavelength"
+    description: "Wavelength",
+    hiddenFromList: false
   },
   phase: {
     type: "number",
@@ -169,7 +175,8 @@ var wavesSchema = {
     max: 360,
     step: 1,
     default: DEFAULT_PHASE,
-    description: "Phase"
+    description: "Phase",
+    hiddenFromList: false
   }
 };
 var resolve = (p) => {

package/dist/esm/white-noise.mjs

@@ -34,14 +34,16 @@ var colorAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var colorMultiplierSchema = {
   type: "number",
   min: 0,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var brightnessAmountSchema = {
   type: "number",
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_BRIGHTNESS_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var hueDegreesSchema = {
-  type: "number",
+  type: "rotation-degrees",
   step: 1,
   default: DEFAULT_HUE_DEGREES,
   description: "Degrees"
@@ -106,13 +109,15 @@ var whiteNoiseSchema = {
     max: 1,
     step: 0.01,
     default: DEFAULT_AMOUNT2,
-    description: "Amount"
+    description: "Amount",
+    hiddenFromList: false
   },
   seed: {
     type: "number",
     step: 1,
     default: DEFAULT_SEED,
-    description: "Seed"
+    description: "Seed",
+    hiddenFromList: false
   }
 };
 var resolve = (params) => ({

package/dist/esm/zigzag.mjs

@@ -34,14 +34,16 @@ var colorAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var colorMultiplierSchema = {
   type: "number",
   min: 0,
   step: 0.01,
   default: DEFAULT_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var brightnessAmountSchema = {
   type: "number",
@@ -49,10 +51,11 @@ var brightnessAmountSchema = {
   max: 1,
   step: 0.01,
   default: DEFAULT_BRIGHTNESS_AMOUNT,
-  description: "Amount"
+  description: "Amount",
+  hiddenFromList: false
 };
 var hueDegreesSchema = {
-  type: "number",
+  type: "rotation-degrees",
   step: 1,
   default: DEFAULT_HUE_DEGREES,
   description: "Degrees"
@@ -122,7 +125,8 @@ var zigzagSchema = {
     max: 400,
     step: 0.1,
     default: DEFAULT_THICKNESS,
-    description: "Thickness"
+    description: "Thickness",
+    hiddenFromList: false
   },
   gap: {
     type: "number",
@@ -130,12 +134,11 @@ var zigzagSchema = {
     max: 400,
     step: 0.1,
     default: DEFAULT_GAP,
-    description: "Gap"
+    description: "Gap",
+    hiddenFromList: false
   },
   angle: {
-    type: "number",
-    min: -180,
-    max: 180,
+    type: "rotation-degrees",
     step: 1,
     default: DEFAULT_ANGLE,
     description: "Angle"
@@ -144,7 +147,8 @@ var zigzagSchema = {
     type: "number",
     step: 0.1,
     default: DEFAULT_OFFSET,
-    description: "Offset"
+    description: "Offset",
+    hiddenFromList: false
   },
   amplitude: {
     type: "number",
@@ -152,7 +156,8 @@ var zigzagSchema = {
     max: 500,
     step: 0.1,
     default: DEFAULT_AMPLITUDE,
-    description: "Amplitude"
+    description: "Amplitude",
+    hiddenFromList: false
   },
   wavelength: {
     type: "number",
@@ -160,7 +165,8 @@ var zigzagSchema = {
     max: 2000,
     step: 1,
     default: DEFAULT_WAVELENGTH,
-    description: "Wavelength"
+    description: "Wavelength",
+    hiddenFromList: false
   }
 };
 var resolve = (p) => {

package/dist/evolve.d.ts

@@ -8,6 +8,7 @@ export declare const evolveSchema: {
         readonly step: 0.01;
         readonly default: 0.5;
         readonly description: "Progress";
+        readonly hiddenFromList: false;
     };
     readonly direction: {
         readonly type: "enum";
@@ -27,6 +28,7 @@ export declare const evolveSchema: {
         readonly step: 0.01;
         readonly default: 0.1;
         readonly description: "Feather";
+        readonly hiddenFromList: false;
     };
 };
 export type EvolveParams = {

package/dist/halftone-linear-gradient.d.ts

@@ -7,6 +7,7 @@ export declare const halftoneLinearGradientSchema: {
         readonly step: 1;
         readonly default: 0;
         readonly description: "First stop dot size";
+        readonly hiddenFromList: false;
     };
     readonly secondStopDotSize: {
         readonly type: "number";
@@ -15,6 +16,7 @@ export declare const halftoneLinearGradientSchema: {
         readonly step: 1;
         readonly default: 40;
         readonly description: "Second stop dot size";
+        readonly hiddenFromList: false;
     };
     readonly firstStopPosition: {
         readonly type: "uv-coordinate";
@@ -23,6 +25,7 @@ export declare const halftoneLinearGradientSchema: {
         readonly step: 0.01;
         readonly default: readonly [0, 0.5];
         readonly description: "First stop position";
+        readonly lineTo: "secondStopPosition";
     };
     readonly secondStopPosition: {
         readonly type: "uv-coordinate";
@@ -39,6 +42,7 @@ export declare const halftoneLinearGradientSchema: {
         readonly step: 1;
         readonly default: 24;
         readonly description: "Grid size";
+        readonly hiddenFromList: false;
     };
     readonly colorMode: {
         readonly type: "enum";

package/dist/halftone.d.ts

@@ -9,6 +9,7 @@ export declare const halftoneSchema: {
         readonly step: 1;
         readonly default: 20;
         readonly description: "Dot size";
+        readonly hiddenFromList: false;
     };
     readonly dotSpacing: {
         readonly type: "number";
@@ -17,11 +18,10 @@ export declare const halftoneSchema: {
         readonly step: 1;
         readonly default: 20;
         readonly description: "Dot spacing";
+        readonly hiddenFromList: false;
     };
     readonly rotation: {
-        readonly type: "number";
-        readonly min: -180;
-        readonly max: 180;
+        readonly type: "rotation-degrees";
         readonly step: 1;
         readonly default: 0;
         readonly description: "Rotation";
@@ -31,12 +31,14 @@ export declare const halftoneSchema: {
         readonly step: 1;
         readonly default: 0;
         readonly description: "Offset X";
+        readonly hiddenFromList: false;
     };
     readonly offsetY: {
         readonly type: "number";
         readonly step: 1;
         readonly default: 0;
         readonly description: "Offset Y";
+        readonly hiddenFromList: false;
     };
     readonly shape: {
         readonly type: "enum";

package/dist/linear-progressive-blur/index.d.ts

@@ -0,0 +1,28 @@
+export type LinearProgressiveBlurUvCoordinate = readonly [number, number];
+export type LinearProgressiveBlurParams = {
+    /**
+     * UV coordinate where `startBlur` is reached. Defaults to `[0, 0.5]`.
+     */
+    readonly start?: LinearProgressiveBlurUvCoordinate;
+    /**
+     * UV coordinate where `endBlur` is reached. Defaults to `[1, 0.5]`.
+     */
+    readonly end?: LinearProgressiveBlurUvCoordinate;
+    /**
+     * Blur radius in pixels at `start`. Defaults to `0`.
+     */
+    readonly startBlur?: number;
+    /**
+     * Blur radius in pixels at `end`. Defaults to `50`.
+     */
+    readonly endBlur?: number;
+};
+export type LinearProgressiveBlurResolved = {
+    readonly start: LinearProgressiveBlurUvCoordinate;
+    readonly end: LinearProgressiveBlurUvCoordinate;
+    readonly startBlur: number;
+    readonly endBlur: number;
+};
+export declare const linearProgressiveBlur: (params?: (LinearProgressiveBlurParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

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

@@ -0,0 +1,32 @@
+import type { LinearProgressiveBlurResolved } from './index.js';
+type LinearProgressiveBlurUniforms = {
+    readonly uSource: WebGLUniformLocation | null;
+    readonly uTexelSize: WebGLUniformLocation | null;
+    readonly uStart: WebGLUniformLocation | null;
+    readonly uEnd: WebGLUniformLocation | null;
+    readonly uStartBlur: WebGLUniformLocation | null;
+    readonly uEndBlur: WebGLUniformLocation | null;
+};
+export type LinearProgressiveBlurState = {
+    readonly gl: WebGL2RenderingContext;
+    readonly programHorizontal: WebGLProgram;
+    readonly programVertical: WebGLProgram;
+    readonly vao: WebGLVertexArrayObject;
+    readonly vbo: WebGLBuffer;
+    readonly textureSource: WebGLTexture;
+    readonly textureIntermediate: WebGLTexture;
+    readonly framebuffer: WebGLFramebuffer;
+    readonly horizontal: LinearProgressiveBlurUniforms;
+    readonly vertical: LinearProgressiveBlurUniforms;
+};
+export declare const setupLinearProgressiveBlur: (target: HTMLCanvasElement) => LinearProgressiveBlurState;
+export declare const cleanupLinearProgressiveBlur: (state: LinearProgressiveBlurState) => void;
+export declare const applyLinearProgressiveBlur: ({ state, source, width, height, params, flipSourceY, }: {
+    readonly state: LinearProgressiveBlurState;
+    readonly source: CanvasImageSource;
+    readonly width: number;
+    readonly height: number;
+    readonly params: LinearProgressiveBlurResolved;
+    readonly flipSourceY: boolean;
+}) => void;
+export {};

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

@@ -0,0 +1,2 @@
+export declare const LINEAR_PROGRESSIVE_BLUR_VS = "#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 buildLinearProgressiveBlurFs: (direction: "horizontal" | "vertical") => string;

package/dist/linear-progressive-blur.d.ts

@@ -0,0 +1 @@
+export { linearProgressiveBlur, type LinearProgressiveBlurParams, type LinearProgressiveBlurUvCoordinate, } from './linear-progressive-blur/index.js';

package/dist/lines.d.ts

@@ -16,6 +16,7 @@ export declare const linesSchema: {
         readonly step: 0.1;
         readonly default: 40;
         readonly description: "Thickness";
+        readonly hiddenFromList: false;
     };
     readonly gap: {
         readonly type: "number";
@@ -24,11 +25,10 @@ export declare const linesSchema: {
         readonly step: 0.1;
         readonly default: 0;
         readonly description: "Gap";
+        readonly hiddenFromList: false;
     };
     readonly angle: {
-        readonly type: "number";
-        readonly min: -180;
-        readonly max: 180;
+        readonly type: "rotation-degrees";
         readonly step: 1;
         readonly default: 0;
         readonly description: "Angle";
@@ -38,6 +38,7 @@ export declare const linesSchema: {
         readonly step: 0.1;
         readonly default: 0;
         readonly description: "Offset";
+        readonly hiddenFromList: false;
     };
 };
 export type LinesDirection = (typeof LINE_DIRECTIONS)[number];

package/dist/rings.d.ts

@@ -14,6 +14,7 @@ export declare const ringsSchema: {
         readonly step: 0.1;
         readonly default: 40;
         readonly description: "Thickness";
+        readonly hiddenFromList: false;
     };
     readonly gap: {
         readonly type: "number";
@@ -22,12 +23,14 @@ export declare const ringsSchema: {
         readonly step: 0.1;
         readonly default: 0;
         readonly description: "Gap";
+        readonly hiddenFromList: false;
     };
     readonly offset: {
         readonly type: "number";
         readonly step: 0.1;
         readonly default: 0;
         readonly description: "Offset";
+        readonly hiddenFromList: false;
     };
 };
 export type RingsCenter = readonly [number, number];

package/dist/tint.d.ts

@@ -11,6 +11,7 @@ export declare const tintSchema: {
         readonly step: 0.01;
         readonly default: 0.5;
         readonly description: "Amount";
+        readonly hiddenFromList: false;
     };
 };
 export type TintParams = {

package/dist/vignette.d.ts

@@ -7,6 +7,7 @@ export declare const vignetteSchema: {
         readonly step: 0.01;
         readonly default: 0.5;
         readonly description: "Amount";
+        readonly hiddenFromList: false;
     };
     readonly radius: {
         readonly type: "number";
@@ -15,6 +16,7 @@ export declare const vignetteSchema: {
         readonly step: 0.01;
         readonly default: 0.65;
         readonly description: "Radius";
+        readonly hiddenFromList: false;
     };
     readonly feather: {
         readonly type: "number";
@@ -23,6 +25,7 @@ export declare const vignetteSchema: {
         readonly step: 0.01;
         readonly default: 0.35;
         readonly description: "Feather";
+        readonly hiddenFromList: false;
     };
     readonly roundness: {
         readonly type: "number";
@@ -31,6 +34,7 @@ export declare const vignetteSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Roundness";
+        readonly hiddenFromList: false;
     };
     readonly color: {
         readonly type: "color";
@@ -46,8 +50,15 @@ export declare const vignetteSchema: {
             readonly alpha: {};
         };
     };
+    readonly center: {
+        readonly type: "uv-coordinate";
+        readonly step: 0.01;
+        readonly default: readonly [0.5, 0.5];
+        readonly description: "Center";
+    };
 };
 export type VignetteMode = (typeof VIGNETTE_MODES)[number];
+export type VignetteCenter = readonly [number, number];
 export type VignetteParams = {
     /** Strength of the vignette from `0` to `1`. Defaults to `0.5`. */
     readonly amount?: number;
@@ -61,6 +72,8 @@ export type VignetteParams = {
     readonly color?: string;
     /** `color` blends a color into the edges, `alpha` fades edges transparent. Defaults to `color`. */
     readonly mode?: VignetteMode;
+    /** Center of the vignette in UV coordinates. Defaults to `[0.5, 0.5]`. */
+    readonly center?: VignetteCenter;
 };
 export declare const vignette: (params?: (VignetteParams & {
     readonly disabled?: boolean | undefined;