remotion-dev/remotion · error · TypeError

"${name}" must be greater than or equal to 0, but got ${JSON

Error message

"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}

What it means

Zigzag validates that gap and amplitude are non-negative (>= 0) via validateNonNegative, throwing a TypeError naming the field. gap defaults to 0 and amplitude to 40; unlike thickness/wavelength, zero is permitted, but negative values are rejected because negative spacing/amplitude has no meaningful visual interpretation in the stripe layout.

Source

Thrown at packages/effects/src/zigzag.ts:204

	}

	return `${variants
		.slice(0, -1)
		.map((variant) => `"${variant}"`)
		.join(', ')} or "${variants[variants.length - 1]}"`;
};

const validatePositive = (value: number, name: string): void => {
	if (value <= 0) {
		throw new TypeError(
			`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`,
		);
	}
};

const validateNonNegative = (value: number, name: string): void => {
	if (value < 0) {
		throw new TypeError(
			`"${name}" must be greater than or equal to 0, but got ${JSON.stringify(value)}`,
		);
	}
};

const validateColors = (colors: unknown): void => {
	if (colors === undefined) {
		return;
	}

	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)}`,
		);
	}

	for (let i = 0; i < colors.length; i++) {
		assertRequiredColor(colors[i], `colors[${i}]`);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Pass gap >= 0 (0 is valid and means stripes touch).
Pass amplitude >= 0; use angle to control orientation, not negative amplitude.
Clamp animated values with Math.max(0, value) before passing them in.

Example fix

// before
zigzag({gap: -5});
zigzag({amplitude: animVal}); // throws when animVal < 0

// after
zigzag({gap: Math.max(0, g)});
zigzag({amplitude: Math.max(0, animVal)});

Defensive patterns

Strategy: validation

Validate before calling

import {zigzag} from '@remotion/effects';

const gap = computedGap;       // may be negative
const amplitude = animAmp;     // may be negative

const safeGap = Math.max(0, gap);
const safeAmp = Math.max(0, amplitude);

zigzag({gap: safeGap, amplitude: safeAmp});

Type guard

const isNonNegativeNumber = (v: unknown): v is number =>
  typeof v === 'number' && Number.isFinite(v) && v >= 0;

// usage:
if (!isNonNegativeNumber(params.gap)) params.gap = 0;

Try / catch

try {
  return <VideoEffects effects={[zigzag({gap, amplitude})]} />;
} catch (err) {
  if (err instanceof TypeError && /must be greater than or equal to 0/.test(err.message)) {
    return <VideoEffects effects={[zigzag({gap: Math.max(0, gap), amplitude: Math.max(0, amplitude)})]} />;
  }
  throw err;
}

Prevention

gap and amplitude accept 0 but not negatives; clamp animated values with Math.max(0, x).
Use angle (not negative amplitude) to control orientation.
When feeding values from external data, validate or clamp before passing.

When it happens

Trigger: Calling zigzag({gap: -5}) or zigzag({amplitude: -20}); or an animated gap/amplitude value that crosses below zero.

Common situations: An interpolation overshooting below zero at keyframe endpoints; computing gap/amplitude from a delta that can go negative; assuming amplitude wraps or modulates like an angle.

Related errors

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/18e2f7d8db44a199. Report an issue: GitHub.