@remotion/effects 4.0.511 → 4.0.513

package/dist/esm/index.mjs

@@ -970,8 +970,159 @@ var pattern = createEffect2({
   validateParams: validatePatternParams
 });
 
-// src/rings.ts
+// src/tile.ts
 import { Internals as Internals3 } from "remotion";
+var { createEffect: createEffect3 } = Internals3;
+var DEFAULT_HORIZONTAL = true;
+var DEFAULT_VERTICAL = true;
+var tileSchema = {
+  horizontal: {
+    type: "boolean",
+    default: DEFAULT_HORIZONTAL,
+    description: "Horizontal"
+  },
+  vertical: {
+    type: "boolean",
+    default: DEFAULT_VERTICAL,
+    description: "Vertical"
+  }
+};
+var resolve3 = (params) => ({
+  horizontal: params.horizontal ?? DEFAULT_HORIZONTAL,
+  vertical: params.vertical ?? DEFAULT_VERTICAL
+});
+var validateTileParams = (params) => {
+  assertEffectParamsObject(params, "Tile");
+  assertOptionalBoolean(params.horizontal, "horizontal");
+  assertOptionalBoolean(params.vertical, "vertical");
+};
+var tile = createEffect3({
+  type: "dev.remotion.effects.tile",
+  label: "tile()",
+  documentationLink: "https://www.remotion.dev/docs/effects/tile",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolve3(params);
+    return `tile-${r.horizontal}-${r.vertical}`;
+  },
+  setup: (target) => {
+    const boundsCanvas = target.ownerDocument.createElement("canvas");
+    const boundsContext = boundsCanvas.getContext("2d", {
+      colorSpace: "srgb",
+      willReadFrequently: true
+    });
+    if (!boundsContext) {
+      throw new Error("Failed to acquire 2D context for tile effect.");
+    }
+    const tileCanvas = target.ownerDocument.createElement("canvas");
+    const tileContext = tileCanvas.getContext("2d");
+    if (!tileContext) {
+      throw new Error("Failed to acquire 2D context for tile effect.");
+    }
+    return { boundsCanvas, boundsContext, tileCanvas, tileContext };
+  },
+  apply: ({ source, target, width, height, params, state }) => {
+    const context = target.getContext("2d");
+    if (!context) {
+      throw new Error("Failed to acquire 2D context for tile effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve3(params);
+    context.clearRect(0, 0, width, height);
+    if (!r.horizontal && !r.vertical) {
+      context.drawImage(source, 0, 0, width, height);
+      return;
+    }
+    if (state.boundsCanvas.width !== width || state.boundsCanvas.height !== height) {
+      state.boundsCanvas.width = width;
+      state.boundsCanvas.height = height;
+    }
+    state.boundsContext.clearRect(0, 0, width, height);
+    state.boundsContext.drawImage(source, 0, 0, width, height);
+    const pixels = state.boundsContext.getImageData(0, 0, width, height).data;
+    const rowMaximumAlpha = (y) => {
+      let maximumAlpha = 0;
+      for (let x = 0;x < width; x++) {
+        maximumAlpha = Math.max(maximumAlpha, pixels[(y * width + x) * 4 + 3]);
+      }
+      return maximumAlpha;
+    };
+    const columnMaximumAlpha = (x, visibleTop, visibleBottom) => {
+      let maximumAlpha = 0;
+      for (let y = visibleTop;y <= visibleBottom; y++) {
+        maximumAlpha = Math.max(maximumAlpha, pixels[(y * width + x) * 4 + 3]);
+      }
+      return maximumAlpha;
+    };
+    let top = 0;
+    while (top < height && rowMaximumAlpha(top) === 0) {
+      top++;
+    }
+    if (top === height) {
+      context.clearRect(0, 0, width, height);
+      return;
+    }
+    let bottom = height - 1;
+    while (bottom > top && rowMaximumAlpha(bottom) === 0) {
+      bottom--;
+    }
+    let left = 0;
+    while (left < width && columnMaximumAlpha(left, top, bottom) === 0) {
+      left++;
+    }
+    let right = width - 1;
+    while (right > left && columnMaximumAlpha(right, top, bottom) === 0) {
+      right--;
+    }
+    if (r.vertical && top < bottom) {
+      if (rowMaximumAlpha(top) < rowMaximumAlpha(top + 1)) {
+        top++;
+      }
+      if (rowMaximumAlpha(bottom) < rowMaximumAlpha(bottom - 1)) {
+        bottom--;
+      }
+    }
+    if (r.horizontal && left < right) {
+      if (columnMaximumAlpha(left, top, bottom) < columnMaximumAlpha(left + 1, top, bottom)) {
+        left++;
+      }
+      if (columnMaximumAlpha(right, top, bottom) < columnMaximumAlpha(right - 1, top, bottom)) {
+        right--;
+      }
+    }
+    const tileWidth = right - left + 1;
+    const tileHeight = bottom - top + 1;
+    state.tileCanvas.width = tileWidth;
+    state.tileCanvas.height = tileHeight;
+    state.tileContext.clearRect(0, 0, tileWidth, tileHeight);
+    state.tileContext.drawImage(source, left, top, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight);
+    context.clearRect(0, 0, width, height);
+    const startX = r.horizontal ? left - Math.ceil(left / tileWidth) * tileWidth : left;
+    const startY = r.vertical ? top - Math.ceil(top / tileHeight) * tileHeight : top;
+    const endX = r.horizontal ? width : left + tileWidth;
+    const endY = r.vertical ? height : top + tileHeight;
+    for (let y = startY;y < endY; y += tileHeight) {
+      const tileY = Math.round((y - top) / tileHeight);
+      const mirrorY = r.vertical && Math.abs(tileY) % 2 === 1;
+      for (let x = startX;x < endX; x += tileWidth) {
+        const tileX = Math.round((x - left) / tileWidth);
+        const mirrorX = r.horizontal && Math.abs(tileX) % 2 === 1;
+        context.save();
+        context.translate(mirrorX ? x + tileWidth : x, mirrorY ? y + tileHeight : y);
+        context.scale(mirrorX ? -1 : 1, mirrorY ? -1 : 1);
+        context.drawImage(state.tileCanvas, 0, 0);
+        context.restore();
+      }
+    }
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: tileSchema,
+  validateParams: validateTileParams
+});
+
+// src/rings.ts
+import { Internals as Internals4 } from "remotion";
 
 // src/uv-coordinate.ts
 var publicUvToShaderUv = (uv) => {
@@ -979,7 +1130,7 @@ var publicUvToShaderUv = (uv) => {
 };
 
 // src/rings.ts
-var { createEffect: createEffect3, createWebGL2ContextError: createWebGL2ContextError3 } = Internals3;
+var { createEffect: createEffect4, createWebGL2ContextError: createWebGL2ContextError3 } = Internals4;
 var DEFAULT_COLORS2 = ["#dff4ff", "#7cc6ff"];
 var DEFAULT_CENTER = [0.5, 0.5];
 var DEFAULT_THICKNESS = 40;
@@ -1037,7 +1188,7 @@ var ringsSchema = {
     description: "Mask to source alpha"
   }
 };
-var resolve3 = (p) => {
+var resolve4 = (p) => {
   const thickness = p.thickness ?? DEFAULT_THICKNESS;
   const gap = p.gap ?? DEFAULT_GAP3;
   return {
@@ -1306,19 +1457,19 @@ var updatePalette2 = (state, colors) => {
   }
   return true;
 };
-var rings = createEffect3({
+var rings = createEffect4({
   type: "dev.remotion.effects.rings",
   label: "rings()",
   documentationLink: "https://www.remotion.dev/docs/effects/rings",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve3(params);
+    const r = resolve4(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 = resolve3(params);
+    const r = resolve4(params);
     const paletteDirty = updatePalette2(state, r.colors);
     const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
     gl.viewport(0, 0, width, height);
@@ -1377,9 +1528,9 @@ var rings = createEffect3({
 });
 
 // src/starburst.ts
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 import { NoReactInternals } from "remotion/no-react";
-var { createEffect: createEffect4, createWebGL2ContextError: createWebGL2ContextError4 } = Internals4;
+var { createEffect: createEffect5, createWebGL2ContextError: createWebGL2ContextError4 } = Internals5;
 var colorToRgb = (color) => {
   const packed = NoReactInternals.processColor(color);
   return [packed >>> 16 & 255, packed >>> 8 & 255, packed & 255];
@@ -1433,7 +1584,7 @@ var starburstEffectSchema = {
     description: "Origin"
   }
 };
-var resolve4 = (p) => ({
+var resolve5 = (p) => ({
   rays: p.rays,
   colors: p.colors,
   rotation: p.rotation ?? 0,
@@ -1454,7 +1605,7 @@ var validateStarburstEffectParams = (params) => {
   if (!Array.isArray(colors) || colors.length < 2) {
     throw new TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`);
   }
-  const r = resolve4(params);
+  const r = resolve5(params);
   if (typeof r.rotation !== "number" || !Number.isFinite(r.rotation)) {
     throw new TypeError(`"rotation" must be a finite number, but got ${JSON.stringify(params.rotation)}`);
   }
@@ -1561,13 +1712,13 @@ var linkProgram4 = (gl, vs, fs) => {
   }
   return program;
 };
-var starburst = createEffect4({
+var starburst = createEffect5({
   type: "remotion/starburst",
   label: "starburst()",
   documentationLink: "https://www.remotion.dev/docs/effects/starburst",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve4(params);
+    const r = resolve5(params);
     return `starburst-${r.rays}-${r.colors.join("|")}-${r.rotation}-${r.smoothness}-${r.origin.join(":")}`;
   },
   setup: (target) => {
@@ -1649,7 +1800,7 @@ var starburst = createEffect4({
     };
   },
   apply: ({ width, height, params, state }) => {
-    const r = resolve4(params);
+    const r = resolve5(params);
     const {
       gl,
       program,
@@ -1721,8 +1872,8 @@ var starburst = createEffect4({
 });
 
 // src/light-leak.ts
-import { Internals as Internals5 } from "remotion";
-var { createEffect: createEffect5, createWebGL2ContextError: createWebGL2ContextError5 } = Internals5;
+import { Internals as Internals6 } from "remotion";
+var { createEffect: createEffect6, createWebGL2ContextError: createWebGL2ContextError5 } = Internals6;
 var DEFAULT_SEED = 0;
 var DEFAULT_HUE_SHIFT = 0;
 var DEFAULT_PROGRESS = 0.5;
@@ -1751,7 +1902,7 @@ var lightLeakEffectSchema = {
     hiddenFromList: false
   }
 };
-var resolve5 = (p) => ({
+var resolve6 = (p) => ({
   seed: p.seed ?? DEFAULT_SEED,
   hueShift: p.hueShift ?? DEFAULT_HUE_SHIFT,
   progress: p.progress ?? DEFAULT_PROGRESS
@@ -1761,7 +1912,7 @@ var validateLightLeakParams = (params) => {
   assertOptionalFiniteNumber(params.seed, "seed");
   assertOptionalFiniteNumber(params.hueShift, "hueShift");
   assertOptionalFiniteNumber(params.progress, "progress");
-  const { hueShift, progress } = resolve5(params);
+  const { hueShift, progress } = resolve6(params);
   if (hueShift < 0) {
     throw new TypeError(`"hueShift" must be >= 0, but got ${hueShift}`);
   }
@@ -1888,13 +2039,13 @@ var linkProgram5 = (gl, vs, fs) => {
   }
   return program;
 };
-var lightLeak = createEffect5({
+var lightLeak = createEffect6({
   type: "remotion/light-leak",
   label: "lightLeak()",
   documentationLink: "https://www.remotion.dev/docs/effects/light-leak",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve5(params);
+    const r = resolve6(params);
     return `light-leak-${r.seed}-${r.hueShift}-${r.progress}`;
   },
   setup: (target) => {
@@ -1972,7 +2123,7 @@ var lightLeak = createEffect5({
     };
   },
   apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve5(params);
+    const r = resolve6(params);
     const evolveProgress = Math.min(1, r.progress * 2);
     const retractProgress = Math.max(0, r.progress * 2 - 1);
     const {
@@ -2029,8 +2180,8 @@ var lightLeak = createEffect5({
 });
 
 // src/gridlines.ts
-import { Internals as Internals6 } from "remotion";
-var { createEffect: createEffect6, createWebGL2ContextError: createWebGL2ContextError6 } = Internals6;
+import { Internals as Internals7 } from "remotion";
+var { createEffect: createEffect7, createWebGL2ContextError: createWebGL2ContextError6 } = Internals7;
 var DEFAULT_GRID_SIZE = 64;
 var DEFAULT_LINE_WIDTH = 2;
 var DEFAULT_LINE_COLOR = "#ffffff";
@@ -2128,7 +2279,7 @@ var gridlinesSchema = {
     description: "Mask to source alpha"
   }
 };
-var resolve6 = (p) => ({
+var resolve7 = (p) => ({
   gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
   lineWidth: p.lineWidth ?? DEFAULT_LINE_WIDTH,
   lineColor: p.lineColor ?? DEFAULT_LINE_COLOR,
@@ -2328,13 +2479,13 @@ var rgbaToUniform = (rgba) => {
   const alpha = a / 255;
   return [r / 255 * alpha, g / 255 * alpha, b / 255 * alpha, alpha];
 };
-var gridlines = createEffect6({
+var gridlines = createEffect7({
   type: "remotion/gridlines",
   label: "gridlines()",
   documentationLink: "https://www.remotion.dev/docs/effects/gridlines",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve6(params);
+    const r = resolve7(params);
     const maskSuffix = r.maskToSourceAlpha ? "-mask-to-source-alpha" : "";
     return `gridlines-${r.gridSize}-${r.lineWidth}-${r.lineColor}-${r.backgroundColor}-${r.rotation}-${r.rotationX}-${r.rotationY}-${r.perspective}-${r.offsetX}-${r.offsetY}${maskSuffix}`;
   },
@@ -2434,7 +2585,7 @@ var gridlines = createEffect6({
     };
   },
   apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve6(params);
+    const r = resolve7(params);
     const { gl, program, vao, texture, uniforms } = state;
     if (state.cachedLineColorStr !== r.lineColor) {
       state.cachedLineColorStr = r.lineColor;
@@ -2496,8 +2647,8 @@ var gridlines = createEffect6({
 });
 
 // src/zigzag.ts
-import { Internals as Internals7 } from "remotion";
-var { createEffect: createEffect7, createWebGL2ContextError: createWebGL2ContextError7 } = Internals7;
+import { Internals as Internals8 } from "remotion";
+var { createEffect: createEffect8, createWebGL2ContextError: createWebGL2ContextError7 } = Internals8;
 var ZIGZAG_DIRECTIONS = ["horizontal", "vertical"];
 var DEFAULT_COLORS3 = ["#dff4ff", "#7cc6ff"];
 var DEFAULT_DIRECTION = "horizontal";
@@ -2584,7 +2735,7 @@ var zigzagSchema = {
     description: "Mask to source alpha"
   }
 };
-var resolve7 = (p) => {
+var resolve8 = (p) => {
   const thickness = p.thickness ?? DEFAULT_THICKNESS2;
   const gap = p.gap ?? DEFAULT_GAP4;
   return {
@@ -2881,19 +3032,19 @@ var updatePalette3 = (state, colors) => {
   }
   return true;
 };
-var zigzag = createEffect7({
+var zigzag = createEffect8({
   type: "dev.remotion.effects.zigzag",
   label: "zigzag()",
   documentationLink: "https://www.remotion.dev/docs/effects/zigzag",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve7(params);
+    const r = resolve8(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 = resolve7(params);
+    const r = resolve8(params);
     const paletteDirty = updatePalette3(state, r.colors);
     const { gl, program, sourceTexture, paletteTexture, uniforms, vao } = state;
     gl.viewport(0, 0, width, height);
@@ -2963,8 +3114,8 @@ var zigzag = createEffect7({
 });
 
 // src/linear-gradient.ts
-import { Internals as Internals8 } from "remotion";
-var { createEffect: createEffect8, createWebGL2ContextError: createWebGL2ContextError8 } = Internals8;
+import { Internals as Internals9 } from "remotion";
+var { createEffect: createEffect9, createWebGL2ContextError: createWebGL2ContextError8 } = Internals9;
 var DEFAULT_START = [0, 0.5];
 var DEFAULT_END = [1, 0.5];
 var DEFAULT_START_COLOR = "#000000";
@@ -3001,7 +3152,7 @@ var linearGradientSchema = {
     description: "End color"
   }
 };
-var resolve8 = (p) => ({
+var resolve9 = (p) => ({
   start: [...p.start ?? DEFAULT_START],
   end: [...p.end ?? DEFAULT_END],
   startColor: p.startColor ?? DEFAULT_START_COLOR,
@@ -3180,18 +3331,18 @@ var getParsedColors = (state, resolved) => {
     end: state.cachedEndColorRgba
   };
 };
-var linearGradient = createEffect8({
+var linearGradient = createEffect9({
   type: "dev.remotion.effects.linearGradient",
   label: "linearGradient()",
   documentationLink: "https://www.remotion.dev/docs/effects/linear-gradient",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve8(params);
+    const r = resolve9(params);
     return `linear-gradient-${r.start.join(":")}-${r.end.join(":")}-${r.startColor}-${r.endColor}`;
   },
   setup: (target) => setupLinearGradient(target),
   apply: ({ width, height, params, state }) => {
-    const r = resolve8(params);
+    const r = resolve9(params);
     const { start, end } = getParsedColors(state, r);
     const [sr, sg, sb, sa] = normalizedRgba(start);
     const [er, eg, eb, ea] = normalizedRgba(end);
@@ -3226,8 +3377,8 @@ var linearGradient = createEffect8({
 });
 
 // src/linear-gradient-tint.ts
-import { Internals as Internals9 } from "remotion";
-var { createEffect: createEffect9, createWebGL2ContextError: createWebGL2ContextError9 } = Internals9;
+import { Internals as Internals10 } from "remotion";
+var { createEffect: createEffect10, createWebGL2ContextError: createWebGL2ContextError9 } = Internals10;
 var DEFAULT_START2 = [0, 0.5];
 var DEFAULT_END2 = [1, 0.5];
 var DEFAULT_START_COLOR2 = "#000000";
@@ -3274,7 +3425,7 @@ var linearGradientTintSchema = {
     hiddenFromList: false
   }
 };
-var resolve9 = (p) => ({
+var resolve10 = (p) => ({
   start: [...p.start ?? DEFAULT_START2],
   end: [...p.end ?? DEFAULT_END2],
   startColor: p.startColor ?? DEFAULT_START_COLOR2,
@@ -3296,7 +3447,7 @@ var validateLinearGradientTintParams = (params) => {
   assertOptionalColor(params.startColor, "startColor");
   assertOptionalColor(params.endColor, "endColor");
   assertOptionalFiniteNumber(params.amount, "amount");
-  validateUnitInterval(resolve9(params).amount, "amount");
+  validateUnitInterval(resolve10(params).amount, "amount");
 };
 var VERTEX_SHADER2 = `#version 300 es
 in vec2 aPos;
@@ -3487,18 +3638,18 @@ var getParsedColors2 = (state, resolved) => {
     end: state.cachedEndColorRgba
   };
 };
-var linearGradientTint = createEffect9({
+var linearGradientTint = createEffect10({
   type: "dev.remotion.effects.linearGradientTint",
   label: "linearGradientTint()",
   documentationLink: "https://www.remotion.dev/docs/effects/linear-gradient-tint",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve9(params);
+    const r = resolve10(params);
     return `linear-gradient-tint-${r.start.join(":")}-${r.end.join(":")}-${r.startColor}-${r.endColor}-${r.amount}`;
   },
   setup: (target) => setupLinearGradientTint(target),
   apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve9(params);
+    const r = resolve10(params);
     const { start, end } = getParsedColors2(state, r);
     const [sr, sg, sb, sa] = normalizedRgba2(start);
     const [er, eg, eb, ea] = normalizedRgba2(end);
@@ -3542,10 +3693,10 @@ var linearGradientTint = createEffect9({
   validateParams: validateLinearGradientTintParams
 });
 // src/corner-pin/index.ts
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/corner-pin/corner-pin-runtime.ts
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/corner-pin/corner-pin-shaders.ts
 var CORNER_PIN_VS = `#version 300 es
@@ -3643,7 +3794,7 @@ void main() {
 `;
 
 // src/corner-pin/corner-pin-runtime.ts
-var { createWebGL2ContextError: createWebGL2ContextError10 } = Internals10;
+var { createWebGL2ContextError: createWebGL2ContextError10 } = Internals11;
 var compileShader10 = (gl, type, source) => {
   const shader = gl.createShader(type);
   if (!shader) {
@@ -3810,7 +3961,7 @@ var applyCornerPin = ({
 };
 
 // src/corner-pin/index.ts
-var { createEffect: createEffect10 } = Internals11;
+var { createEffect: createEffect11 } = Internals12;
 var DEFAULT_TOP_LEFT = [0, 0];
 var DEFAULT_TOP_RIGHT = [1, 0];
 var DEFAULT_BOTTOM_RIGHT = [1, 1];
@@ -3841,7 +3992,7 @@ var cornerPinSchema = {
     description: "Bottom left"
   }
 };
-var resolve10 = (p) => ({
+var resolve11 = (p) => ({
   topLeft: [...p.topLeft ?? DEFAULT_TOP_LEFT],
   topRight: [...p.topRight ?? DEFAULT_TOP_RIGHT],
   bottomRight: [
@@ -3866,18 +4017,18 @@ var validateCornerPinParams = (params) => {
   assertOptionalUvCoordinate4(params.bottomRight, "bottomRight");
   assertOptionalUvCoordinate4(params.bottomLeft, "bottomLeft");
 };
-var cornerPin = createEffect10({
+var cornerPin = createEffect11({
   type: "dev.remotion.effects.cornerPin",
   label: "cornerPin()",
   documentationLink: "https://www.remotion.dev/docs/effects/corner-pin",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve10(params);
+    const r = resolve11(params);
     return `corner-pin-${r.topLeft.join(":")}-${r.topRight.join(":")}-${r.bottomRight.join(":")}-${r.bottomLeft.join(":")}`;
   },
   setup: (target) => setupCornerPin(target),
   apply: ({ source, width, height, params, state, flipSourceY }) => {
-    const r = resolve10(params);
+    const r = resolve11(params);
     applyCornerPin({
       state,
       source,
@@ -3896,6 +4047,7 @@ var cornerPin = createEffect10({
 });
 export {
   zigzag,
+  tile,
   starburstEffectSchema,
   starburst,
   rings,

package/dist/esm/tile.mjs

@@ -0,0 +1,186 @@
+// src/tile.ts
+import { Internals } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
+  }
+};
+
+// src/tile.ts
+var { createEffect } = Internals;
+var DEFAULT_HORIZONTAL = true;
+var DEFAULT_VERTICAL = true;
+var tileSchema = {
+  horizontal: {
+    type: "boolean",
+    default: DEFAULT_HORIZONTAL,
+    description: "Horizontal"
+  },
+  vertical: {
+    type: "boolean",
+    default: DEFAULT_VERTICAL,
+    description: "Vertical"
+  }
+};
+var resolve = (params) => ({
+  horizontal: params.horizontal ?? DEFAULT_HORIZONTAL,
+  vertical: params.vertical ?? DEFAULT_VERTICAL
+});
+var validateTileParams = (params) => {
+  assertEffectParamsObject(params, "Tile");
+  assertOptionalBoolean(params.horizontal, "horizontal");
+  assertOptionalBoolean(params.vertical, "vertical");
+};
+var tile = createEffect({
+  type: "dev.remotion.effects.tile",
+  label: "tile()",
+  documentationLink: "https://www.remotion.dev/docs/effects/tile",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `tile-${r.horizontal}-${r.vertical}`;
+  },
+  setup: (target) => {
+    const boundsCanvas = target.ownerDocument.createElement("canvas");
+    const boundsContext = boundsCanvas.getContext("2d", {
+      colorSpace: "srgb",
+      willReadFrequently: true
+    });
+    if (!boundsContext) {
+      throw new Error("Failed to acquire 2D context for tile effect.");
+    }
+    const tileCanvas = target.ownerDocument.createElement("canvas");
+    const tileContext = tileCanvas.getContext("2d");
+    if (!tileContext) {
+      throw new Error("Failed to acquire 2D context for tile effect.");
+    }
+    return { boundsCanvas, boundsContext, tileCanvas, tileContext };
+  },
+  apply: ({ source, target, width, height, params, state }) => {
+    const context = target.getContext("2d");
+    if (!context) {
+      throw new Error("Failed to acquire 2D context for tile effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve(params);
+    context.clearRect(0, 0, width, height);
+    if (!r.horizontal && !r.vertical) {
+      context.drawImage(source, 0, 0, width, height);
+      return;
+    }
+    if (state.boundsCanvas.width !== width || state.boundsCanvas.height !== height) {
+      state.boundsCanvas.width = width;
+      state.boundsCanvas.height = height;
+    }
+    state.boundsContext.clearRect(0, 0, width, height);
+    state.boundsContext.drawImage(source, 0, 0, width, height);
+    const pixels = state.boundsContext.getImageData(0, 0, width, height).data;
+    const rowMaximumAlpha = (y) => {
+      let maximumAlpha = 0;
+      for (let x = 0;x < width; x++) {
+        maximumAlpha = Math.max(maximumAlpha, pixels[(y * width + x) * 4 + 3]);
+      }
+      return maximumAlpha;
+    };
+    const columnMaximumAlpha = (x, visibleTop, visibleBottom) => {
+      let maximumAlpha = 0;
+      for (let y = visibleTop;y <= visibleBottom; y++) {
+        maximumAlpha = Math.max(maximumAlpha, pixels[(y * width + x) * 4 + 3]);
+      }
+      return maximumAlpha;
+    };
+    let top = 0;
+    while (top < height && rowMaximumAlpha(top) === 0) {
+      top++;
+    }
+    if (top === height) {
+      context.clearRect(0, 0, width, height);
+      return;
+    }
+    let bottom = height - 1;
+    while (bottom > top && rowMaximumAlpha(bottom) === 0) {
+      bottom--;
+    }
+    let left = 0;
+    while (left < width && columnMaximumAlpha(left, top, bottom) === 0) {
+      left++;
+    }
+    let right = width - 1;
+    while (right > left && columnMaximumAlpha(right, top, bottom) === 0) {
+      right--;
+    }
+    if (r.vertical && top < bottom) {
+      if (rowMaximumAlpha(top) < rowMaximumAlpha(top + 1)) {
+        top++;
+      }
+      if (rowMaximumAlpha(bottom) < rowMaximumAlpha(bottom - 1)) {
+        bottom--;
+      }
+    }
+    if (r.horizontal && left < right) {
+      if (columnMaximumAlpha(left, top, bottom) < columnMaximumAlpha(left + 1, top, bottom)) {
+        left++;
+      }
+      if (columnMaximumAlpha(right, top, bottom) < columnMaximumAlpha(right - 1, top, bottom)) {
+        right--;
+      }
+    }
+    const tileWidth = right - left + 1;
+    const tileHeight = bottom - top + 1;
+    state.tileCanvas.width = tileWidth;
+    state.tileCanvas.height = tileHeight;
+    state.tileContext.clearRect(0, 0, tileWidth, tileHeight);
+    state.tileContext.drawImage(source, left, top, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight);
+    context.clearRect(0, 0, width, height);
+    const startX = r.horizontal ? left - Math.ceil(left / tileWidth) * tileWidth : left;
+    const startY = r.vertical ? top - Math.ceil(top / tileHeight) * tileHeight : top;
+    const endX = r.horizontal ? width : left + tileWidth;
+    const endY = r.vertical ? height : top + tileHeight;
+    for (let y = startY;y < endY; y += tileHeight) {
+      const tileY = Math.round((y - top) / tileHeight);
+      const mirrorY = r.vertical && Math.abs(tileY) % 2 === 1;
+      for (let x = startX;x < endX; x += tileWidth) {
+        const tileX = Math.round((x - left) / tileWidth);
+        const mirrorX = r.horizontal && Math.abs(tileX) % 2 === 1;
+        context.save();
+        context.translate(mirrorX ? x + tileWidth : x, mirrorY ? y + tileHeight : y);
+        context.scale(mirrorX ? -1 : 1, mirrorY ? -1 : 1);
+        context.drawImage(state.tileCanvas, 0, 0);
+        context.restore();
+      }
+    }
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: tileSchema,
+  validateParams: validateTileParams
+});
+export {
+  tile
+};

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { checkerboard, type CheckerboardParams } from './checkerboard.js';
 export { pattern, type PatternOrigin, type PatternParams } from './pattern.js';
+export { tile, type TileParams } from './tile.js';
 export { rings, type RingsCenter, type RingsParams } from './rings.js';
 export { starburst, starburstEffectSchema, type StarburstEffectParams, type StarburstOrigin, } from './starburst.js';
 export { lightLeak, lightLeakEffectSchema, type LightLeakEffectParams, } from './light-leak.js';

package/dist/tile.d.ts

@@ -0,0 +1,9 @@
+export type TileParams = {
+    /** Whether to repeat the source horizontally. Defaults to `true`. */
+    readonly horizontal?: boolean;
+    /** Whether to repeat the source vertically. Defaults to `true`. */
+    readonly vertical?: boolean;
+};
+export declare const tile: (params?: (TileParams & {
+    readonly disabled?: boolean | undefined;
+}) | undefined) => import("remotion").EffectDescriptor<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/effects",
-	"version": "4.0.511",
+	"version": "4.0.513",
 	"description": "Effects that can be applied to Remotion-based canvas components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.511"
+		"remotion": "4.0.513"
 	},
 	"exports": {
 		".": {
@@ -319,6 +319,11 @@
 			"module": "./dist/esm/thermal-vision.mjs",
 			"import": "./dist/esm/thermal-vision.mjs"
 		},
+		"./tile": {
+			"types": "./dist/tile.d.ts",
+			"module": "./dist/esm/tile.mjs",
+			"import": "./dist/esm/tile.mjs"
+		},
 		"./tint": {
 			"types": "./dist/tint.d.ts",
 			"module": "./dist/esm/tint.mjs",
@@ -554,6 +559,9 @@
 			"thermal-vision": [
 				"dist/thermal-vision.d.ts"
 			],
+			"tile": [
+				"dist/tile.d.ts"
+			],
 			"tint": [
 				"dist/tint.d.ts"
 			],
@@ -594,7 +602,7 @@
 	},
 	"homepage": "https://www.remotion.dev/docs/effects/api",
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.511",
+		"@remotion/eslint-config-internal": "4.0.513",
 		"@vitest/browser-playwright": "4.0.9",
 		"eslint": "9.19.0",
 		"vitest": "4.0.9",