@remotion/effects 4.0.472 → 4.0.474

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.
Files changed (45) hide show
  1. package/dist/esm/barrel-distortion.mjs +8 -0
  2. package/dist/esm/blur.mjs +8 -0
  3. package/dist/esm/brightness.mjs +8 -0
  4. package/dist/esm/chromatic-aberration.mjs +8 -0
  5. package/dist/esm/color-key.mjs +8 -0
  6. package/dist/esm/contrast.mjs +8 -0
  7. package/dist/esm/dot-grid.mjs +10 -2
  8. package/dist/esm/drop-shadow.mjs +8 -0
  9. package/dist/esm/duotone.mjs +8 -0
  10. package/dist/esm/evolve.mjs +8 -0
  11. package/dist/esm/fisheye.mjs +8 -0
  12. package/dist/esm/glow.mjs +9 -1
  13. package/dist/esm/grayscale.mjs +8 -0
  14. package/dist/esm/halftone-linear-gradient.mjs +37 -4
  15. package/dist/esm/halftone.mjs +8 -8
  16. package/dist/esm/hue.mjs +8 -0
  17. package/dist/esm/index.mjs +56 -6
  18. package/dist/esm/invert.mjs +8 -0
  19. package/dist/esm/linear-progressive-blur.mjs +10 -1
  20. package/dist/esm/lines.mjs +32 -3
  21. package/dist/esm/mirror.mjs +8 -0
  22. package/dist/esm/noise-displacement.mjs +578 -0
  23. package/dist/esm/noise.mjs +10 -2
  24. package/dist/esm/pixel-dissolve.mjs +8 -0
  25. package/dist/esm/rings.mjs +32 -3
  26. package/dist/esm/saturation.mjs +8 -0
  27. package/dist/esm/scale.mjs +8 -0
  28. package/dist/esm/scanlines.mjs +10 -2
  29. package/dist/esm/shine.mjs +8 -0
  30. package/dist/esm/speckle.mjs +8 -0
  31. package/dist/esm/tint.mjs +8 -0
  32. package/dist/esm/translate.mjs +8 -0
  33. package/dist/esm/vignette.mjs +8 -0
  34. package/dist/esm/wave.mjs +8 -0
  35. package/dist/esm/waves.mjs +32 -3
  36. package/dist/esm/white-noise.mjs +8 -0
  37. package/dist/esm/zigzag.mjs +32 -3
  38. package/dist/halftone-linear-gradient.d.ts +10 -0
  39. package/dist/lines.d.ts +7 -0
  40. package/dist/noise-displacement.d.ts +26 -0
  41. package/dist/rings.d.ts +7 -0
  42. package/dist/validate-effect-param.d.ts +1 -0
  43. package/dist/waves.d.ts +7 -0
  44. package/dist/zigzag.d.ts +7 -0
  45. package/package.json +11 -3
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
package/dist/esm/blur.mjs CHANGED
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/blur/blur-runtime.ts
28
36
  import { Internals } from "remotion";
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -133,7 +141,7 @@ var resolve = (p) => ({
133
141
  gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
134
142
  invert: p.invert ?? DEFAULT_INVERT
135
143
  });
