@remotion/effects 4.0.476 → 4.0.478

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-// src/rings.ts
+// src/pattern.ts
 import { Internals } from "remotion";
 
 // src/validate-effect-param.ts
@@ -106,13 +106,479 @@ var parseColorRgba = (ctx, color) => {
   return [data[0], data[1], data[2], data[3]];
 };
 
-// src/rings.ts
+// src/pattern.ts
 var { createEffect, createWebGL2ContextError } = Internals;
+var DEFAULT_SCALE = 0.1;
+var DEFAULT_CROP = 0;
+var DEFAULT_GAP = 0;
+var DEFAULT_OFFSET = 0;
+var DEFAULT_OFFSET_EVERY = 0;
+var DEFAULT_ORIGIN = [0, 0];
+var DEFAULT_WRAP = true;
+var patternSchema = {
+  scale: {
+    type: "number",
+    min: 0.001,
+    max: 2,
+    step: 0.01,
+    default: DEFAULT_SCALE,
+    description: "Scale",
+    hiddenFromList: false
+  },
+  cropLeft: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop left",
+    hiddenFromList: false
+  },
+  cropTop: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop top",
+    hiddenFromList: false
+  },
+  cropRight: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop right",
+    hiddenFromList: false
+  },
+  cropBottom: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_CROP,
+    description: "Crop bottom",
+    hiddenFromList: false
+  },
+  gapX: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_GAP,
+    description: "Gap X",
+    hiddenFromList: false
+  },
+  gapY: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_GAP,
+    description: "Gap Y",
+    hiddenFromList: false
+  },
+  offsetU: {
+    type: "number",
+    step: 0.01,
+    default: DEFAULT_OFFSET,
+    description: "Offset U",
+    hiddenFromList: false
+  },
+  offsetV: {
+    type: "number",
+    step: 0.01,
+    default: DEFAULT_OFFSET,
+    description: "Offset V",
+    hiddenFromList: false
+  },
+  rowOffset: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_OFFSET,
+    description: "Row offset",
+    hiddenFromList: false
+  },
+  rowOffsetEvery: {
+    type: "number",
+    min: 0,
+    step: 1,
+    default: DEFAULT_OFFSET_EVERY,
+    description: "Row offset every",
+    hiddenFromList: false
+  },
+  columnOffset: {
+    type: "number",
+    step: 1,
+    default: DEFAULT_OFFSET,
+    description: "Column offset",
+    hiddenFromList: false
+  },
+  columnOffsetEvery: {
+    type: "number",
+    min: 0,
+    step: 1,
+    default: DEFAULT_OFFSET_EVERY,
+    description: "Column offset every",
+    hiddenFromList: false
+  },
+  origin: {
+    type: "uv-coordinate",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_ORIGIN,
+    description: "Origin"
+  },
+  wrap: {
+    type: "boolean",
+    default: DEFAULT_WRAP,
+    description: "Wrap"
+  }
+};
+var resolve = (p) => ({
+  scale: p.scale ?? DEFAULT_SCALE,
+  cropLeft: p.cropLeft ?? DEFAULT_CROP,
+  cropTop: p.cropTop ?? DEFAULT_CROP,
+  cropRight: p.cropRight ?? DEFAULT_CROP,
+  cropBottom: p.cropBottom ?? DEFAULT_CROP,
+  gapX: p.gapX ?? DEFAULT_GAP,
+  gapY: p.gapY ?? DEFAULT_GAP,
+  offsetU: p.offsetU ?? DEFAULT_OFFSET,
+  offsetV: p.offsetV ?? DEFAULT_OFFSET,
+  rowOffset: p.rowOffset ?? DEFAULT_OFFSET,
+  rowOffsetEvery: p.rowOffsetEvery ?? DEFAULT_OFFSET_EVERY,
+  columnOffset: p.columnOffset ?? DEFAULT_OFFSET,
+  columnOffsetEvery: p.columnOffsetEvery ?? DEFAULT_OFFSET_EVERY,
+  origin: [...p.origin ?? DEFAULT_ORIGIN],
+  wrap: p.wrap ?? DEFAULT_WRAP
+});
+var assertOptionalUvCoordinate = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (!Array.isArray(value) || value.length !== 2 || value.some((item) => typeof item !== "number" || !Number.isFinite(item))) {
+    throw new TypeError(`"${name}" must be a [number, number] tuple`);
+  }
+};
+var assertOptionalInteger = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (!Number.isInteger(value)) {
+    throw new TypeError(`"${name}" must be an integer, but got ${JSON.stringify(value)}`);
+  }
+};
+var validatePositive = (value, name) => {
+  if (value <= 0) {
+    throw new TypeError(`"${name}" must be > 0`);
+  }
+};
+var validateAtLeast = (value, min, name) => {
+  if (value < min) {
+    throw new TypeError(`"${name}" must be >= ${min}, but got ${JSON.stringify(value)}`);
+  }
+};
+var validatePatternParams = (params) => {
+  assertEffectParamsObject(params, "Pattern");
+  assertOptionalFiniteNumber(params.scale, "scale");
+  assertOptionalFiniteNumber(params.cropLeft, "cropLeft");
+  assertOptionalFiniteNumber(params.cropTop, "cropTop");
+  assertOptionalFiniteNumber(params.cropRight, "cropRight");
+  assertOptionalFiniteNumber(params.cropBottom, "cropBottom");
+  assertOptionalFiniteNumber(params.gapX, "gapX");
+  assertOptionalFiniteNumber(params.gapY, "gapY");
+  assertOptionalFiniteNumber(params.offsetU, "offsetU");
+  assertOptionalFiniteNumber(params.offsetV, "offsetV");
+  assertOptionalFiniteNumber(params.rowOffset, "rowOffset");
+  assertOptionalFiniteNumber(params.rowOffsetEvery, "rowOffsetEvery");
+  assertOptionalFiniteNumber(params.columnOffset, "columnOffset");
+  assertOptionalFiniteNumber(params.columnOffsetEvery, "columnOffsetEvery");
+  assertOptionalUvCoordinate(params.origin, "origin");
+  assertOptionalBoolean(params.wrap, "wrap");
+  assertOptionalInteger(params.rowOffsetEvery, "rowOffsetEvery");
+  assertOptionalInteger(params.columnOffsetEvery, "columnOffsetEvery");
+  const r = resolve(params);
+  validatePositive(r.scale, "scale");
+  validateAtLeast(r.rowOffsetEvery, 0, "rowOffsetEvery");
+  validateAtLeast(r.columnOffsetEvery, 0, "columnOffsetEvery");
+  validateUnitInterval(r.origin[0], "origin[0]");
+  validateUnitInterval(r.origin[1], "origin[1]");
+};
+var PATTERN_VS = `#version 300 es
+in vec2 aPos;
+in vec2 aUv;
+out vec2 vUv;
+
+void main() {
+	vUv = aUv;
+	gl_Position = vec4(aPos, 0.0, 1.0);
+}
+`;
+var PATTERN_FS = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform vec2 uResolution;
+uniform float uScale;
+uniform vec4 uCrop;
+uniform vec2 uGap;
+uniform vec2 uOffset;
+uniform vec2 uRowOffset;
+uniform vec2 uColumnOffset;
+uniform vec2 uOrigin;
+uniform bool uWrap;
+
+float positiveModulo(float value, float modulo) {
+	return mod(mod(value, modulo) + modulo, modulo);
+}
+
+float getPhase(float index, float every) {
+	if (every == 0.0) {
+		return index;
+	}
+
+	return positiveModulo(index, every);
+}
+
+bool sampleCell(vec2 cell, vec2 fragPx, vec2 cropStart, vec2 tileSize, vec2 pitch, vec2 originPx, out vec4 color) {
+	if (!uWrap && (cell.x < 0.0 || cell.y < 0.0)) {
+		return false;
+	}
+
+	float rowPhase = getPhase(cell.y, uRowOffset.y);
+	float columnPhase = getPhase(cell.x, uColumnOffset.y);
+	vec2 stagger = vec2(rowPhase * uRowOffset.x, columnPhase * uColumnOffset.x);
+	vec2 localPx = fragPx - originPx - stagger - cell * pitch;
+
+	if (localPx.x < 0.0 || localPx.y < 0.0 || localPx.x >= tileSize.x || localPx.y >= tileSize.y) {
+		return false;
+	}
+
+	vec2 sourcePx = cropStart + localPx / uScale;
+	vec2 sourceUv = vec2(sourcePx.x / uResolution.x, 1.0 - sourcePx.y / uResolution.y);
+
+	if (sourceUv.x < 0.0 || sourceUv.y < 0.0 || sourceUv.x > 1.0 || sourceUv.y > 1.0) {
+		return false;
+	}
+
+	color = texture(uSource, sourceUv);
+	return true;
+}
+
+void main() {
+	vec2 cropStart = uCrop.xy;
+	vec2 cropEnd = uResolution - uCrop.zw;
+	vec2 cropSize = max(cropEnd - cropStart, vec2(0.001));
+	vec2 tileSize = max(cropSize * uScale, vec2(0.001));
+	vec2 pitch = max(tileSize + uGap, vec2(0.001));
+	vec2 patternUv = vec2(vUv.x, 1.0 - vUv.y);
+	vec2 originPx = (uOrigin + uOffset) * uResolution;
+	vec2 fragPx = patternUv * uResolution;
+
+	vec2 gridPx = fragPx - originPx;
+	vec2 cell = floor(gridPx / pitch);
+
+	for (int i = 0; i < 4; i++) {
+		float rowPhase = getPhase(cell.y, uRowOffset.y);
+		float columnPhase = getPhase(cell.x, uColumnOffset.y);
+		vec2 stagger = vec2(rowPhase * uRowOffset.x, columnPhase * uColumnOffset.x);
+		vec2 adjustedGridPx = fragPx - originPx - stagger;
+		vec2 nextCell = floor(adjustedGridPx / pitch);
+
+		if (all(equal(nextCell, cell))) {
+			break;
+		}
+
+		cell = nextCell;
+	}
+
+	vec4 color = vec4(0.0);
+	for (int y = -4; y <= 4; y++) {
+		for (int x = -4; x <= 4; x++) {
+			if (sampleCell(cell + vec2(float(x), float(y)), fragPx, cropStart, tileSize, pitch, originPx, color)) {
+				fragColor = color;
+				return;
+			}
+		}
+	}
+
+	fragColor = vec4(0.0);
+}
+`;
+var compileShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error("Failed to create WebGL shader");
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Pattern shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var linkProgram = (gl, vs, fs) => {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Pattern program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var pattern = createEffect({
+  type: "remotion/pattern",
+  label: "pattern()",
+  documentationLink: "https://www.remotion.dev/docs/effects/pattern",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `pattern-${r.scale}-${r.cropLeft}-${r.cropTop}-${r.cropRight}-${r.cropBottom}-${r.gapX}-${r.gapY}-${r.offsetU}-${r.offsetV}-${r.rowOffset}-${r.rowOffsetEvery}-${r.columnOffset}-${r.columnOffsetEvery}-${r.origin[0]}-${r.origin[1]}-${r.wrap ? 1 : 0}`;
+  },
+  setup: (target) => {
+    const gl = target.getContext("webgl2", {
+      premultipliedAlpha: true,
+      alpha: true,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) {
+      throw createWebGL2ContextError("pattern effect");
+    }
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    const vs = compileShader(gl, gl.VERTEX_SHADER, PATTERN_VS);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, PATTERN_FS);
+    const program = linkProgram(gl, vs, fs);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    const vao = gl.createVertexArray();
+    if (!vao) {
+      throw new Error("Failed to create WebGL vertex array");
+    }
+    gl.bindVertexArray(vao);
+    const data = new Float32Array([
+      -1,
+      -1,
+      0,
+      0,
+      1,
+      -1,
+      1,
+      0,
+      -1,
+      1,
+      0,
+      1,
+      1,
+      1,
+      1,
+      1
+    ]);
+    const vbo = gl.createBuffer();
+    if (!vbo) {
+      throw new Error("Failed to create WebGL buffer");
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(program, "aPos");
+    const aUv = gl.getAttribLocation(program, "aUv");
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(aUv);
+    gl.vertexAttribPointer(aUv, 2, gl.FLOAT, false, 16, 8);
+    gl.bindVertexArray(null);
+    const texture = gl.createTexture();
+    if (!texture) {
+      throw new Error("Failed to create WebGL texture");
+    }
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return {
+      gl,
+      program,
+      vao,
+      vbo,
+      texture,
+      uniforms: {
+        uSource: gl.getUniformLocation(program, "uSource"),
+        uResolution: gl.getUniformLocation(program, "uResolution"),
+        uScale: gl.getUniformLocation(program, "uScale"),
+        uCrop: gl.getUniformLocation(program, "uCrop"),
+        uGap: gl.getUniformLocation(program, "uGap"),
+        uOffset: gl.getUniformLocation(program, "uOffset"),
+        uRowOffset: gl.getUniformLocation(program, "uRowOffset"),
+        uColumnOffset: gl.getUniformLocation(program, "uColumnOffset"),
+        uOrigin: gl.getUniformLocation(program, "uOrigin"),
+        uWrap: gl.getUniformLocation(program, "uWrap")
+      }
+    };
+  },
+  apply: ({ source, width, height, params, state, flipSourceY }) => {
+    const r = resolve(params);
+    const { gl, program, vao, texture, uniforms } = state;
+    gl.viewport(0, 0, width, height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.bindVertexArray(vao);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    if (uniforms.uSource)
+      gl.uniform1i(uniforms.uSource, 0);
+    if (uniforms.uResolution)
+      gl.uniform2f(uniforms.uResolution, width, height);
+    if (uniforms.uScale)
+      gl.uniform1f(uniforms.uScale, r.scale);
+    if (uniforms.uCrop)
+      gl.uniform4f(uniforms.uCrop, r.cropLeft, r.cropTop, r.cropRight, r.cropBottom);
+    if (uniforms.uGap)
+      gl.uniform2f(uniforms.uGap, r.gapX, r.gapY);
+    if (uniforms.uOffset)
+      gl.uniform2f(uniforms.uOffset, r.offsetU, r.offsetV);
+    if (uniforms.uRowOffset)
+      gl.uniform2f(uniforms.uRowOffset, r.rowOffset, r.rowOffsetEvery);
+    if (uniforms.uColumnOffset)
+      gl.uniform2f(uniforms.uColumnOffset, r.columnOffset, r.columnOffsetEvery);
+    if (uniforms.uOrigin)
+      gl.uniform2f(uniforms.uOrigin, r.origin[0], r.origin[1]);
+    if (uniforms.uWrap)
+      gl.uniform1i(uniforms.uWrap, r.wrap ? 1 : 0);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, texture }) => {
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+    gl.deleteTexture(texture);
+  },
+  schema: patternSchema,
+  validateParams: validatePatternParams
+});
+
+// src/rings.ts
+import { Internals as Internals2 } from "remotion";
+
+// src/uv-coordinate.ts
+var publicUvToShaderUv = (uv) => {
+  return [uv[0], 1 - uv[1]];
+};
+
+// src/rings.ts
+var { createEffect: createEffect2, createWebGL2ContextError: createWebGL2ContextError2 } = Internals2;
 var DEFAULT_COLORS = ["#dff4ff", "#7cc6ff"];
 var DEFAULT_CENTER = [0.5, 0.5];
 var DEFAULT_THICKNESS = 40;
-var DEFAULT_GAP = 0;
-var DEFAULT_OFFSET = 0;
+var DEFAULT_GAP2 = 0;
+var DEFAULT_OFFSET2 = 0;
 var DEFAULT_MASK_TO_SOURCE_ALPHA = false;
 var ringsSchema = {
   colors: {
@@ -148,14 +614,14 @@ var ringsSchema = {
     min: 0,
     max: 400,
     step: 0.1,
-    default: DEFAULT_GAP,
+    default: DEFAULT_GAP2,
     description: "Gap",
     hiddenFromList: false
   },
   offset: {
     type: "number",
     step: 0.1,
-    default: DEFAULT_OFFSET,
+    default: DEFAULT_OFFSET2,
     description: "Offset",
     hiddenFromList: false
   },
@@ -165,19 +631,19 @@ var ringsSchema = {
     description: "Mask to source alpha"
   }
 };
-var resolve = (p) => {
+var resolve2 = (p) => {
   const thickness = p.thickness ?? DEFAULT_THICKNESS;
-  const gap = p.gap ?? DEFAULT_GAP;
+  const gap = p.gap ?? DEFAULT_GAP2;
   return {
     colors: p.colors ?? DEFAULT_COLORS,
     center: [...p.center ?? DEFAULT_CENTER],
     thickness,
     spacing: thickness + gap,
-    offset: p.offset ?? DEFAULT_OFFSET,
+    offset: p.offset ?? DEFAULT_OFFSET2,
     maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA
   };
 };
-var validatePositive = (value, name) => {
+var validatePositive2 = (value, name) => {
   if (value <= 0) {
     throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
   }
@@ -217,8 +683,8 @@ var validateRingsParams = (params) => {
   assertOptionalFiniteNumber(params.offset, "offset");
   assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
   const thickness = params.thickness ?? DEFAULT_THICKNESS;
-  const gap = params.gap ?? DEFAULT_GAP;
-  validatePositive(thickness, "thickness");
+  const gap = params.gap ?? DEFAULT_GAP2;
+  validatePositive2(thickness, "thickness");
   validateNonNegative2(gap, "gap");
 };
 var RINGS_VS = `#version 300 es
