@remotion/effects 4.0.479 → 4.0.481

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -132,9 +132,9 @@ var validatePixelateParams = (params) => {
132
132
  };
133
133
  var VERTEX_SHADER = `#version 300 es
134
134
 
135
- in vec2 aPos;
136
- in vec2 aUv;
137
- out vec2 vUv;
135
+ in vec2 aPos;
136
+ in vec2 aUv;
137
+ out vec2 vUv;
138
138
 
139
139
  void main() {
140
140
  vUv = aUv;
@@ -266,23 +266,18 @@ float vignetteMask() {
266
266
  void main() {
267
267
  vec4 texColor = texture(uSource, vUv);
268
268
  float alpha = texColor.a;
269
-
270
- if (alpha <= 0.001) {
271
- fragColor = vec4(0.0);
272
- return;
273
- }
274
-
275
269
  float mask = vignetteMask();
276
- vec3 rgb = texColor.rgb / alpha;
277
270
 
278
271
  if (uMode == 1) {
279
272
  float outputAlpha = alpha * (1.0 - mask);
280
- fragColor = vec4(rgb * outputAlpha, outputAlpha);
273
+ fragColor = vec4(texColor.rgb * (1.0 - mask), outputAlpha);
281
274
  return;
282
275
  }
283
276
 
284
- vec3 outputRgb = mix(rgb, uColor.rgb, mask * uColor.a);
285
- fragColor = vec4(outputRgb * alpha, alpha);
277
+ float overlayAlpha = mask * uColor.a;
278
+ vec3 outputRgb = uColor.rgb * overlayAlpha + texColor.rgb * (1.0 - overlayAlpha);
279
+ float outputAlpha = overlayAlpha + alpha * (1.0 - overlayAlpha);
280
+ fragColor = vec4(outputRgb, outputAlpha);
286
281
  }
287
282
  `;
