What causes ""jaggedness" must be >= 0" in remotion-dev/remotion?

Clamp with Math.max(0, value) — or Math.abs() if a waveform centered at 0 is intended.

"jaggedness" must be >= 0

Error message

"jaggedness" must be >= 0

What it means

The <Tear> effect's `jaggedness` parameter controls the zigzag amplitude of the tear seam in pixels and must be >= 0 (schema caps it at 100). validateTearParams throws after substituting the default (20) when the resolved jaggedness is negative. Use 0 for a perfectly straight seam; negative pixel amplitude is nonsensical.

Source

Thrown at packages/effects/src/tear.ts:83

});

const validateTearParams = (params: TearParams): void => {
	assertEffectParamsObject(params, 'Tear');
	assertOptionalFiniteNumber(params.progress, 'progress');
	assertOptionalFiniteNumber(params.angle, 'angle');
	assertOptionalFiniteNumber(params.rotation, 'rotation');
	assertOptionalFiniteNumber(params.jaggedness, 'jaggedness');
	const r = resolve(params);
	if (r.progress < 0) {
		throw new Error('"progress" must be >= 0');
	}

	if (r.rotation < 0 || r.rotation > 90) {
		throw new Error('"rotation" must be between 0 and 90');
	}

	if (r.jaggedness < 0) {
		throw new Error('"jaggedness" must be >= 0');
	}
};

type TearState = {
	readonly gl: WebGL2RenderingContext;
	readonly program: WebGLProgram;
	readonly vao: WebGLVertexArrayObject;
	readonly vbo: WebGLBuffer;
	readonly texture: WebGLTexture;
	readonly uSource: WebGLUniformLocation | null;
	readonly uAngle: WebGLUniformLocation | null;
	readonly uProgress: WebGLUniformLocation | null;
	readonly uRotation: WebGLUniformLocation | null;
	readonly uJaggedness: WebGLUniformLocation | null;
	readonly uSide: WebGLUniformLocation | null;
	readonly uResolution: WebGLUniformLocation | null;
};

View on GitHub (pinned to b2f4e34732)

Solutions

Clamp with Math.max(0, value) — or Math.abs() if a waveform centered at 0 is intended.
If using interpolate(), pass extrapolateLeft: 'clamp' (and extrapolateRight if needed).
For a straight seam pass jaggedness={0}, not a negative value.
Check any computed source value for unexpected negative results before passing it.

Example fix

// before
<Tear jaggedness={20 * Math.sin(frame / 10)} />

// after
<Tear jaggedness={Math.abs(20 * Math.sin(frame / 10))} />

Defensive patterns

Strategy: validation

Validate before calling

if (jaggedness !== undefined && (!Number.isFinite(jaggedness) || jaggedness < 0)) {
  throw new RangeError(`jaggedness must be >= 0, got ${jaggedness}`);
}

Try / catch

try {
  return <Tear jaggedness={j} ... />;
} catch (e) {
  if (e instanceof Error && e.message.includes('"jaggedness" must be >= 0')) {
    return <Tear jaggedness={Math.max(0, j)} ... />;
  }
  throw e;
}

Prevention

Use Math.abs() for waveform-driven jaggedness so the value never dips below 0.
Add extrapolateLeft: 'clamp' to any interpolate() feeding jaggedness.
For a straight seam use jaggedness={0} rather than a negative amplitude.
Sanitize measured/computed inputs (canvas sizes, scales) before passing them.

When it happens

Trigger: Passing <Tear jaggedness={-10}> explicitly, or a dynamic value that can go negative (e.g. a sinusoid like 20 * Math.sin(frame/10) without an absolute value, or interpolate() output extrapolated below the input range).

Common situations: Animating jaggedness with a waveform centered at 0 so negative halves throw; computing jaggedness from a measured value (canvas width, scale factor) that is unexpectedly negative; typos such as jaggedness={-0}.

Understand the failure class

Background: "value must be between 0 and 1" / "out of range" / "must not be negative" errors: fixing range-validation failures across open-source libraries — this error's family across 42 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/2c4812b6c6b8643e. Report an issue: GitHub.