@remotion/effects 4.0.473 → 4.0.475

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 +8 -0
  13. package/dist/esm/grayscale.mjs +8 -0
  14. package/dist/esm/halftone-linear-gradient.mjs +35 -3
  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 +8 -0
  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 +9 -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;
@@ -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",
@@ -166,6 +175,11 @@ var halftoneLinearGradientSchema = {
166
175
  },
167
176
  source: {}
168
177
  }
178
+ },
179
+ maskToSourceAlpha: {
180
+ type: "boolean",
181
+ default: DEFAULT_MASK_TO_SOURCE_ALPHA,
182
+ description: "Mask to source alpha"
169
183
  }
170
184
  };
171
185
  var formatEnum = (variants) => {
@@ -193,7 +207,8 @@ var resolve = (p) => ({
193
207
  ],
194
208
  gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
195
209
  colorMode: p.colorMode ?? "solid",
196
- 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
197
212
  });
198
213
  var validateNonNegative2 = (value, name) => {
199
214
  if (value < 0) {
@@ -220,6 +235,7 @@ var validateHalftoneLinearGradientParams = (params) => {
220
235
  assertOptionalUvCoordinate(params.firstStopPosition, "firstStopPosition");
221
236
  assertOptionalUvCoordinate(params.secondStopPosition, "secondStopPosition");
222
237
  assertOptionalFiniteNumber(params.gridSize, "gridSize");
238
+ assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
223
239
  assertOptionalEnum(params.colorMode, "colorMode", HALFTONE_LINEAR_GRADIENT_COLOR_MODES);
224
240
  if (params.colorMode === "source" && "dotColor" in params) {
225
241
  throw new TypeError('"dotColor" can only be set when "colorMode" is "solid"');
@@ -259,6 +275,7 @@ uniform vec2 uSecondStopPosition;
259
275
  uniform float uGridSize;
260
276
  uniform vec4 uColor;
261
277
  uniform bool uUseSourceColor;
278
+ uniform bool uMaskToSourceAlpha;
262
279
 
263
280
  float gradientProgress(vec2 uv) {
264
281
  vec2 stopVector = uSecondStopPosition - uFirstStopPosition;
@@ -274,6 +291,13 @@ vec4 sourceOver(vec4 backdrop, vec4 overlay) {
274
291
  return overlay + backdrop * (1.0 - overlay.a);
275
292
  }
276
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
+
277
301
  void main() {
278
302
  vec2 fragPos = vUv * uResolution;
279
303
  vec2 center = uResolution * 0.5;
@@ -302,7 +326,11 @@ void main() {
302
326
  vec2 sampleUv = clamp(centerUv, vec2(0.0), vec2(1.0));
303
327
  vec4 texColor = texture(uSource, sampleUv);
304
328
  vec4 dotColor = (uUseSourceColor ? texColor : uColor) * coverage;
305
- fragColor = uUseSourceColor ? dotColor : sourceOver(texColor, dotColor);
329
+ fragColor = uUseSourceColor
330
+ ? dotColor
331
+ : uMaskToSourceAlpha
332
+ ? sourceAtop(texColor, dotColor)
333
+ : sourceOver(texColor, dotColor);
306
334
  }
307
335
  `;
308
336
  var compileShader = (gl, type, source) => {
@@ -341,7 +369,8 @@ var halftoneLinearGradient = createEffect({
341
369
  backend: "webgl2",
342
370
  calculateKey: (params) => {
343
371
  const r = resolve(params);
344
- 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}`;
345
374
  },
346
375
  setup: (target) => {
347
376
  const gl = target.getContext("webgl2", {
@@ -426,6 +455,7 @@ var halftoneLinearGradient = createEffect({
426
455
  uGridSize: gl.getUniformLocation(program, "uGridSize"),
427
456
  uColor: gl.getUniformLocation(program, "uColor"),
428
457
  uUseSourceColor: gl.getUniformLocation(program, "uUseSourceColor"),
458
+ uMaskToSourceAlpha: gl.getUniformLocation(program, "uMaskToSourceAlpha"),
429
459
  colorCtx,
430
460
  cachedColorStr: "",
431
461
  cachedColorRgba: [0, 0, 0, 255]
@@ -467,6 +497,8 @@ var halftoneLinearGradient = createEffect({
467
497
  gl.uniform4f(state.uColor, cr / 255 * caNormalized, cg / 255 * caNormalized, cb / 255 * caNormalized, caNormalized);
468
498
  if (state.uUseSourceColor)
469
499
  gl.uniform1i(state.uUseSourceColor, r.colorMode === "source" ? 1 : 0);
500
+ if (state.uMaskToSourceAlpha)
501
+ gl.uniform1i(state.uMaskToSourceAlpha, r.maskToSourceAlpha ? 1 : 0);
470
502
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
471
503
  gl.bindVertexArray(null);
472
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;