136
- var assertOptionalBoolean = (value, name) => {
144
+ var assertOptionalBoolean2 = (value, name) => {
137
145
  if (value === undefined) {
138
146
  return;
139
147
  }
@@ -150,7 +158,7 @@ var validateDotGridParams = (params) => {
150
158
  assertEffectParamsObject(params, "Dot grid");
151
159
  assertOptionalFiniteNumber(params.dotSize, "dotSize");
152
160
  assertOptionalFiniteNumber(params.gridSize, "gridSize");
153
- assertOptionalBoolean(params.invert, "invert");
161
+ assertOptionalBoolean2(params.invert, "invert");
154
162
  if (params.dotSize !== undefined) {
155
163
  validateNonNegative(params.dotSize, "dotSize");
156
164
  }
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
package/dist/esm/glow.mjs CHANGED
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -570,7 +578,7 @@ var validateGlowParams = (params) => {
570
578
  };
571
579
  var glow = createEffect({
572
580
  type: "remotion/glow",
573
- label: "Glow",
581
+ label: "glow()",
574
582
  documentationLink: "https://www.remotion.dev/docs/effects/glow",
575
583
  backend: "webgl2",
576
584
  calculateKey: (params) => {
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -107,6 +115,7 @@ var DEFAULT_FIRST_STOP_POSITION = [0, 0.5];
107
115
  var DEFAULT_SECOND_STOP_POSITION = [1, 0.5];
108
116
  var DEFAULT_GRID_SIZE = 24;
109
117
  var DEFAULT_DOT_COLOR = "black";
118
+ var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
110
119
  var halftoneLinearGradientSchema = {
111
120
  firstStopDotSize: {
112
121
  type: "number",
@@ -132,7 +141,8 @@ var halftoneLinearGradientSchema = {
132
141
  max: 2,
133
142
  step: 0.01,
134
143
  default: DEFAULT_FIRST_STOP_POSITION,
135
- description: "First stop position"
144
+ description: "First stop position",
145
+ lineTo: "secondStopPosition"
136
146
  },
137
147
  secondStopPosition: {
138
148
  type: "uv-coordinate",
@@ -165,6 +175,11 @@ var halftoneLinearGradientSchema = {
165
175
  },
166
176
  source: {}
167
177
  }
178
+ },
179
+ maskToSourceAlpha: {
180
+ type: "boolean",
181
+ default: DEFAULT_MASK_TO_SOURCE_ALPHA,
182
+ description: "Mask to source alpha"
168
183
  }
169
184
  };
170
185
  var formatEnum = (variants) => {
@@ -192,7 +207,8 @@ var resolve = (p) => ({
192
207
  ],
193
208
  gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
194
209
  colorMode: p.colorMode ?? "solid",
195
- dotColor: "dotColor" in p ? p.dotColor ?? DEFAULT_DOT_COLOR : DEFAULT_DOT_COLOR
210
+ dotColor: "dotColor" in p ? p.dotColor ?? DEFAULT_DOT_COLOR : DEFAULT_DOT_COLOR,
211
+ maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
196
212
  });
197
213
  var validateNonNegative2 = (value, name) => {
198
214
  if (value < 0) {
@@ -219,6 +235,7 @@ var validateHalftoneLinearGradientParams = (params) => {
219
235
  assertOptionalUvCoordinate(params.firstStopPosition, "firstStopPosition");
220
236
  assertOptionalUvCoordinate(params.secondStopPosition, "secondStopPosition");
221
237
  assertOptionalFiniteNumber(params.gridSize, "gridSize");
238
+ assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
222
239
  assertOptionalEnum(params.colorMode, "colorMode", HALFTONE_LINEAR_GRADIENT_COLOR_MODES);
223
240
  if (params.colorMode === "source" && "dotColor" in params) {
224
241
  throw new TypeError('"dotColor" can only be set when "colorMode" is "solid"');
@@ -258,6 +275,7 @@ uniform vec2 uSecondStopPosition;
258
275
  uniform float uGridSize;
259
276
  uniform vec4 uColor;
260
277
  uniform bool uUseSourceColor;
278
+ uniform bool uMaskToSourceAlpha;
261
279
 
262
280
  float gradientProgress(vec2 uv) {
263
281
  vec2 stopVector = uSecondStopPosition - uFirstStopPosition;
@@ -273,6 +291,13 @@ vec4 sourceOver(vec4 backdrop, vec4 overlay) {
273
291
  return overlay + backdrop * (1.0 - overlay.a);
274
292
  }
275
293
 
294
+ vec4 sourceAtop(vec4 backdrop, vec4 overlay) {
295
+ return vec4(
296
+ overlay.rgb * backdrop.a + backdrop.rgb * (1.0 - overlay.a),
297
+ backdrop.a
298
+ );
299
+ }
300
+
276
301
  void main() {
277
302
  vec2 fragPos = vUv * uResolution;
278
303
  vec2 center = uResolution * 0.5;
@@ -301,7 +326,11 @@ void main() {
301
326
  vec2 sampleUv = clamp(centerUv, vec2(0.0), vec2(1.0));
302
327
  vec4 texColor = texture(uSource, sampleUv);
303
328
  vec4 dotColor = (uUseSourceColor ? texColor : uColor) * coverage;
304
- fragColor = uUseSourceColor ? dotColor : sourceOver(texColor, dotColor);
329
+ fragColor = uUseSourceColor
330
+ ? dotColor
331
+ : uMaskToSourceAlpha
332
+ ? sourceAtop(texColor, dotColor)
333
+ : sourceOver(texColor, dotColor);
305
334
  }
306
335
  `;
307
336
  var compileShader = (gl, type, source) => {
@@ -340,7 +369,8 @@ var halftoneLinearGradient = createEffect({
340
369
  backend: "webgl2",
341
370
  calculateKey: (params) => {
342
371
  const r = resolve(params);
343
- return `halftone-linear-gradient-${r.firstStopDotSize}-${r.secondStopDotSize}-${r.firstStopPosition.join(":")}-${r.secondStopPosition.join(":")}-${r.gridSize}-${r.colorMode}-${r.dotColor}`;
372
+ const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
373
+ return `halftone-linear-gradient-${r.firstStopDotSize}-${r.secondStopDotSize}-${r.firstStopPosition.join(":")}-${r.secondStopPosition.join(":")}-${r.gridSize}-${r.colorMode}-${r.dotColor}${maskSuffix}`;
344
374
  },
345
375
  setup: (target) => {
346
376
  const gl = target.getContext("webgl2", {
@@ -425,6 +455,7 @@ var halftoneLinearGradient = createEffect({
425
455
  uGridSize: gl.getUniformLocation(program, "uGridSize"),
426
456
  uColor: gl.getUniformLocation(program, "uColor"),
427
457
  uUseSourceColor: gl.getUniformLocation(program, "uUseSourceColor"),
458
+ uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha"),
428
459
  colorCtx,
429
460
  cachedColorStr: "",
430
461
  cachedColorRgba: [0, 0, 0, 255]
@@ -466,6 +497,8 @@ var halftoneLinearGradient = createEffect({
466
497
  gl.uniform4f(state.uColor, cr / 255 * caNormalized, cg / 255 * caNormalized, cb / 255 * caNormalized, caNormalized);
467
498
  if (state.uUseSourceColor)
468
499
  gl.uniform1i(state.uUseSourceColor, r.colorMode === "source" ? 1 : 0);
500
+ if (state.uMaskToSourceAlpha)
501
+ gl.uniform1i(state.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
469
502
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
470
503
  gl.bindVertexArray(null);
471
504
  gl.bindTexture(gl.TEXTURE_2D, null);
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -187,14 +195,6 @@ var assertOptionalEnum = (value, name, variants) => {
187
195
  throw new TypeError(`"${name}" must be ${formatEnum(variants)}`);
188
196
  }
189
197
  };
190
- var assertOptionalBoolean = (value, name) => {
191
- if (value === undefined) {
192
- return;
193
- }
194
- if (typeof value !== "boolean") {
195
- throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
196
- }
197
- };
198
198
  var resolve = (p) => ({
199
199
  shape: p.shape ?? "circle",
200
200
  dotSize: p.dotSize ?? 20,
package/dist/esm/hue.mjs CHANGED
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -105,6 +113,7 @@ var DEFAULT_CENTER = [0.5, 0.5];
105
113
  var DEFAULT_THICKNESS = 40;
106
114
  var DEFAULT_GAP = 0;
107
115
  var DEFAULT_OFFSET = 0;
116
+ var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
108
117
  var ringsSchema = {
109
118
  center: {
110
119
  type: "uv-coordinate",
@@ -138,6 +147,11 @@ var ringsSchema = {
138
147
  default: DEFAULT_OFFSET,
139
148
  description: "Offset",
140
149
  hiddenFromList: false
150
+ },
151
+ maskToSourceAlpha: {
152
+ type: "boolean",
153
+ default: DEFAULT_MASK_TO_SOURCE_ALPHA,
154
+ description: "Mask to source alpha"
141
155
  }
142
156
  };
143
157
  var resolve = (p) => {
@@ -148,7 +162,8 @@ var resolve = (p) => {
148
162
  center: [...p.center ?? DEFAULT_CENTER],
149
163
  thickness,
150
164
  spacing: thickness + gap,
151
- offset: p.offset ?? DEFAULT_OFFSET
165
+ offset: p.offset ?? DEFAULT_OFFSET,
166
+ maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
152
167
  };
153
168
  };
154
169
  var validatePositive = (value, name) => {
@@ -189,6 +204,7 @@ var validateRingsParams = (params) => {
189
204
  assertOptionalFiniteNumber(params.thickness, "thickness");
190
205
  assertOptionalFiniteNumber(params.gap, "gap");
191
206
  assertOptionalFiniteNumber(params.offset, "offset");
207
+ assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
192
208
  const thickness = params.thickness ?? DEFAULT_THICKNESS;
193
209
  const gap = params.gap ?? DEFAULT_GAP;
194
210
  validatePositive(thickness, "thickness");
@@ -218,6 +234,7 @@ uniform vec2 uCenter;
218
234
  uniform float uThickness;
219
235
  uniform float uSpacing;
220
236
  uniform float uOffset;
237
+ uniform bool uMaskToSourceAlpha;
221
238
 
222
239
  void main() {
223
240
  vec4 texColor = texture(uSource, vUv);
@@ -244,6 +261,14 @@ void main() {
244
261
  float ringAlpha = ringColor.a;
245
262
  vec3 premultipliedRing = ringColor.rgb * ringAlpha;
246
263
 
264
+ if (uMaskToSourceAlpha) {
265
+ fragColor = vec4(
266
+ premultipliedRing * texColor.a + texColor.rgb * (1.0 - ringAlpha),
267
+ texColor.a
268
+ );
269
+ return;
270
+ }
271
+
247
272
  fragColor = vec4(
248
273
  premultipliedRing + texColor.rgb * (1.0 - ringAlpha),
249
274
  ringAlpha + texColor.a * (1.0 - ringAlpha)
@@ -370,7 +395,8 @@ var setupRings = (target) => {
370
395
  uCenter: gl.getUniformLocation(program, "uCenter"),
371
396
  uThickness: gl.getUniformLocation(program, "uThickness"),
372
397
  uSpacing: gl.getUniformLocation(program, "uSpacing"),
373
- uOffset: gl.getUniformLocation(program, "uOffset")
398
+ uOffset: gl.getUniformLocation(program, "uOffset"),
399
+ uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
374
400
  },
375
401
  cachedPaletteKey: "",
376
402
  palettePixelData: new Uint8Array(0)
@@ -404,7 +430,8 @@ var rings = createEffect({
404
430
  backend: "webgl2",
405
431
  calculateKey: (params) => {
406
432
  const r = resolve(params);
407
- return `rings-${r.colors.join("|")}-${r.center.join(":")}-${r.thickness}-${r.spacing}-${r.offset}`;
433
+ const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
434
+ return `rings-${r.colors.join("|")}-${r.center.join(":")}-${r.thickness}-${r.spacing}-${r.offset}${maskSuffix}`;
408
435
  },
409
436
  setup: (target) => setupRings(target),
410
437
  apply: ({ source, width, height, params, state, flipSourceY }) => {
@@ -445,6 +472,8 @@ var rings = createEffect({
445
472
  gl.uniform1f(uniforms.uSpacing, r.spacing);
446
473
  if (uniforms.uOffset)
447
474
  gl.uniform1f(uniforms.uOffset, r.offset);
475
+ if (uniforms.uMaskToSourceAlpha)
476
+ gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
448
477
  gl.bindVertexArray(vao);
449
478
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
450
479
  gl.bindVertexArray(null);
@@ -474,6 +503,7 @@ var DEFAULT_ANGLE = 0;
474
503
  var DEFAULT_OFFSET2 = 0;
475
504
  var DEFAULT_AMPLITUDE = 40;
476
505
  var DEFAULT_WAVELENGTH = 160;
506
+ var DEFAULT_MASK_TO_SOURCE_ALPHA2 = false;
477
507
  var zigzagSchema = {
478
508
  direction: {
479
509
  type: "enum",
@@ -532,6 +562,11 @@ var zigzagSchema = {
532
562
  default: DEFAULT_WAVELENGTH,
533
563
  description: "Wavelength",
534
564
  hiddenFromList: false
565
+ },
566
+ maskToSourceAlpha: {
567
+ type: "boolean",
568
+ default: DEFAULT_MASK_TO_SOURCE_ALPHA2,
569
+ description: "Mask to source alpha"
535
570
  }
536
571
  };
537
572
  var resolve2 = (p) => {
@@ -545,7 +580,8 @@ var resolve2 = (p) => {
545
580
  angle: p.angle ?? DEFAULT_ANGLE,
546
581
  offset: p.offset ?? DEFAULT_OFFSET2,
547
582
  amplitude: p.amplitude ?? DEFAULT_AMPLITUDE,
548
- wavelength: p.wavelength ?? DEFAULT_WAVELENGTH
583
+ wavelength: p.wavelength ?? DEFAULT_WAVELENGTH,
584
+ maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA2
549
585
  };
550
586
  };
551
587
  var formatEnum = (variants) => {
@@ -593,6 +629,7 @@ var validateZigzagParams = (params) => {
593
629
  assertOptionalFiniteNumber(params.offset, "offset");
594
630
  assertOptionalFiniteNumber(params.amplitude, "amplitude");
595
631
  assertOptionalFiniteNumber(params.wavelength, "wavelength");
632
+ assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
596
633
  const thickness = params.thickness ?? DEFAULT_THICKNESS2;
597
634
  const gap = params.gap ?? DEFAULT_GAP2;
598
635
  const amplitude = params.amplitude ?? DEFAULT_AMPLITUDE;
@@ -629,6 +666,7 @@ uniform float uAngle;
629
666
  uniform float uOffset;
630
667
  uniform float uAmplitude;
631
668
  uniform float uWavelength;
669
+ uniform bool uMaskToSourceAlpha;
632
670
 
633
671
  void main() {
634
672
  vec4 texColor = texture(uSource, vUv);
@@ -663,6 +701,14 @@ void main() {
663
701
  float lineAlpha = lineColor.a;
664
702
  vec3 premultipliedLine = lineColor.rgb * lineAlpha;
665
703
 
704
+ if (uMaskToSourceAlpha) {
705
+ fragColor = vec4(
706
+ premultipliedLine * texColor.a + texColor.rgb * (1.0 - lineAlpha),
707
+ texColor.a
708
+ );
709
+ return;
710
+ }
711
+
666
712
  fragColor = vec4(
667
713
  premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
668
714
  lineAlpha + texColor.a * (1.0 - lineAlpha)
@@ -792,7 +838,8 @@ var setupZigzag = (target) => {
792
838
  uAngle: gl.getUniformLocation(program, "uAngle"),
793
839
  uOffset: gl.getUniformLocation(program, "uOffset"),
794
840
  uAmplitude: gl.getUniformLocation(program, "uAmplitude"),
795
- uWavelength: gl.getUniformLocation(program, "uWavelength")
841
+ uWavelength: gl.getUniformLocation(program, "uWavelength"),
842
+ uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha")
796
843
  },
797
844
  cachedPaletteKey: "",
798
845
  palettePixelData: new Uint8Array(0)
@@ -826,7 +873,8 @@ var zigzag = createEffect2({
826
873
  backend: "webgl2",
827
874
  calculateKey: (params) => {
828
875
  const r = resolve2(params);
829
- return `zigzag-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}-${r.amplitude}-${r.wavelength}`;
876
+ const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
877
+ return `zigzag-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}-${r.amplitude}-${r.wavelength}${maskSuffix}`;
830
878
  },
831
879
  setup: (target) => setupZigzag(target),
832
880
  apply: ({ source, width, height, params, state, flipSourceY }) => {
@@ -873,6 +921,8 @@ var zigzag = createEffect2({
873
921
  gl.uniform1f(uniforms.uAmplitude, r.amplitude);
874
922
  if (uniforms.uWavelength)
875
923
  gl.uniform1f(uniforms.uWavelength, r.wavelength);
924
+ if (uniforms.uMaskToSourceAlpha)
925
+ gl.uniform1i(uniforms.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
876
926
  gl.bindVertexArray(vao);
877
927
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
878
928
  gl.bindVertexArray(null);
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -23,6 +23,14 @@ var assertOptionalColor = (value, name) => {
23
23
  }
24
24
  assertRequiredColor(value, name);
25
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
+ };
26
34
 
27
35
  // src/color-utils.ts
28
36
  var DEFAULT_AMOUNT = 1;
@@ -447,7 +455,8 @@ var linearProgressiveBlurSchema = {
447
455
  max: 2,
448
456
  step: 0.01,
449
457
  default: DEFAULT_START,
450
- description: "Start"
458
+ description: "Start",
459
+ lineTo: "end"
451
460
  },
452
461
  end: {
453
462
  type: "uv-coordinate",