288
283
  var compileShader = (gl, type, source) => {
@@ -0,0 +1,419 @@
1
+ // src/zoom-blur/index.ts
2
+ import { Internals as Internals2 } from "remotion";
3
+
4
+ // src/validate-effect-param.ts
5
+ var assertEffectParamsObject = (params, effectLabel) => {
6
+ if (params === null || typeof params !== "object") {
7
+ throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
8
+ }
9
+ };
10
+ var assertRequiredFiniteNumber = (value, name) => {
11
+ if (typeof value !== "number" || !Number.isFinite(value)) {
12
+ throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
13
+ }
14
+ };
15
+ var assertRequiredColor = (value, name) => {
16
+ if (typeof value !== "string" || value.length === 0) {
17
+ throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
18
+ }
19
+ };
20
+ var assertOptionalColor = (value, name) => {
21
+ if (value === undefined) {
22
+ return;
23
+ }
24
+ assertRequiredColor(value, name);
25
+ };
26
+ var assertOptionalBoolean = (value, name) => {
27
+ if (value === undefined) {
28
+ return;
29
+ }
30
+ if (typeof value !== "boolean") {
31
+ throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
32
+ }
33
+ };
34
+
35
+ // src/color-utils.ts
36
+ var DEFAULT_AMOUNT = 1;
37
+ var DEFAULT_BRIGHTNESS_AMOUNT = 0;
38
+ var DEFAULT_HUE_DEGREES = 0;
39
+ var colorAmountSchema = {
40
+ type: "number",
41
+ min: 0,
42
+ max: 1,
43
+ step: 0.01,
44
+ default: DEFAULT_AMOUNT,
45
+ description: "Amount",
46
+ hiddenFromList: false
47
+ };
48
+ var colorMultiplierSchema = {
49
+ type: "number",
50
+ min: 0,
51
+ step: 0.01,
52
+ default: DEFAULT_AMOUNT,
53
+ description: "Amount",
54
+ hiddenFromList: false
55
+ };
56
+ var brightnessAmountSchema = {
57
+ type: "number",
58
+ min: -1,
59
+ max: 1,
60
+ step: 0.01,
61
+ default: DEFAULT_BRIGHTNESS_AMOUNT,
62
+ description: "Amount",
63
+ hiddenFromList: false
64
+ };
65
+ var hueDegreesSchema = {
66
+ type: "rotation-degrees",
67
+ step: 1,
68
+ default: DEFAULT_HUE_DEGREES,
69
+ description: "Degrees"
70
+ };
71
+ var assertOptionalFiniteNumber = (value, name) => {
72
+ if (value === undefined) {
73
+ return;
74
+ }
75
+ assertRequiredFiniteNumber(value, name);
76
+ };
77
+ var validateUnitInterval = (value, name) => {
78
+ if (value < 0) {
79
+ throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
80
+ }
81
+ if (value > 1) {
82
+ throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
83
+ }
84
+ };
85
+ var validateNonNegative = (value, name) => {
86
+ if (value < 0) {
87
+ throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
88
+ }
89
+ };
90
+ var validateSignedUnitInterval = (value, name) => {
91
+ if (value < -1) {
92
+ throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
93
+ }
94
+ if (value > 1) {
95
+ throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
96
+ }
97
+ };
98
+ var clampColorChannel = (value) => {
99
+ return Math.max(0, Math.min(255, value));
100
+ };
101
+ var parseColorRgba = (ctx, color) => {
102
+ ctx.clearRect(0, 0, 1, 1);
103
+ ctx.fillStyle = color;
104
+ ctx.fillRect(0, 0, 1, 1);
105
+ const { data } = ctx.getImageData(0, 0, 1, 1);
106
+ return [data[0], data[1], data[2], data[3]];
107
+ };
108
+
109
+ // src/zoom-blur/zoom-blur-runtime.ts
110
+ import { Internals } from "remotion";
111
+
112
+ // src/zoom-blur/zoom-blur-shaders.ts
113
+ var ZOOM_BLUR_VS = `#version 300 es
114
+ layout(location = 0) in vec2 aPos;
115
+ layout(location = 1) in vec2 aUv;
116
+ out vec2 vUv;
117
+ void main() {
118
+ vUv = aUv;
119
+ gl_Position = vec4(aPos, 0.0, 1.0);
120
+ }
121
+ `;
122
+ var ZOOM_BLUR_FS = `#version 300 es
123
+ precision highp float;
124
+ in vec2 vUv;
125
+ out vec4 fragColor;
126
+
127
+ uniform sampler2D uSource;
128
+ uniform vec2 uResolution;
129
+ uniform vec2 uCenter;
130
+ uniform float uAmount;
131
+ uniform int uSamples;
132
+
133
+ const int MAX_SAMPLES = 64;
134
+
135
+ void main() {
136
+ vec2 direction = vUv - uCenter;
137
+ float normalizedAmount = uAmount / min(uResolution.x, uResolution.y);
138
+ vec4 color = vec4(0.0);
139
+ float total = 0.0;
140
+
141
+ for (int i = 0; i < MAX_SAMPLES; i++) {
142
+ if (i >= uSamples) {
143
+ break;
144
+ }
145
+
146
+ float denominator = max(float(uSamples - 1), 1.0);
147
+ float progress = float(i) / denominator;
148
+ vec2 sampleUv = clamp(vUv - direction * normalizedAmount * progress, 0.0, 1.0);
149
+ color += texture(uSource, sampleUv);
150
+ total += 1.0;
151
+ }
152
+
153
+ fragColor = color / total;
154
+ }
155
+ `;
156
+
157
+ // src/zoom-blur/zoom-blur-runtime.ts
158
+ var { createWebGL2ContextError } = Internals;
159
+ var compileShader = (gl, type, source) => {
160
+ const shader = gl.createShader(type);
161
+ if (!shader) {
162
+ throw new Error("Failed to create WebGL shader");
163
+ }
164
+ gl.shaderSource(shader, source);
165
+ gl.compileShader(shader);
166
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
167
+ const log = gl.getShaderInfoLog(shader);
168
+ gl.deleteShader(shader);
169
+ throw new Error(`Shader compile failed: ${log ?? "(no log)"}`);
170
+ }
171
+ return shader;
172
+ };
173
+ var linkProgram = (gl, vs, fs) => {
174
+ const program = gl.createProgram();
175
+ if (!program) {
176
+ throw new Error("Failed to create WebGL program");
177
+ }
178
+ gl.attachShader(program, vs);
179
+ gl.attachShader(program, fs);
180
+ gl.linkProgram(program);
181
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
182
+ const log = gl.getProgramInfoLog(program);
183
+ gl.deleteProgram(program);
184
+ throw new Error(`Program link failed: ${log ?? "(no log)"}`);
185
+ }
186
+ return program;
187
+ };
188
+ var createProgram = (gl, vertexSource, fragmentSource) => {
189
+ const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
190
+ const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
191
+ const program = linkProgram(gl, vs, fs);
192
+ gl.deleteShader(vs);
193
+ gl.deleteShader(fs);
194
+ return program;
195
+ };
196
+ var createRgbaTexture = (gl) => {
197
+ const texture = gl.createTexture();
198
+ if (!texture) {
199
+ throw new Error("Failed to create WebGL texture");
200
+ }
201
+ gl.bindTexture(gl.TEXTURE_2D, texture);
202
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
203
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
204
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
205
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
206
+ gl.bindTexture(gl.TEXTURE_2D, null);
207
+ return texture;
208
+ };
209
+ var setupZoomBlur = (target) => {
210
+ const gl = target.getContext("webgl2", {
211
+ premultipliedAlpha: true,
212
+ alpha: true,
213
+ preserveDrawingBuffer: true
214
+ });
215
+ if (!gl) {
216
+ throw createWebGL2ContextError("zoom blur effect");
217
+ }
218
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
219
+ const program = createProgram(gl, ZOOM_BLUR_VS, ZOOM_BLUR_FS);
220
+ const vao = gl.createVertexArray();
221
+ if (!vao) {
222
+ throw new Error("Failed to create WebGL vertex array");
223
+ }
224
+ gl.bindVertexArray(vao);
225
+ const data = new Float32Array([
226
+ -1,
227
+ -1,
228
+ 0,
229
+ 0,
230
+ 1,
231
+ -1,
232
+ 1,
233
+ 0,
234
+ -1,
235
+ 1,
236
+ 0,
237
+ 1,
238
+ 1,
239
+ 1,
240
+ 1,
241
+ 1
242
+ ]);
243
+ const vbo = gl.createBuffer();
244
+ if (!vbo) {
245
+ throw new Error("Failed to create WebGL buffer");
246
+ }
247
+ gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
248
+ gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
249
+ gl.enableVertexAttribArray(0);
250
+ gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
251
+ gl.enableVertexAttribArray(1);
252
+ gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
253
+ gl.bindVertexArray(null);
254
+ const textureSource = createRgbaTexture(gl);
255
+ return {
256
+ gl,
257
+ program,
258
+ vao,
259
+ vbo,
260
+ textureSource,
261
+ uniforms: {
262
+ uSource: gl.getUniformLocation(program, "uSource"),
263
+ uResolution: gl.getUniformLocation(program, "uResolution"),
264
+ uCenter: gl.getUniformLocation(program, "uCenter"),
265
+ uAmount: gl.getUniformLocation(program, "uAmount"),
266
+ uSamples: gl.getUniformLocation(program, "uSamples")
267
+ }
268
+ };
269
+ };
270
+ var cleanupZoomBlur = (state) => {
271
+ const { gl, program, vao, vbo, textureSource } = state;
272
+ gl.deleteTexture(textureSource);
273
+ gl.deleteBuffer(vbo);
274
+ gl.deleteProgram(program);
275
+ gl.deleteVertexArray(vao);
276
+ };
277
+ var drawFullscreenQuad = (state) => {
278
+ const { gl, vao } = state;
279
+ gl.bindVertexArray(vao);
280
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
281
+ gl.bindVertexArray(null);
282
+ };
283
+ var applyZoomBlur = ({
284
+ state,
285
+ source,
286
+ width,
287
+ height,
288
+ amount,
289
+ center,
290
+ samples,
291
+ flipSourceY
292
+ }) => {
293
+ const { gl, program, textureSource, uniforms } = state;
294
+ gl.viewport(0, 0, width, height);
295
+ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
296
+ gl.bindTexture(gl.TEXTURE_2D, textureSource);
297
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
298
+ gl.bindTexture(gl.TEXTURE_2D, null);
299
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
300
+ gl.clearColor(0, 0, 0, 0);
301
+ gl.clear(gl.COLOR_BUFFER_BIT);
302
+ gl.useProgram(program);
303
+ if (uniforms.uSource)
304
+ gl.uniform1i(uniforms.uSource, 0);
305
+ if (uniforms.uResolution)
306
+ gl.uniform2f(uniforms.uResolution, width, height);
307
+ if (uniforms.uCenter)
308
+ gl.uniform2f(uniforms.uCenter, center[0], center[1]);
309
+ if (uniforms.uAmount)
310
+ gl.uniform1f(uniforms.uAmount, amount);
311
+ if (uniforms.uSamples)
312
+ gl.uniform1i(uniforms.uSamples, samples);
313
+ gl.activeTexture(gl.TEXTURE0);
314
+ gl.bindTexture(gl.TEXTURE_2D, textureSource);
315
+ drawFullscreenQuad(state);
316
+ gl.bindTexture(gl.TEXTURE_2D, null);
317
+ gl.useProgram(null);
318
+ };
319
+
320
+ // src/zoom-blur/index.ts
321
+ var { createEffect } = Internals2;
322
+ var DEFAULT_AMOUNT2 = 40;
323
+ var DEFAULT_CENTER = [0.5, 0.5];
324
+ var DEFAULT_SAMPLES = 24;
325
+ var MAX_SAMPLES = 64;
326
+ var zoomBlurSchema = {
327
+ amount: {
328
+ type: "number",
329
+ min: 0,
330
+ max: 200,
331
+ step: 1,
332
+ default: DEFAULT_AMOUNT2,
333
+ description: "Amount",
334
+ hiddenFromList: false
335
+ },
336
+ center: {
337
+ type: "uv-coordinate",
338
+ step: 0.01,
339
+ default: DEFAULT_CENTER,
340
+ description: "Center"
341
+ },
342
+ samples: {
343
+ type: "number",
344
+ min: 1,
345
+ max: MAX_SAMPLES,
346
+ step: 1,
347
+ default: DEFAULT_SAMPLES,
348
+ description: "Samples",
349
+ hiddenFromList: false
350
+ }
351
+ };
352
+ var resolve = (params) => ({
353
+ amount: params.amount ?? DEFAULT_AMOUNT2,
354
+ center: [...params.center ?? DEFAULT_CENTER],
355
+ samples: params.samples ?? DEFAULT_SAMPLES
356
+ });
357
+ var assertOptionalUvCoordinate = (value, name) => {
358
+ if (value === undefined) {
359
+ return;
360
+ }
361
+ if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
362
+ throw new TypeError(`"${name}" must be a [number, number] tuple`);
363
+ }
364
+ };
365
+ var assertOptionalInteger = (value, name) => {
366
+ if (value === undefined) {
367
+ return;
368
+ }
369
+ if (!Number.isInteger(value)) {
370
+ throw new TypeError(`"${name}" must be an integer, but got ${JSON.stringify(value)}`);
371
+ }
372
+ };
373
+ var validateZoomBlurParams = (params) => {
374
+ assertEffectParamsObject(params, "Zoom Blur");
375
+ assertOptionalFiniteNumber(params.amount, "amount");
376
+ assertOptionalUvCoordinate(params.center, "center");
377
+ assertOptionalFiniteNumber(params.samples, "samples");
378
+ assertOptionalInteger(params.samples, "samples");
379
+ const r = resolve(params);
380
+ validateNonNegative(r.amount, "amount");
381
+ validateUnitInterval(r.center[0], "center[0]");
382
+ validateUnitInterval(r.center[1], "center[1]");
383
+ if (r.samples < 1) {
384
+ throw new TypeError(`"samples" must be >= 1, but got ${JSON.stringify(r.samples)}`);
385
+ }
386
+ if (r.samples > MAX_SAMPLES) {
387
+ throw new TypeError(`"samples" must be <= ${MAX_SAMPLES}, but got ${JSON.stringify(r.samples)}`);
388
+ }
389
+ };
390
+ var zoomBlur = createEffect({
391
+ type: "remotion/zoom-blur",
392
+ label: "zoomBlur()",
393
+ documentationLink: "https://www.remotion.dev/docs/effects/zoom-blur",
394
+ backend: "webgl2",
395
+ calculateKey: (params) => {
396
+ const r = resolve(params);
397
+ return `zoom-blur-${r.amount}-${r.center[0]}-${r.center[1]}-${r.samples}`;
398
+ },
399
+ setup: (target) => setupZoomBlur(target),
400
+ apply: ({ source, width, height, params, state, flipSourceY }) => {
401
+ const r = resolve(params);
402
+ applyZoomBlur({
403
+ state,
404
+ source,
405
+ width,
406
+ height,
407
+ amount: r.amount,
408
+ center: r.center,
409
+ samples: r.samples,
410
+ flipSourceY
411
+ });
412
+ },
413
+ cleanup: (state) => cleanupZoomBlur(state),
414
+ schema: zoomBlurSchema,
415
+ validateParams: validateZoomBlurParams
416
+ });
417
+ export {
418
+ zoomBlur
419
+ };
@@ -0,0 +1,113 @@
1
+ export declare const gridlinesSchema: {
2
+ readonly gridSize: {
3
+ readonly type: "number";
4
+ readonly min: 1;
5
+ readonly max: 400;
6
+ readonly step: 1;
7
+ readonly default: 64;
8
+ readonly description: "Grid size";
9
+ readonly hiddenFromList: false;
10
+ };
11
+ readonly lineWidth: {
12
+ readonly type: "number";
13
+ readonly min: 0;
14
+ readonly max: 100;
15
+ readonly step: 0.1;
16
+ readonly default: 2;
17
+ readonly description: "Line width";
18
+ readonly hiddenFromList: false;
19
+ };
20
+ readonly lineColor: {
21
+ readonly type: "color";
22
+ readonly default: "#ffffff";
23
+ readonly description: "Line color";
24
+ };
25
+ readonly backgroundColor: {
26
+ readonly type: "color";
27
+ readonly default: "transparent";
28
+ readonly description: "Background color";
29
+ };
30
+ readonly rotation: {
31
+ readonly type: "rotation-degrees";
32
+ readonly min: -180;
33
+ readonly max: 180;
34
+ readonly step: 1;
35
+ readonly default: 0;
36
+ readonly description: "Rotation";
37
+ };
38
+ readonly rotationX: {
39
+ readonly type: "rotation-degrees";
40
+ readonly min: -180;
41
+ readonly max: 180;
42
+ readonly step: 1;
43
+ readonly default: 0;
44
+ readonly description: "Rotation X";
45
+ };
46
+ readonly rotationY: {
47
+ readonly type: "rotation-degrees";
48
+ readonly min: -180;
49
+ readonly max: 180;
50
+ readonly step: 1;
51
+ readonly default: 0;
52
+ readonly description: "Rotation Y";
53
+ };
54
+ readonly perspective: {
55
+ readonly type: "number";
56
+ readonly min: 0;
57
+ readonly max: 4000;
58
+ readonly step: 1;
59
+ readonly default: 0;
60
+ readonly description: "Perspective";
61
+ readonly hiddenFromList: false;
62
+ };
63
+ readonly offsetX: {
64
+ readonly type: "number";
65
+ readonly min: -400;
66
+ readonly max: 400;
67
+ readonly step: 0.1;
68
+ readonly default: 0;
69
+ readonly description: "Offset X";
70
+ readonly hiddenFromList: false;
71
+ };
72
+ readonly offsetY: {
73
+ readonly type: "number";
74
+ readonly min: -400;
75
+ readonly max: 400;
76
+ readonly step: 0.1;
77
+ readonly default: 0;
78
+ readonly description: "Offset Y";
79
+ readonly hiddenFromList: false;
80
+ };
81
+ readonly maskToSourceAlpha: {
82
+ readonly type: "boolean";
83
+ readonly default: false;
84
+ readonly description: "Mask to source alpha";
85
+ };
86
+ };
87
+ export type GridlinesParams = {
88
+ /** Distance between adjacent grid lines in pixels. Defaults to `64`. */
89
+ readonly gridSize?: number;
90
+ /** Width of each grid line in pixels. Defaults to `2`. */
91
+ readonly lineWidth?: number;
92
+ /** Color of the grid lines. Defaults to white. */
93
+ readonly lineColor?: string;
94
+ /** Color behind the grid lines. Defaults to transparent. */
95
+ readonly backgroundColor?: string;
96
+ /** Rotates the grid in degrees. Defaults to `0`. */
97
+ readonly rotation?: number;
98
+ /** Rotates the grid plane around the X axis in degrees. Defaults to `0`. */
99
+ readonly rotationX?: number;
100
+ /** Rotates the grid plane around the Y axis in degrees. Defaults to `0`. */
101
+ readonly rotationY?: number;
102
+ /** Perspective distance in pixels. Defaults to `0` for an orthographic grid. */
103
+ readonly perspective?: number;
104
+ /** Horizontal grid offset in pixels. Defaults to `0`. */
105
+ readonly offsetX?: number;
106
+ /** Vertical grid offset in pixels. Defaults to `0`. */
107
+ readonly offsetY?: number;
108
+ /** Masks the generated grid to the source alpha channel. Defaults to `false`. */
109
+ readonly maskToSourceAlpha?: boolean;
110
+ };
111
+ export declare const gridlines: (params?: (GridlinesParams & {
112
+ readonly disabled?: boolean | undefined;
113
+ }) | undefined) => import("remotion").EffectDescriptor<unknown>;
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ export { checkerboard, type CheckerboardParams } from './checkerboard.js';
1
2
  export { pattern, type PatternOrigin, type PatternParams } from './pattern.js';
