@remotion/effects 4.0.469 → 4.0.471

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.
@@ -0,0 +1,531 @@
1
+ // src/zigzag.ts
2
+ import { Internals } 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
+
27
+ // src/color-utils.ts
28
+ var DEFAULT_AMOUNT = 1;
29
+ var DEFAULT_BRIGHTNESS_AMOUNT = 0;
30
+ var DEFAULT_HUE_DEGREES = 0;
31
+ var colorAmountSchema = {
32
+ type: "number",
33
+ min: 0,
34
+ max: 1,
35
+ step: 0.01,
36
+ default: DEFAULT_AMOUNT,
37
+ description: "Amount"
38
+ };
39
+ var colorMultiplierSchema = {
40
+ type: "number",
41
+ min: 0,
42
+ step: 0.01,
43
+ default: DEFAULT_AMOUNT,
44
+ description: "Amount"
45
+ };
46
+ var brightnessAmountSchema = {
47
+ type: "number",
48
+ min: -1,
49
+ max: 1,
50
+ step: 0.01,
51
+ default: DEFAULT_BRIGHTNESS_AMOUNT,
52
+ description: "Amount"
53
+ };
54
+ var hueDegreesSchema = {
55
+ type: "number",
56
+ step: 1,
57
+ default: DEFAULT_HUE_DEGREES,
58
+ description: "Degrees"
59
+ };
60
+ var assertOptionalFiniteNumber = (value, name) => {
61
+ if (value === undefined) {
62
+ return;
63
+ }
64
+ assertRequiredFiniteNumber(value, name);
65
+ };
66
+ var validateUnitInterval = (value, name) => {
67
+ if (value < 0) {
68
+ throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
69
+ }
70
+ if (value > 1) {
71
+ throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
72
+ }
73
+ };
74
+ var validateNonNegative = (value, name) => {
75
+ if (value < 0) {
76
+ throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
77
+ }
78
+ };
79
+ var validateSignedUnitInterval = (value, name) => {
80
+ if (value < -1) {
81
+ throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
82
+ }
83
+ if (value > 1) {
84
+ throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
85
+ }
86
+ };
87
+ var clampColorChannel = (value) => {
88
+ return Math.max(0, Math.min(255, value));
89
+ };
90
+ var parseColorRgba = (ctx, color) => {
91
+ ctx.clearRect(0, 0, 1, 1);
92
+ ctx.fillStyle = color;
93
+ ctx.fillRect(0, 0, 1, 1);
94
+ const { data } = ctx.getImageData(0, 0, 1, 1);
95
+ return [data[0], data[1], data[2], data[3]];
96
+ };
97
+
98
+ // src/zigzag.ts
99
+ var { createEffect, createWebGL2ContextError } = Internals;
100
+ var ZIGZAG_DIRECTIONS = ["horizontal", "vertical"];
101
+ var DEFAULT_COLORS = ["#dff4ff", "#7cc6ff"];
102
+ var DEFAULT_DIRECTION = "horizontal";
103
+ var DEFAULT_THICKNESS = 40;
104
+ var DEFAULT_GAP = 0;
105
+ var DEFAULT_ANGLE = 0;
106
+ var DEFAULT_OFFSET = 0;
107
+ var DEFAULT_AMPLITUDE = 40;
108
+ var DEFAULT_WAVELENGTH = 160;
109
+ var zigzagSchema = {
110
+ direction: {
111
+ type: "enum",
112
+ variants: {
113
+ horizontal: {},
114
+ vertical: {}
115
+ },
116
+ default: DEFAULT_DIRECTION,
117
+ description: "Direction"
118
+ },
119
+ thickness: {
120
+ type: "number",
121
+ min: 0.1,
122
+ max: 400,
123
+ step: 0.1,
124
+ default: DEFAULT_THICKNESS,
125
+ description: "Thickness"
126
+ },
127
+ gap: {
128
+ type: "number",
129
+ min: 0,
130
+ max: 400,
131
+ step: 0.1,
132
+ default: DEFAULT_GAP,
133
+ description: "Gap"
134
+ },
135
+ angle: {
136
+ type: "number",
137
+ min: -180,
138
+ max: 180,
139
+ step: 1,
140
+ default: DEFAULT_ANGLE,
141
+ description: "Angle"
142
+ },
143
+ offset: {
144
+ type: "number",
145
+ step: 0.1,
146
+ default: DEFAULT_OFFSET,
147
+ description: "Offset"
148
+ },
149
+ amplitude: {
150
+ type: "number",
151
+ min: 0,
152
+ max: 500,
153
+ step: 0.1,
154
+ default: DEFAULT_AMPLITUDE,
155
+ description: "Amplitude"
156
+ },
157
+ wavelength: {
158
+ type: "number",
159
+ min: 1,
160
+ max: 2000,
161
+ step: 1,
162
+ default: DEFAULT_WAVELENGTH,
163
+ description: "Wavelength"
164
+ }
165
+ };
166
+ var resolve = (p) => {
167
+ const thickness = p.thickness ?? DEFAULT_THICKNESS;
168
+ const gap = p.gap ?? DEFAULT_GAP;
169
+ return {
170
+ colors: p.colors ?? DEFAULT_COLORS,
171
+ direction: p.direction ?? DEFAULT_DIRECTION,
172
+ thickness,
173
+ spacing: thickness + gap,
174
+ angle: p.angle ?? DEFAULT_ANGLE,
175
+ offset: p.offset ?? DEFAULT_OFFSET,
176
+ amplitude: p.amplitude ?? DEFAULT_AMPLITUDE,
177
+ wavelength: p.wavelength ?? DEFAULT_WAVELENGTH
178
+ };
179
+ };
180
+ var formatEnum = (variants) => {
181
+ if (variants.length === 2) {
182
+ return `"${variants[0]}" or "${variants[1]}"`;
183
+ }
184
+ return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
185
+ };
186
+ var validatePositive = (value, name) => {
187
+ if (value <= 0) {
188
+ throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
189
+ }
190
+ };
191
+ var validateNonNegative2 = (value, name) => {
192
+ if (value < 0) {
193
+ throw new TypeError(`"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}`);
194
+ }
195
+ };
196
+ var validateColors = (colors) => {
197
+ if (colors === undefined) {
198
+ return;
199
+ }
200
+ if (!Array.isArray(colors) || colors.length < 2) {
201
+ throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
202
+ }
203
+ for (let i = 0;i < colors.length; i++) {
204
+ assertRequiredColor(colors[i], `colors[${i}]`);
205
+ }
206
+ };
207
+ var validateDirection = (direction) => {
208
+ if (direction === undefined) {
209
+ return;
210
+ }
211
+ if (typeof direction !== "string" || !ZIGZAG_DIRECTIONS.includes(direction)) {
212
+ throw new TypeError(`"direction" must be ${formatEnum(ZIGZAG_DIRECTIONS)}, but got ${JSON.stringify(direction)}`);
213
+ }
214
+ };
215
+ var validateZigzagParams = (params) => {
216
+ assertEffectParamsObject(params, "Zigzag");
217
+ validateColors(params.colors);
218
+ validateDirection(params.direction);
219
+ assertOptionalFiniteNumber(params.thickness, "thickness");
220
+ assertOptionalFiniteNumber(params.gap, "gap");
221
+ assertOptionalFiniteNumber(params.angle, "angle");
222
+ assertOptionalFiniteNumber(params.offset, "offset");
223
+ assertOptionalFiniteNumber(params.amplitude, "amplitude");
224
+ assertOptionalFiniteNumber(params.wavelength, "wavelength");
225
+ const thickness = params.thickness ?? DEFAULT_THICKNESS;
226
+ const gap = params.gap ?? DEFAULT_GAP;
227
+ const amplitude = params.amplitude ?? DEFAULT_AMPLITUDE;
228
+ const wavelength = params.wavelength ?? DEFAULT_WAVELENGTH;
229
+ validatePositive(thickness, "thickness");
230
+ validateNonNegative2(gap, "gap");
231
+ validateNonNegative2(amplitude, "amplitude");
232
+ validatePositive(wavelength, "wavelength");
233
+ };
234
+ var ZIGZAG_VS = `#version 300 es
235
+ in vec2 aPos;
236
+ in vec2 aUv;
237
+ out vec2 vUv;
238
+
239
+ void main() {
240
+ vUv = aUv;
241
+ gl_Position = vec4(aPos, 0.0, 1.0);
242
+ }
243
+ `;
244
+ var ZIGZAG_FS = `#version 300 es
245
+ precision highp float;
246
+
247
+ in vec2 vUv;
248
+ out vec4 fragColor;
249
+
250
+ uniform sampler2D uSource;
251
+ uniform sampler2D uPalette;
252
+ uniform vec2 uResolution;
253
+ uniform float uNumColors;
254
+ uniform int uDirection;
255
+ uniform float uThickness;
256
+ uniform float uSpacing;
257
+ uniform float uAngle;
258
+ uniform float uOffset;
259
+ uniform float uAmplitude;
260
+ uniform float uWavelength;
261
+
262
+ void main() {
263
+ vec4 texColor = texture(uSource, vUv);
264
+ float thickness = max(uThickness, 0.001);
265
+ float spacing = max(uSpacing, 0.001);
266
+ float cycle = spacing * uNumColors;
267
+ vec2 centered = vUv * uResolution - uResolution * 0.5;
268
+ float s = sin(uAngle);
269
+ float c = cos(uAngle);
270
+ vec2 rotated = vec2(
271
+ centered.x * c - centered.y * s,
272
+ centered.x * s + centered.y * c
273
+ );
274
+ float baseAxis = uDirection == 0 ? rotated.y : rotated.x;
275
+ float zigzagAxis = uDirection == 0 ? rotated.x : rotated.y;
276
+ float wavePhase = fract(zigzagAxis / max(uWavelength, 0.001));
277
+ float zigzagOffset = (1.0 - abs(wavePhase * 2.0 - 1.0) * 2.0) * uAmplitude;
278
+ float position = mod(baseAxis + zigzagOffset + uOffset, cycle);
279
+ if (position < 0.0) {
280
+ position += cycle;
281
+ }
282
+
283
+ float colorIndex = floor(position / spacing);
284
+ float inStripe = mod(position, spacing);
285
+ if (inStripe > thickness) {
286
+ fragColor = texColor;
287
+ return;
288
+ }
289
+
290
+ float texCoord = (colorIndex + 0.5) / uNumColors;
291
+ vec4 lineColor = texture(uPalette, vec2(texCoord, 0.5));
292
+ float lineAlpha = lineColor.a;
293
+ vec3 premultipliedLine = lineColor.rgb * lineAlpha;
294
+
295
+ fragColor = vec4(
296
+ premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
297
+ lineAlpha + texColor.a * (1.0 - lineAlpha)
298
+ );
299
+ }
300
+ `;
301
+ var compileShader = (gl, type, source) => {
302
+ const shader = gl.createShader(type);
303
+ if (!shader) {
304
+ throw new Error("Failed to create WebGL shader");
305
+ }
306
+ gl.shaderSource(shader, source);
307
+ gl.compileShader(shader);
308
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
309
+ const log = gl.getShaderInfoLog(shader);
310
+ gl.deleteShader(shader);
311
+ throw new Error(`Zigzag shader compile failed: ${log ?? "(no log)"}`);
312
+ }
313
+ return shader;
314
+ };
315
+ var linkProgram = (gl, vs, fs) => {
316
+ const program = gl.createProgram();
317
+ if (!program) {
318
+ throw new Error("Failed to create WebGL program");
319
+ }
320
+ gl.attachShader(program, vs);
321
+ gl.attachShader(program, fs);
322
+ gl.linkProgram(program);
323
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
324
+ const log = gl.getProgramInfoLog(program);
325
+ gl.deleteProgram(program);
326
+ throw new Error(`Zigzag program link failed: ${log ?? "(no log)"}`);
327
+ }
328
+ return program;
329
+ };
330
+ var createProgram = (gl, vertexSource, fragmentSource) => {
331
+ const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
332
+ const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
333
+ const program = linkProgram(gl, vs, fs);
334
+ gl.deleteShader(vs);
335
+ gl.deleteShader(fs);
336
+ return program;
337
+ };
338
+ var createTexture = (gl, filter) => {
339
+ const texture = gl.createTexture();
340
+ if (!texture) {
341
+ throw new Error("Failed to create WebGL texture");
342
+ }
343
+ gl.bindTexture(gl.TEXTURE_2D, texture);
344
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
345
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
346
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
347
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
348
+ gl.bindTexture(gl.TEXTURE_2D, null);
349
+ return texture;
350
+ };
351
+ var setupZigzag = (target) => {
352
+ const gl = target.getContext("webgl2", {
353
+ premultipliedAlpha: true,
354
+ alpha: true,
355
+ preserveDrawingBuffer: true
356
+ });
357
+ if (!gl) {
358
+ throw createWebGL2ContextError("zigzag effect");
359
+ }
360
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
361
+ const program = createProgram(gl, ZIGZAG_VS, ZIGZAG_FS);
362
+ const vao = gl.createVertexArray();
363
+ if (!vao) {
364
+ throw new Error("Failed to create WebGL vertex array");
365
+ }
366
+ gl.bindVertexArray(vao);
367
+ const data = new Float32Array([
368
+ -1,
369
+ -1,
370
+ 0,
371
+ 0,
372
+ 1,
373
+ -1,
374
+ 1,
375
+ 0,
376
+ -1,
377
+ 1,
378
+ 0,
379
+ 1,
380
+ 1,
381
+ 1,
382
+ 1,
383
+ 1
384
+ ]);
385
+ const vbo = gl.createBuffer();
386
+ if (!vbo) {
387
+ throw new Error("Failed to create WebGL buffer");
388
+ }
389
+ gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
390
+ gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
391
+ const aPos = gl.getAttribLocation(program, "aPos");
392
+ const aUv = gl.getAttribLocation(program, "aUv");
393
+ gl.enableVertexAttribArray(aPos);
394
+ gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
395
+ gl.enableVertexAttribArray(aUv);
396
+ gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
397
+ gl.bindVertexArray(null);
398
+ const colorCanvas = document.createElement("canvas");
399
+ colorCanvas.width = 1;
400
+ colorCanvas.height = 1;
401
+ const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
402
+ if (!colorCtx) {
403
+ throw new Error("Failed to acquire 2D context for color parsing");
404
+ }
405
+ return {
406
+ gl,
407
+ program,
408
+ vao,
409
+ vbo,
410
+ sourceTexture: createTexture(gl, gl.LINEAR),
411
+ paletteTexture: createTexture(gl, gl.NEAREST),
412
+ colorCtx,
413
+ uniforms: {
414
+ uSource: gl.getUniformLocation(program, "uSource"),
415
+ uPalette: gl.getUniformLocation(program, "uPalette"),
416
+ uResolution: gl.getUniformLocation(program, "uResolution"),
417
+ uNumColors: gl.getUniformLocation(program, "uNumColors"),
418
+ uDirection: gl.getUniformLocation(program, "uDirection"),
419
+ uThickness: gl.getUniformLocation(program, "uThickness"),
420
+ uSpacing: gl.getUniformLocation(program, "uSpacing"),
421
+ uAngle: gl.getUniformLocation(program, "uAngle"),
422
+ uOffset: gl.getUniformLocation(program, "uOffset"),
423
+ uAmplitude: gl.getUniformLocation(program, "uAmplitude"),
424
+ uWavelength: gl.getUniformLocation(program, "uWavelength")
425
+ },
426
+ cachedPaletteKey: "",
427
+ palettePixelData: new Uint8Array(0)
428
+ };
429
+ };
430
+ var updatePalette = (state, colors) => {
431
+ const paletteKey = colors.join("|");
432
+ const paletteDirty = state.cachedPaletteKey !== paletteKey;
433
+ if (!paletteDirty) {
434
+ return false;
435
+ }
436
+ state.cachedPaletteKey = paletteKey;
437
+ const len = colors.length * 4;
438
+ if (state.palettePixelData.length !== len) {
439
+ state.palettePixelData = new Uint8Array(len);
440
+ }
441
+ const { palettePixelData } = state;
442
+ for (let i = 0;i < colors.length; i++) {
443
+ const color = parseColorRgba(state.colorCtx, colors[i]);
444
+ palettePixelData[i * 4] = color[0];
445
+ palettePixelData[i * 4 + 1] = color[1];
446
+ palettePixelData[i * 4 + 2] = color[2];
447
+ palettePixelData[i * 4 + 3] = color[3];
448
+ }
449
+ return true;
450
+ };
451
+ var zigzag = createEffect({
452
+ type: "remotion/zigzag",
453
+ label: "zigzag()",
454
+ documentationLink: "https://www.remotion.dev/docs/effects/zigzag",
455
+ backend: "webgl2",
456
+ calculateKey: (params) => {
457
+ const r = resolve(params);
458
+ return `zigzag-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}-${r.amplitude}-${r.wavelength}`;
459
+ },
460
+ setup: (target) => setupZigzag(target),
461
+ apply: ({ source, width, height, params, state, flipSourceY }) => {
462
+ const r = resolve(params);
463
+ const paletteDirty = updatePalette(state, r.colors);
464
+ const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
465
+ gl.viewport(0, 0, width, height);
466
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null);
467
+ gl.clearColor(0, 0, 0, 0);
468
+ gl.clear(gl.COLOR_BUFFER_BIT);
469
+ gl.activeTexture(gl.TEXTURE0);
470
+ gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
471
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
472
+ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
473
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
474
+ gl.activeTexture(gl.TEXTURE1);
475
+ gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
476
+ if (paletteDirty) {
477
+ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
478
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
479
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, r.colors.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, state.palettePixelData);
480
+ gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
481
+ }
482
+ gl.useProgram(program);
483
+ if (uniforms.uSource)
484
+ gl.uniform1i(uniforms.uSource, 0);
485
+ if (uniforms.uPalette)
486
+ gl.uniform1i(uniforms.uPalette, 1);
487
+ if (uniforms.uResolution)
488
+ gl.uniform2f(uniforms.uResolution, width, height);
489
+ if (uniforms.uNumColors)
490
+ gl.uniform1f(uniforms.uNumColors, r.colors.length);
491
+ if (uniforms.uDirection)
492
+ gl.uniform1i(uniforms.uDirection, r.direction === "horizontal" ? 0 : 1);
493
+ if (uniforms.uThickness)
494
+ gl.uniform1f(uniforms.uThickness, r.thickness);
495
+ if (uniforms.uSpacing)
496
+ gl.uniform1f(uniforms.uSpacing, r.spacing);
497
+ if (uniforms.uAngle)
498
+ gl.uniform1f(uniforms.uAngle, r.angle * Math.PI / 180);
499
+ if (uniforms.uOffset)
500
+ gl.uniform1f(uniforms.uOffset, r.offset);
501
+ if (uniforms.uAmplitude)
502
+ gl.uniform1f(uniforms.uAmplitude, r.amplitude);
503
+ if (uniforms.uWavelength)
504
+ gl.uniform1f(uniforms.uWavelength, r.wavelength);
505
+ gl.bindVertexArray(vao);
506
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
507
+ gl.bindVertexArray(null);
508
+ gl.bindTexture(gl.TEXTURE_2D, null);
509
+ gl.useProgram(null);
510
+ },
511
+ cleanup: ({
512
+ gl,
513
+ program,
514
+ vao,
515
+ vbo,
516
+ sourceTexture,
517
+ paletteTexture
518
+ }) => {
519
+ gl.deleteTexture(sourceTexture);
520
+ gl.deleteTexture(paletteTexture);
521
+ gl.deleteBuffer(vbo);
522
+ gl.deleteProgram(program);
523
+ gl.deleteVertexArray(vao);
524
+ },
525
+ schema: zigzagSchema,
526
+ validateParams: validateZigzagParams
527
+ });
528
+ export {
529
+ zigzagSchema,
530
+ zigzag
531
+ };
@@ -0,0 +1,43 @@
1
+ declare const EVOLVE_DIRECTIONS: readonly ["left", "right", "top", "bottom"];
2
+ export type EvolveDirection = (typeof EVOLVE_DIRECTIONS)[number];
3
+ export declare const evolveSchema: {
4
+ readonly progress: {
5
+ readonly type: "number";
6
+ readonly min: 0;
7
+ readonly max: 1;
8
+ readonly step: 0.01;
9
+ readonly default: 0.5;
10
+ readonly description: "Progress";
11
+ };
12
+ readonly direction: {
13
+ readonly type: "enum";
14
+ readonly variants: {
15
+ readonly left: {};
16
+ readonly right: {};
17
+ readonly top: {};
18
+ readonly bottom: {};
19
+ };
20
+ readonly default: "left";
21
+ readonly description: "Direction";
22
+ };
23
+ readonly feather: {
24
+ readonly type: "number";
25
+ readonly min: 0;
26
+ readonly max: 1;
27
+ readonly step: 0.01;
28
+ readonly default: 0.1;
29
+ readonly description: "Feather";
30
+ };
31
+ };
32
+ export type EvolveParams = {
33
+ /** Reveal progress from `0` (hidden) to `1` (fully revealed). Defaults to `0.5`. */
34
+ readonly progress?: number;
35
+ /** Reveal direction. Defaults to `left`. */
36
+ readonly direction?: EvolveDirection;
37
+ /** Softness of the evolving edge from `0` (sharp) to `1` (fully feathered). Defaults to `0.1`. */
38
+ readonly feather?: number;
39
+ };
40
+ export declare const evolve: (params?: (EvolveParams & {
41
+ readonly disabled?: boolean | undefined;
42
+ }) | undefined) => import("remotion").EffectDescriptor<unknown>;
43
+ export {};
@@ -0,0 +1,28 @@
1
+ export type FisheyeState = {
2
+ gl: WebGL2RenderingContext;
3
+ program: WebGLProgram;
4
+ vao: WebGLVertexArrayObject;
5
+ vbo: WebGLBuffer;
6
+ textureSource: WebGLTexture;
7
+ uniforms: {
8
+ uSource: WebGLUniformLocation | null;
9
+ uCenter: WebGLUniformLocation | null;
10
+ uFieldOfView: WebGLUniformLocation | null;
11
+ uRadius: WebGLUniformLocation | null;
12
+ uZoom: WebGLUniformLocation | null;
13
+ uAspect: WebGLUniformLocation | null;
14
+ };
15
+ };
16
+ export declare const setupFisheye: (target: HTMLCanvasElement) => FisheyeState;
17
+ export declare const cleanupFisheye: (state: FisheyeState) => void;
18
+ export declare const applyFisheye: ({ state, source, width, height, center, fieldOfView, radius, zoom, flipSourceY, }: {
19
+ readonly state: FisheyeState;
20
+ readonly source: CanvasImageSource;
21
+ readonly width: number;
22
+ readonly height: number;
23
+ readonly center: readonly [number, number];
24
+ readonly fieldOfView: number;
25
+ readonly radius: number;
26
+ readonly zoom: number;
27
+ readonly flipSourceY: boolean;
28
+ }) => void;
@@ -0,0 +1,2 @@
1
+ export declare const FISHEYE_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 FISHEYE_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D uSource;\nuniform vec2 uCenter;\nuniform float uFieldOfView;\nuniform float uRadius;\nuniform float uZoom;\nuniform float uAspect;\n\nvoid main() {\n\tvec2 toCenter = vUv - uCenter;\n\tvec2 aspectCorrected = vec2(toCenter.x * uAspect, toCenter.y);\n\n\tfloat dist = length(aspectCorrected);\n\tfloat r = dist / max(uRadius, 0.0001);\n\n\tif (r > 1.0 || uFieldOfView <= 0.0001) {\n\t\tfragColor = vec4(0.0);\n\t\treturn;\n\t}\n\n\tfloat halfFov = uFieldOfView * 0.5;\n\tfloat warped = tan(r * halfFov) / tan(halfFov);\n\n\tfloat scale = (dist > 0.00001) ? (warped * uRadius / dist) : 0.0;\n\tvec2 warpedAspect = aspectCorrected * scale;\n\tvec2 warpedOffset = vec2(warpedAspect.x / uAspect, warpedAspect.y);\n\twarpedOffset /= max(uZoom, 0.0001);\n\n\tvec2 srcUv = uCenter + warpedOffset;\n\n\tif (\n\t\tsrcUv.x < 0.0 ||\n\t\tsrcUv.x > 1.0 ||\n\t\tsrcUv.y < 0.0 ||\n\t\tsrcUv.y > 1.0\n\t) {\n\t\tfragColor = vec4(0.0);\n\t\treturn;\n\t}\n\n\tfragColor = texture(uSource, srcUv);\n}\n";
@@ -0,0 +1,26 @@
1
+ export type FisheyeUvCoordinate = readonly [number, number];
2
+ export type FisheyeParams = {
3
+ /**
4
+ * Lens field of view in radians, from `0` to `Math.PI`.
5
+ * Higher values produce a stronger fisheye distortion.
6
+ * Defaults to `2.5` (approx. 143°).
7
+ */
8
+ readonly fieldOfView?: number;
9
+ /**
10
+ * Center of the lens in UV coordinates. Defaults to `[0.5, 0.5]`.
11
+ */
12
+ readonly center?: FisheyeUvCoordinate;
13
+ /**
14
+ * Radius of the lens area, in normalized half-height units.
15
+ * `1` covers the full vertical area. Defaults to `1`.
16
+ */
17
+ readonly radius?: number;
18
+ /**
19
+ * Post-warp zoom factor. Values above `1` zoom in, below `1` zoom out.
20
+ * Defaults to `1`.
21
+ */
22
+ readonly zoom?: number;
23
+ };
24
+ export declare const fisheye: (params?: (FisheyeParams & {
25
+ readonly disabled?: boolean | undefined;
26
+ }) | undefined) => import("remotion").EffectDescriptor<unknown>;
@@ -0,0 +1 @@
1
+ export { fisheye, type FisheyeParams } from './fisheye/index.js';
package/dist/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export {};
1
+ export { rings, type RingsCenter, type RingsParams } from './rings.js';
2
+ export { zigzag, type ZigzagDirection, type ZigzagParams } from './zigzag.js';
@@ -0,0 +1,61 @@
1
+ declare const LINE_DIRECTIONS: readonly ["horizontal", "vertical"];
2
+ export declare const linesSchema: {
3
+ readonly direction: {
4
+ readonly type: "enum";
5
+ readonly variants: {
6
+ readonly horizontal: {};
7
+ readonly vertical: {};
8
+ };
9
+ readonly default: "horizontal";
10
+ readonly description: "Direction";
11
+ };
12
+ readonly thickness: {
13
+ readonly type: "number";
14
+ readonly min: 0.1;
15
+ readonly max: 400;
16
+ readonly step: 0.1;
17
+ readonly default: 40;
18
+ readonly description: "Thickness";
19
+ };
20
+ readonly gap: {
21
+ readonly type: "number";
22
+ readonly min: 0;
23
+ readonly max: 400;
24
+ readonly step: 0.1;
25
+ readonly default: 0;
26
+ readonly description: "Gap";
27
+ };
28
+ readonly angle: {
29
+ readonly type: "number";
30
+ readonly min: -180;
31
+ readonly max: 180;
32
+ readonly step: 1;
33
+ readonly default: 0;
34
+ readonly description: "Angle";
35
+ };
36
+ readonly offset: {
37
+ readonly type: "number";
38
+ readonly step: 0.1;
39
+ readonly default: 0;
40
+ readonly description: "Offset";
41
+ };
42
+ };
43
+ export type LinesDirection = (typeof LINE_DIRECTIONS)[number];
44
+ export type LinesParams = {
45
+ /** Stripe colors, assigned cyclically. Defaults to light blue shades. */
46
+ readonly colors?: readonly string[];
47
+ /** Line direction. Defaults to `horizontal`. */
48
+ readonly direction?: LinesDirection;
49
+ /** Thickness of each stripe in pixels. Defaults to `40`. */
50
+ readonly thickness?: number;
51
+ /** Transparent gap in pixels between each stripe. Defaults to `0` (stripes are packed solid). */
52
+ readonly gap?: number;
53
+ /** Rotates the line pattern in degrees. Defaults to `0`. */
54
+ readonly angle?: number;
55
+ /** Offset in pixels. Animate this value to scroll the lines. Defaults to `0`. */
56
+ readonly offset?: number;
57
+ };
58
+ export declare const lines: (params?: (LinesParams & {
59
+ readonly disabled?: boolean | undefined;
60
+ }) | undefined) => import("remotion").EffectDescriptor<unknown>;
61
+ export {};