@@ -286,7 +752,7 @@ void main() {
 	);
 }
 `;
-var compileShader = (gl, type, source) => {
+var compileShader2 = (gl, type, source) => {
   const shader = gl.createShader(type);
   if (!shader) {
     throw new Error("Failed to create WebGL shader");
@@ -300,7 +766,7 @@ var compileShader = (gl, type, source) => {
   }
   return shader;
 };
-var linkProgram = (gl, vs, fs) => {
+var linkProgram2 = (gl, vs, fs) => {
   const program = gl.createProgram();
   if (!program) {
     throw new Error("Failed to create WebGL program");
@@ -316,9 +782,9 @@ var linkProgram = (gl, vs, fs) => {
   return program;
 };
 var createProgram = (gl, vertexSource, fragmentSource) => {
-  const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
-  const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
-  const program = linkProgram(gl, vs, fs);
+  const vs = compileShader2(gl, gl.VERTEX_SHADER, vertexSource);
+  const fs = compileShader2(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  const program = linkProgram2(gl, vs, fs);
   gl.deleteShader(vs);
   gl.deleteShader(fs);
   return program;
@@ -343,7 +809,7 @@ var setupRings = (target) => {
     preserveDrawingBuffer: true
   });
   if (!gl) {
-    throw createWebGL2ContextError("rings effect");
+    throw createWebGL2ContextError2("rings effect");
   }
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
   const program = createProgram(gl, RINGS_VS, RINGS_FS);
@@ -434,19 +900,19 @@ var updatePalette = (state, colors) => {
   }
   return true;
 };
-var rings = createEffect({
+var rings = createEffect2({
   type: "remotion/rings",
   label: "rings()",
   documentationLink: "https://www.remotion.dev/docs/effects/rings",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve(params);
+    const r = resolve2(params);
     const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
     return `rings-${r.colors.join("|")}-${r.center.join(":")}-${r.thickness}-${r.spacing}-${r.offset}${maskSuffix}`;
   },
   setup: (target) => setupRings(target),
   apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve(params);
+    const r = resolve2(params);
     const paletteDirty = updatePalette(state, r.colors);
     const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
     gl.viewport(0, 0, width, height);
@@ -475,8 +941,10 @@ var rings = createEffect({
       gl.uniform2f(uniforms.uResolution, width, height);
     if (uniforms.uNumColors)
       gl.uniform1f(uniforms.uNumColors, r.colors.length);
-    if (uniforms.uCenter)
-      gl.uniform2f(uniforms.uCenter, r.center[0], r.center[1]);
+    if (uniforms.uCenter) {
+      const shaderCenter = publicUvToShaderUv(r.center);
+      gl.uniform2f(uniforms.uCenter, shaderCenter[0], shaderCenter[1]);
+    }
     if (uniforms.uThickness)
       gl.uniform1f(uniforms.uThickness, r.thickness);
     if (uniforms.uSpacing)
@@ -503,15 +971,15 @@ var rings = createEffect({
 });
 
 // src/zigzag.ts
-import { Internals as Internals2 } from "remotion";
-var { createEffect: createEffect2, createWebGL2ContextError: createWebGL2ContextError2 } = Internals2;
+import { Internals as Internals3 } from "remotion";
+var { createEffect: createEffect3, createWebGL2ContextError: createWebGL2ContextError3 } = Internals3;
 var ZIGZAG_DIRECTIONS = ["horizontal", "vertical"];
 var DEFAULT_COLORS2 = ["#dff4ff", "#7cc6ff"];
 var DEFAULT_DIRECTION = "horizontal";
 var DEFAULT_THICKNESS2 = 40;
-var DEFAULT_GAP2 = 0;
+var DEFAULT_GAP3 = 0;
 var DEFAULT_ANGLE = 0;
-var DEFAULT_OFFSET2 = 0;
+var DEFAULT_OFFSET3 = 0;
 var DEFAULT_AMPLITUDE = 40;
 var DEFAULT_WAVELENGTH = 160;
 var DEFAULT_MASK_TO_SOURCE_ALPHA2 = false;
@@ -550,7 +1018,7 @@ var zigzagSchema = {
     min: 0,
     max: 400,
     step: 0.1,
-    default: DEFAULT_GAP2,
+    default: DEFAULT_GAP3,
     description: "Gap",
     hiddenFromList: false
   },
@@ -563,7 +1031,7 @@ var zigzagSchema = {
   offset: {
     type: "number",
     step: 0.1,
-    default: DEFAULT_OFFSET2,
+    default: DEFAULT_OFFSET3,
     description: "Offset",
     hiddenFromList: false
   },
@@ -591,16 +1059,16 @@ var zigzagSchema = {
     description: "Mask to source alpha"
   }
 };
-var resolve2 = (p) => {
+var resolve3 = (p) => {
   const thickness = p.thickness ?? DEFAULT_THICKNESS2;
-  const gap = p.gap ?? DEFAULT_GAP2;
+  const gap = p.gap ?? DEFAULT_GAP3;
   return {
     colors: p.colors ?? DEFAULT_COLORS2,
     direction: p.direction ?? DEFAULT_DIRECTION,
     thickness,
     spacing: thickness + gap,
     angle: p.angle ?? DEFAULT_ANGLE,
-    offset: p.offset ?? DEFAULT_OFFSET2,
+    offset: p.offset ?? DEFAULT_OFFSET3,
     amplitude: p.amplitude ?? DEFAULT_AMPLITUDE,
     wavelength: p.wavelength ?? DEFAULT_WAVELENGTH,
     maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA2
@@ -612,7 +1080,7 @@ var formatEnum = (variants) => {
   }
   return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
 };
-var validatePositive2 = (value, name) => {
+var validatePositive3 = (value, name) => {
   if (value <= 0) {
     throw new TypeError(`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`);
   }
@@ -653,13 +1121,13 @@ var validateZigzagParams = (params) => {
   assertOptionalFiniteNumber(params.wavelength, "wavelength");
   assertOptionalBoolean(params.maskToSourceAlpha, "maskToSourceAlpha");
   const thickness = params.thickness ?? DEFAULT_THICKNESS2;
-  const gap = params.gap ?? DEFAULT_GAP2;
+  const gap = params.gap ?? DEFAULT_GAP3;
   const amplitude = params.amplitude ?? DEFAULT_AMPLITUDE;
   const wavelength = params.wavelength ?? DEFAULT_WAVELENGTH;
-  validatePositive2(thickness, "thickness");
+  validatePositive3(thickness, "thickness");
   validateNonNegative3(gap, "gap");
   validateNonNegative3(amplitude, "amplitude");
-  validatePositive2(wavelength, "wavelength");
+  validatePositive3(wavelength, "wavelength");
 };
 var ZIGZAG_VS = `#version 300 es
 in vec2 aPos;
