@remotion/effects 4.0.483 → 4.0.484

package/dist/esm/index.mjs

@@ -2309,11 +2309,591 @@ var zigzag = createEffect5({
   schema: zigzagSchema,
   validateParams: validateZigzagParams
 });
-// src/corner-pin/index.ts
+
+// src/linear-gradient.ts
+import { Internals as Internals6 } from "remotion";
+var { createEffect: createEffect6, createWebGL2ContextError: createWebGL2ContextError6 } = Internals6;
+var DEFAULT_START = [0, 0.5];
+var DEFAULT_END = [1, 0.5];
+var DEFAULT_START_COLOR = "#000000";
+var DEFAULT_END_COLOR = "#ffffff";
+var linearGradientSchema = {
+  start: {
+    type: "uv-coordinate",
+    min: -1,
+    max: 2,
+    step: 0.01,
+    default: DEFAULT_START,
+    description: "Start",
+    visual: {
+      type: "line",
+      to: "end"
+    }
+  },
+  end: {
+    type: "uv-coordinate",
+    min: -1,
+    max: 2,
+    step: 0.01,
+    default: DEFAULT_END,
+    description: "End"
+  },
+  startColor: {
+    type: "color",
+    default: DEFAULT_START_COLOR,
+    description: "Start color"
+  },
+  endColor: {
+    type: "color",
+    default: DEFAULT_END_COLOR,
+    description: "End color"
+  }
+};
+var resolve6 = (p) => ({
+  start: [...p.start ?? DEFAULT_START],
+  end: [...p.end ?? DEFAULT_END],
+  startColor: p.startColor ?? DEFAULT_START_COLOR,
+  endColor: p.endColor ?? DEFAULT_END_COLOR
+});
+var assertOptionalUvCoordinate2 = (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 validateLinearGradientParams = (params) => {
+  assertEffectParamsObject(params, "Linear gradient");
+  assertOptionalUvCoordinate2(params.start, "start");
+  assertOptionalUvCoordinate2(params.end, "end");
+  assertOptionalColor(params.startColor, "startColor");
+  assertOptionalColor(params.endColor, "endColor");
+};
+var VERTEX_SHADER = `#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 FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform vec2 uStart;
+uniform vec2 uEnd;
+uniform vec4 uStartColor;
+uniform vec4 uEndColor;
+
+float gradientProgress(vec2 uv) {
+	vec2 gradient = uEnd - uStart;
+	float gradientLengthSq = dot(gradient, gradient);
+	if (gradientLengthSq <= 0.0000001) {
+		return 0.0;
+	}
+
+	return clamp(dot(uv - uStart, gradient) / gradientLengthSq, 0.0, 1.0);
+}
+
+void main() {
+	vec2 publicUv = vec2(vUv.x, 1.0 - vUv.y);
+	vec4 color = mix(uStartColor, uEndColor, gradientProgress(publicUv));
+	fragColor = vec4(color.rgb * color.a, color.a);
+}
+`;
+var compileShader6 = (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(`Linear gradient shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var createProgram4 = (gl) => {
+  const vs = compileShader6(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fs = compileShader6(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  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);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Linear gradient program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var setupLinearGradient = (target) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl) {
+    throw createWebGL2ContextError6("linear gradient effect");
+  }
+  const program = createProgram4(gl);
+  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 colorCanvas = document.createElement("canvas");
+  colorCanvas.width = 1;
+  colorCanvas.height = 1;
+  const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
+  if (!colorCtx) {
+    throw new Error("Failed to acquire 2D context for color parsing");
+  }
+  return {
+    gl,
+    program,
+    vao,
+    vbo,
+    uniforms: {
+      uStart: gl.getUniformLocation(program, "uStart"),
+      uEnd: gl.getUniformLocation(program, "uEnd"),
+      uStartColor: gl.getUniformLocation(program, "uStartColor"),
+      uEndColor: gl.getUniformLocation(program, "uEndColor")
+    },
+    colorCtx,
+    cachedStartColor: "",
+    cachedStartColorRgba: [0, 0, 0, 255],
+    cachedEndColor: "",
+    cachedEndColorRgba: [255, 255, 255, 255]
+  };
+};
+var normalizedRgba = (color) => {
+  return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255];
+};
+var getParsedColors = (state, resolved) => {
+  if (state.cachedStartColor !== resolved.startColor) {
+    state.cachedStartColor = resolved.startColor;
+    state.cachedStartColorRgba = parseColorRgba(state.colorCtx, resolved.startColor);
+  }
+  if (state.cachedEndColor !== resolved.endColor) {
+    state.cachedEndColor = resolved.endColor;
+    state.cachedEndColorRgba = parseColorRgba(state.colorCtx, resolved.endColor);
+  }
+  return {
+    start: state.cachedStartColorRgba,
+    end: state.cachedEndColorRgba
+  };
+};
+var linearGradient = createEffect6({
+  type: "dev.remotion.effects.linearGradient",
+  label: "linearGradient()",
+  documentationLink: "https://www.remotion.dev/docs/effects/linear-gradient",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve6(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 = resolve6(params);
+    const { start, end } = getParsedColors(state, r);
+    const [sr, sg, sb, sa] = normalizedRgba(start);
+    const [er, eg, eb, ea] = normalizedRgba(end);
+    const { gl, program, uniforms, vao } = state;
+    gl.viewport(0, 0, width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    if (uniforms.uStart)
+      gl.uniform2f(uniforms.uStart, r.start[0], r.start[1]);
+    if (uniforms.uEnd)
+      gl.uniform2f(uniforms.uEnd, r.end[0], r.end[1]);
+    if (uniforms.uStartColor) {
+      gl.uniform4f(uniforms.uStartColor, sr, sg, sb, sa);
+    }
+    if (uniforms.uEndColor) {
+      gl.uniform4f(uniforms.uEndColor, er, eg, eb, ea);
+    }
+    gl.bindVertexArray(vao);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo }) => {
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+  },
+  schema: linearGradientSchema,
+  validateParams: validateLinearGradientParams
+});
+
+// src/linear-gradient-tint.ts
 import { Internals as Internals7 } from "remotion";
+var { createEffect: createEffect7, createWebGL2ContextError: createWebGL2ContextError7 } = Internals7;
+var DEFAULT_START2 = [0, 0.5];
+var DEFAULT_END2 = [1, 0.5];
+var DEFAULT_START_COLOR2 = "#000000";
+var DEFAULT_END_COLOR2 = "#ffffff";
+var DEFAULT_AMOUNT2 = 0.5;
+var linearGradientTintSchema = {
+  start: {
+    type: "uv-coordinate",
+    min: -1,
+    max: 2,
+    step: 0.01,
+    default: DEFAULT_START2,
+    description: "Start",
+    visual: {
+      type: "line",
+      to: "end"
+    }
+  },
+  end: {
+    type: "uv-coordinate",
+    min: -1,
+    max: 2,
+    step: 0.01,
+    default: DEFAULT_END2,
+    description: "End"
+  },
+  startColor: {
+    type: "color",
+    default: DEFAULT_START_COLOR2,
+    description: "Start color"
+  },
+  endColor: {
+    type: "color",
+    default: DEFAULT_END_COLOR2,
+    description: "End color"
+  },
+  amount: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: DEFAULT_AMOUNT2,
+    description: "Amount",
+    hiddenFromList: false
+  }
+};
+var resolve7 = (p) => ({
+  start: [...p.start ?? DEFAULT_START2],
+  end: [...p.end ?? DEFAULT_END2],
+  startColor: p.startColor ?? DEFAULT_START_COLOR2,
+  endColor: p.endColor ?? DEFAULT_END_COLOR2,
+  amount: p.amount ?? DEFAULT_AMOUNT2
+});
+var assertOptionalUvCoordinate3 = (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 validateLinearGradientTintParams = (params) => {
+  assertEffectParamsObject(params, "Linear gradient tint");
+  assertOptionalUvCoordinate3(params.start, "start");
+  assertOptionalUvCoordinate3(params.end, "end");
+  assertOptionalColor(params.startColor, "startColor");
+  assertOptionalColor(params.endColor, "endColor");
+  assertOptionalFiniteNumber(params.amount, "amount");
+  validateUnitInterval(resolve7(params).amount, "amount");
+};
+var VERTEX_SHADER2 = `#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 FRAGMENT_SHADER2 = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D uSource;
+uniform vec2 uStart;
+uniform vec2 uEnd;
+uniform vec4 uStartColor;
+uniform vec4 uEndColor;
+uniform float uAmount;
+
+float gradientProgress(vec2 uv) {
+	vec2 gradient = uEnd - uStart;
+	float gradientLengthSq = dot(gradient, gradient);
+	if (gradientLengthSq <= 0.0000001) {
+		return 0.0;
+	}
+
+	return clamp(dot(uv - uStart, gradient) / gradientLengthSq, 0.0, 1.0);
+}
+
+void main() {
+	vec4 texColor = texture(uSource, vUv);
+	float alpha = texColor.a;
+
+	if (alpha <= 0.001) {
+		fragColor = vec4(0.0);
+		return;
+	}
+
+	vec2 publicUv = vec2(vUv.x, 1.0 - vUv.y);
+	vec4 tintColor = mix(uStartColor, uEndColor, gradientProgress(publicUv));
+	vec3 sourceRgb = texColor.rgb / alpha;
+	vec3 blended = mix(sourceRgb, tintColor.rgb, uAmount * tintColor.a);
+
+	fragColor = vec4(blended * alpha, alpha);
+}
+`;
+var compileShader7 = (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(`Linear gradient tint shader compile failed: ${log ?? "(no log)"}`);
+  }
+  return shader;
+};
+var createProgram5 = (gl) => {
+  const vs = compileShader7(gl, gl.VERTEX_SHADER, VERTEX_SHADER2);
+  const fs = compileShader7(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER2);
+  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);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Linear gradient tint program link failed: ${log ?? "(no log)"}`);
+  }
+  return program;
+};
+var createRgbaTexture = (gl) => {
+  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 texture;
+};
+var setupLinearGradientTint = (target) => {
+  const gl = target.getContext("webgl2", {
+    premultipliedAlpha: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  });
+  if (!gl) {
+    throw createWebGL2ContextError7("linear gradient tint effect");
+  }
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+  const program = createProgram5(gl);
+  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 textureSource = createRgbaTexture(gl);
+  const colorCanvas = document.createElement("canvas");
+  colorCanvas.width = 1;
+  colorCanvas.height = 1;
+  const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
+  if (!colorCtx) {
+    throw new Error("Failed to acquire 2D context for color parsing");
+  }
+  return {
+    gl,
+    program,
+    vao,
+    vbo,
+    textureSource,
+    uniforms: {
+      uSource: gl.getUniformLocation(program, "uSource"),
+      uStart: gl.getUniformLocation(program, "uStart"),
+      uEnd: gl.getUniformLocation(program, "uEnd"),
+      uStartColor: gl.getUniformLocation(program, "uStartColor"),
+      uEndColor: gl.getUniformLocation(program, "uEndColor"),
+      uAmount: gl.getUniformLocation(program, "uAmount")
+    },
+    colorCtx,
+    cachedStartColor: "",
+    cachedStartColorRgba: [0, 0, 0, 255],
+    cachedEndColor: "",
+    cachedEndColorRgba: [255, 255, 255, 255]
+  };
+};
+var normalizedRgba2 = (color) => {
+  return [color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255];
+};
+var getParsedColors2 = (state, resolved) => {
+  if (state.cachedStartColor !== resolved.startColor) {
+    state.cachedStartColor = resolved.startColor;
+    state.cachedStartColorRgba = parseColorRgba(state.colorCtx, resolved.startColor);
+  }
+  if (state.cachedEndColor !== resolved.endColor) {
+    state.cachedEndColor = resolved.endColor;
+    state.cachedEndColorRgba = parseColorRgba(state.colorCtx, resolved.endColor);
+  }
+  return {
+    start: state.cachedStartColorRgba,
+    end: state.cachedEndColorRgba
+  };
+};
+var linearGradientTint = createEffect7({
+  type: "dev.remotion.effects.linearGradientTint",
+  label: "linearGradientTint()",
+  documentationLink: "https://www.remotion.dev/docs/effects/linear-gradient-tint",
+  backend: "webgl2",
+  calculateKey: (params) => {
+    const r = resolve7(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 = resolve7(params);
+    const { start, end } = getParsedColors2(state, r);
+    const [sr, sg, sb, sa] = normalizedRgba2(start);
+    const [er, eg, eb, ea] = normalizedRgba2(end);
+    const { gl, program, textureSource, uniforms, vao } = state;
+    gl.viewport(0, 0, width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, textureSource);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    gl.useProgram(program);
+    if (uniforms.uSource)
+      gl.uniform1i(uniforms.uSource, 0);
+    if (uniforms.uStart)
+      gl.uniform2f(uniforms.uStart, r.start[0], r.start[1]);
+    if (uniforms.uEnd)
+      gl.uniform2f(uniforms.uEnd, r.end[0], r.end[1]);
+    if (uniforms.uStartColor) {
+      gl.uniform4f(uniforms.uStartColor, sr, sg, sb, sa);
+    }
+    if (uniforms.uEndColor) {
+      gl.uniform4f(uniforms.uEndColor, er, eg, eb, ea);
+    }
+    if (uniforms.uAmount)
+      gl.uniform1f(uniforms.uAmount, r.amount);
+    gl.bindVertexArray(vao);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.useProgram(null);
+  },
+  cleanup: ({ gl, program, vao, vbo, textureSource }) => {
+    gl.deleteTexture(textureSource);
+    gl.deleteBuffer(vbo);
+    gl.deleteProgram(program);
+    gl.deleteVertexArray(vao);
+  },
+  schema: linearGradientTintSchema,
+  validateParams: validateLinearGradientTintParams
+});
+// src/corner-pin/index.ts
+import { Internals as Internals9 } from "remotion";
 
 // src/corner-pin/corner-pin-runtime.ts
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/corner-pin/corner-pin-shaders.ts
 var CORNER_PIN_VS = `#version 300 es
@@ -2338,57 +2918,60 @@ uniform vec2 uTopRight;
 uniform vec2 uBottomRight;
 uniform vec2 uBottomLeft;
 
-float cross2(vec2 a, vec2 b) {
-	return a.x * b.y - a.y * b.x;
-}
+bool solveProjectiveInverse(vec2 p, out vec2 uv) {
+	vec2 p0 = uBottomLeft;
+	vec2 p1 = uBottomRight;
+	vec2 p2 = uTopRight;
+	vec2 p3 = uTopLeft;
+
+	vec2 dx1 = p1 - p2;
+	vec2 dx2 = p3 - p2;
+	vec2 dx3 = p0 - p1 + p2 - p3;
 
-bool solveBilinearInverse(vec2 p, out vec2 uv) {
-	vec2 a = uBottomLeft;
-	vec2 b = uBottomRight - uBottomLeft;
-	vec2 c = uTopLeft - uBottomLeft;
-	vec2 d = uBottomLeft - uBottomRight + uTopRight - uTopLeft;
-	vec2 q = p - a;
+	float g = 0.0;
+	float h = 0.0;
 
-	float linearDenominator = cross2(b, c);
-	if (abs(cross2(b, d)) < 0.000001) {
-		if (abs(linearDenominator) < 0.000001) {
+	if (abs(dx3.x) > 0.000001 || abs(dx3.y) > 0.000001) {
+		float denominator = dx1.x * dx2.y - dx2.x * dx1.y;
+		if (abs(denominator) < 0.000001) {
 			return false;
 		}
 
-		uv.x = cross2(q, c) / linearDenominator;
-		uv.y = cross2(q, b) / cross2(c, b);
-		return true;
+		g = (dx3.x * dx2.y - dx2.x * dx3.y) / denominator;
+		h = (dx1.x * dx3.y - dx3.x * dx1.y) / denominator;
 	}
 
-	float qa = -cross2(b, d);
-	float qb = cross2(q, d) - cross2(b, c);
-	float qc = cross2(q, c);
-	float discriminant = qb * qb - 4.0 * qa * qc;
-
-	if (discriminant < 0.0) {
+	float a = p1.x - p0.x + g * p1.x;
+	float b = p3.x - p0.x + h * p3.x;
+	float c = p0.x;
+	float d = p1.y - p0.y + g * p1.y;
+	float e = p3.y - p0.y + h * p3.y;
+	float f = p0.y;
+
+	float inverseX =
+		(e - f * h) * p.x +
+		(c * h - b) * p.y +
+		(b * f - c * e);
+	float inverseY =
+		(f * g - d) * p.x +
+		(a - c * g) * p.y +
+		(c * d - a * f);
+	float inverseW =
+		(d * h - e * g) * p.x +
+		(b * g - a * h) * p.y +
+		(a * e - b * d);
+
+	if (abs(inverseW) < 0.000001) {
 		return false;
 	}
 
-	float sqrtDiscriminant = sqrt(discriminant);
-	float u1 = (-qb + sqrtDiscriminant) / (2.0 * qa);
-	float u2 = (-qb - sqrtDiscriminant) / (2.0 * qa);
-	float u = u1;
-	if (u1 < -0.001 || u1 > 1.001) {
-		u = u2;
-	}
-
-	vec2 denominator = c + d * u;
-	float v = abs(denominator.x) > abs(denominator.y)
-		? (q.x - b.x * u) / denominator.x
-		: (q.y - b.y * u) / denominator.y;
-
-	uv = vec2(u, v);
+	uv = vec2(inverseX / inverseW, inverseY / inverseW);
 	return true;
 }
 
 void main() {
 	vec2 sourceUv;
-	if (!solveBilinearInverse(vUv, sourceUv)) {
+	if (!solveProjectiveInverse(vUv, sourceUv)) {
 		fragColor = vec4(0.0);
 		return;
 	}
@@ -2408,8 +2991,8 @@ void main() {
 `;
 
 // src/corner-pin/corner-pin-runtime.ts
-var { createWebGL2ContextError: createWebGL2ContextError6 } = Internals6;
-var compileShader6 = (gl, type, source) => {
+var { createWebGL2ContextError: createWebGL2ContextError8 } = Internals8;
+var compileShader8 = (gl, type, source) => {
   const shader = gl.createShader(type);
   if (!shader) {
     throw new Error("Failed to create WebGL shader");
@@ -2438,15 +3021,15 @@ var linkProgram6 = (gl, vs, fs) => {
   }
   return program;
 };
-var createProgram4 = (gl, vertexSource, fragmentSource) => {
-  const vs = compileShader6(gl, gl.VERTEX_SHADER, vertexSource);
-  const fs = compileShader6(gl, gl.FRAGMENT_SHADER, fragmentSource);
+var createProgram6 = (gl, vertexSource, fragmentSource) => {
+  const vs = compileShader8(gl, gl.VERTEX_SHADER, vertexSource);
+  const fs = compileShader8(gl, gl.FRAGMENT_SHADER, fragmentSource);
   const program = linkProgram6(gl, vs, fs);
   gl.deleteShader(vs);
   gl.deleteShader(fs);
   return program;
 };
-var createRgbaTexture = (gl) => {
+var createRgbaTexture2 = (gl) => {
   const texture = gl.createTexture();
   if (!texture) {
     throw new Error("Failed to create WebGL texture");
@@ -2466,10 +3049,10 @@ var setupCornerPin = (target) => {
     preserveDrawingBuffer: true
   });
   if (!gl) {
-    throw createWebGL2ContextError6("corner pin effect");
+    throw createWebGL2ContextError8("corner pin effect");
   }
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-  const program = createProgram4(gl, CORNER_PIN_VS, CORNER_PIN_FS);
+  const program = createProgram6(gl, CORNER_PIN_VS, CORNER_PIN_FS);
   const vao = gl.createVertexArray();
   if (!vao) {
     throw new Error("Failed to create WebGL vertex array");
@@ -2504,7 +3087,7 @@ var setupCornerPin = (target) => {
   gl.enableVertexAttribArray(1);
   gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
   gl.bindVertexArray(null);
-  const textureSource = createRgbaTexture(gl);
+  const textureSource = createRgbaTexture2(gl);
   return {
     gl,
     program,
@@ -2575,7 +3158,7 @@ var applyCornerPin = ({
 };
 
 // src/corner-pin/index.ts
-var { createEffect: createEffect6 } = Internals7;
+var { createEffect: createEffect8 } = Internals9;
 var DEFAULT_TOP_LEFT = [0, 0];
 var DEFAULT_TOP_RIGHT = [1, 0];
 var DEFAULT_BOTTOM_RIGHT = [1, 1];
@@ -2606,7 +3189,7 @@ var cornerPinSchema = {
     description: "Bottom left"
   }
 };
-var resolve6 = (p) => ({
+var resolve8 = (p) => ({
   topLeft: [...p.topLeft ?? DEFAULT_TOP_LEFT],
   topRight: [...p.topRight ?? DEFAULT_TOP_RIGHT],
   bottomRight: [
@@ -2616,7 +3199,7 @@ var resolve6 = (p) => ({
     ...p.bottomLeft ?? DEFAULT_BOTTOM_LEFT
   ]
 });
-var assertOptionalUvCoordinate2 = (value, name) => {
+var assertOptionalUvCoordinate4 = (value, name) => {
   if (value === undefined) {
     return;
   }
@@ -2626,23 +3209,23 @@ var assertOptionalUvCoordinate2 = (value, name) => {
 };
 var validateCornerPinParams = (params) => {
   assertEffectParamsObject(params, "Corner pin");
-  assertOptionalUvCoordinate2(params.topLeft, "topLeft");
-  assertOptionalUvCoordinate2(params.topRight, "topRight");
-  assertOptionalUvCoordinate2(params.bottomRight, "bottomRight");
-  assertOptionalUvCoordinate2(params.bottomLeft, "bottomLeft");
+  assertOptionalUvCoordinate4(params.topLeft, "topLeft");
+  assertOptionalUvCoordinate4(params.topRight, "topRight");
+  assertOptionalUvCoordinate4(params.bottomRight, "bottomRight");
+  assertOptionalUvCoordinate4(params.bottomLeft, "bottomLeft");
 };
-var cornerPin = createEffect6({
+var cornerPin = createEffect8({
   type: "dev.remotion.effects.cornerPin",
   label: "cornerPin()",
   documentationLink: "https://www.remotion.dev/docs/effects/corner-pin",
   backend: "webgl2",
   calculateKey: (params) => {
-    const r = resolve6(params);
+    const r = resolve8(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 = resolve6(params);
+    const r = resolve8(params);
     applyCornerPin({
       state,
       source,
@@ -2663,6 +3246,8 @@ export {
   zigzag,
   rings,
   pattern,
+  linearGradientTint,
+  linearGradient,
   gridlines,
   cornerPin,
   checkerboard