2
3
  export { rings, type RingsCenter, type RingsParams } from './rings.js';
4
+ export { gridlines, type GridlinesParams } from './gridlines.js';
3
5
  export { zigzag, type ZigzagDirection, type ZigzagParams } from './zigzag.js';
@@ -6,13 +6,15 @@ export declare const testImage: ({ blob, testId, threshold, allowedMismatchedPix
6
6
  allowedMismatchedPixelRatio?: number | undefined;
7
7
  }) => Promise<void>;
8
8
  export declare const descriptorsToMemoizedEffects: (effects: EffectDescriptor<unknown>[]) => EffectDefinitionAndStack<unknown>[];
9
- export declare const renderEffectChainToCanvas: ({ effects, width, height, }: {
9
+ export declare const renderEffectChainToCanvas: ({ effects, width, height, source, }: {
10
10
  effects: EffectDefinitionAndStack<unknown>[];
11
11
  width?: number | undefined;
12
12
  height?: number | undefined;
13
+ source?: CanvasImageSource | undefined;
13
14
  }) => Promise<HTMLCanvasElement>;
14
- export declare const renderEffectChainToBlob: ({ effects, width, height, }: {
15
+ export declare const renderEffectChainToBlob: ({ effects, width, height, source, }: {
15
16
  effects: EffectDefinitionAndStack<unknown>[];
16
17
  width?: number | undefined;
17
18
  height?: number | undefined;
19
+ source?: CanvasImageSource | undefined;
18
20
  }) => Promise<Blob>;
@@ -0,0 +1,12 @@
1
+ export type ZoomBlurCenter = readonly [number, number];
2
+ export type ZoomBlurParams = {
3
+ /** Blur strength in pixels. Defaults to `40`. */
4
+ readonly amount?: number;
5
+ /** Origin of the zoom blur in UV coordinates. Defaults to `[0.5, 0.5]`. */
6
+ readonly center?: ZoomBlurCenter;
7
+ /** Number of source samples. Higher values are smoother. Defaults to `24`. */
8
+ readonly samples?: number;
9
+ };
10
+ export declare const zoomBlur: (params?: (ZoomBlurParams & {
11
+ readonly disabled?: boolean | undefined;
12
+ }) | undefined) => import("remotion").EffectDescriptor<unknown>;
@@ -0,0 +1,26 @@
1
+ export type ZoomBlurState = {
2
+ readonly gl: WebGL2RenderingContext;
3
+ readonly program: WebGLProgram;
4
+ readonly vao: WebGLVertexArrayObject;
5
+ readonly vbo: WebGLBuffer;
6
+ readonly textureSource: WebGLTexture;
7
+ readonly uniforms: {
8
+ readonly uSource: WebGLUniformLocation | null;
9
+ readonly uResolution: WebGLUniformLocation | null;
10
+ readonly uCenter: WebGLUniformLocation | null;
11
+ readonly uAmount: WebGLUniformLocation | null;
12
+ readonly uSamples: WebGLUniformLocation | null;
13
+ };
14
+ };
15
+ export declare const setupZoomBlur: (target: HTMLCanvasElement) => ZoomBlurState;
16
+ export declare const cleanupZoomBlur: (state: ZoomBlurState) => void;
17
+ export declare const applyZoomBlur: ({ state, source, width, height, amount, center, samples, flipSourceY, }: {
18
+ readonly state: ZoomBlurState;
19
+ readonly source: CanvasImageSource;
20
+ readonly width: number;
21
+ readonly height: number;
22
+ readonly amount: number;
23
+ readonly center: readonly [number, number];
24
+ readonly samples: number;
25
+ readonly flipSourceY: boolean;
26
+ }) => void;
@@ -0,0 +1,2 @@
1
+ export declare const ZOOM_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";
2
+ export declare const ZOOM_BLUR_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec2 uResolution;\nuniform vec2 uCenter;\nuniform float uAmount;\nuniform int uSamples;\n\nconst int MAX_SAMPLES = 64;\n\nvoid main() {\n\tvec2 direction = vUv - uCenter;\n\tfloat normalizedAmount = uAmount / min(uResolution.x, uResolution.y);\n\tvec4 color = vec4(0.0);\n\tfloat total = 0.0;\n\n\tfor (int i = 0; i < MAX_SAMPLES; i++) {\n\t\tif (i >= uSamples) {\n\t\t\tbreak;\n\t\t}\n\n\t\tfloat denominator = max(float(uSamples - 1), 1.0);\n\t\tfloat progress = float(i) / denominator;\n\t\tvec2 sampleUv = clamp(vUv - direction * normalizedAmount * progress, 0.0, 1.0);\n\t\tcolor += texture(uSource, sampleUv);\n\t\ttotal += 1.0;\n\t}\n\n\tfragColor = color / total;\n}\n";
@@ -0,0 +1 @@
1
+ export { zoomBlur, type ZoomBlurCenter, type ZoomBlurParams, } from './zoom-blur/index.js';