@@ -737,7 +1205,7 @@ void main() {
 	);
 }
 `;
-var compileShader2 = (gl, type, source) => {
+var compileShader3 = (gl, type, source) => {
   const shader = gl.createShader(type);
   if (!shader) {
     throw new Error("Failed to create WebGL shader");
@@ -751,7 +1219,7 @@ var compileShader2 = (gl, type, source) => {
   }
   return shader;
 };
-var linkProgram2 = (gl, vs, fs) => {
+var linkProgram3 = (gl, vs, fs) => {
   const program = gl.createProgram();
   if (!program) {
     throw new Error("Failed to create WebGL program");
@@ -767,9 +1235,9 @@ var linkProgram2 = (gl, vs, fs) => {
   return program;
 };
 var createProgram2 = (gl, vertexSource, fragmentSource) => {
-  const vs = compileShader2(gl, gl.VERTEX_SHADER, vertexSource);
-  const fs = compileShader2(gl, gl.FRAGMENT_SHADER, fragmentSource);
-  const program = linkProgram2(gl, vs, fs);
+  const vs = compileShader3(gl, gl.VERTEX_SHADER, vertexSource);
+  const fs = compileShader3(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  const program = linkProgram3(gl, vs, fs);
   gl.deleteShader(vs);
   gl.deleteShader(fs);
   return program;
@@ -794,7 +1262,7 @@ var setupZigzag = (target) => {
     preserveDrawingBuffer: true
   });
   if (!gl) {
-    throw createWebGL2ContextError2("zigzag effect");
+    throw createWebGL2ContextError3("zigzag effect");
   }
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
   const program = createProgram2(gl, ZIGZAG_VS, ZIGZAG_FS);
@@ -888,19 +1356,19 @@ var updatePalette2 = (state, colors) => {
   }
   return true;
 };
-var zigzag = createEffect2({
+var zigzag = createEffect3({
   type: "remotion/zigzag",
   label: "zigzag()",
   documentationLink: "https://www.remotion.dev/docs/effects/zigzag",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve2(params);
+    const r = resolve3(params);
     const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
     return `zigzag-${r.colors.join("|")}-${r.direction}-${r.thickness}-${r.spacing}-${r.angle}-${r.offset}-${r.amplitude}-${r.wavelength}${maskSuffix}`;
   },
   setup: (target) => setupZigzag(target),
   apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve2(params);
+    const r = resolve3(params);
     const paletteDirty = updatePalette2(state, r.colors);
     const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
     gl.viewport(0, 0, width, height);
@@ -970,5 +1438,6 @@ var zigzag = createEffect2({
 });
 export {
   zigzag,
-  rings
+  rings,
+  pattern
 };