What causes ""${name}" must be greater than 0, but got ${JSON.stringify(value)}" in remotion-dev/remotion?

Pass a strictly positive value: thickness >= 0.1 (the schema min) and wavelength > 0.

remotion-dev/remotion · error · TypeError

" " must be greater than 0, but got

Error message

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

What it means

Zigzag validates that thickness and wavelength are strictly greater than zero via validatePositive, throwing a TypeError naming the offending field. thickness defaults to 40 and wavelength to 160; passing 0 or a negative number for either is rejected because a zero/negative stripe thickness or wave wavelength makes the shader's spacing math degenerate. This is the only error in this set caused by caller input rather than the GPU.

Solutions

Pass a strictly positive value: thickness >= 0.1 (the schema min) and wavelength > 0.
If you want 'no stripe', use gap (which accepts 0) or omit the effect conditionally, rather than zeroing thickness.
Clamp animated values with Math.max(0.1, value) before passing them to thickness.
For wavelength, use Math.max(1, value) or keep it at/below the default 160 range.

Example fix

// before
zigzag({thickness: 0});        // throws
zigzag({wavelength: value});   // throws when value <= 0

// after
zigzag({thickness: 0.1});                  // smallest valid
zigzag({wavelength: Math.max(1, value)});  // guard animated input

Defensive patterns

Strategy: validation

Validate before calling

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

const thickness = 0;          // would throw
const wavelength = someAnim;  // might be <= 0

if (thickness <= 0) throw new Error('thickness must be > 0');
if (wavelength <= 0) wavelength = 1; // clamp instead

zigzag({thickness, wavelength});

Type guard

const isPositiveNumber = (v: unknown, name = 'value'): v is number =>
  typeof v === 'number' && Number.isFinite(v) && v > 0;

// usage:
if (!isPositiveNumber(params.thickness, 'thickness')) { /* handle */ }

Try / catch

try {
  return <VideoEffects effects={[zigzag({thickness, wavelength})]} />;
} catch (err) {
  if (err instanceof TypeError && /must be greater than 0/.test(err.message)) {
    // re-render with clamped/omitted offending field
    return <VideoEffects effects={[zigzag({thickness: 0.1, wavelength: 160})]} />;
  }
  throw err;
}

Prevention

Remember thickness and wavelength must be > 0; gap and amplitude allow 0 (use those to 'disable').
Clamp animated values with Math.max(0.1, x) for thickness and Math.max(1, x) for wavelength.
Respect the schema min values (thickness min 0.1) when building UI controls.
Add a unit test that feeds boundary values (0, negative) to catch regressions.

When it happens

Trigger: Calling zigzag({thickness: 0}), zigzag({thickness: -10}), zigzag({wavelength: 0}), or zigzag({wavelength: -1}); also when an interpolated/keyframed value animates thickness or wavelength through or below zero.

Common situations: Confusing thickness (must be > 0) with gap (allows 0) and passing 0 to disable stripes; animating a value that dips negative at the curve endpoints; computing thickness/wavelength from a subtraction that can hit zero; passing a value below the schema min (thickness min 0.1, wavelength min not enforced at runtime the same way).

Related errors

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

Appendix: source

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

		wavelength: p.wavelength ?? DEFAULT_WAVELENGTH,
		maskToSourceAlpha: p.maskToSourceAlpha ?? DEFAULT_MASK_TO_SOURCE_ALPHA,
	};
};

const formatEnum = (variants: readonly string[]): string => {
	if (variants.length === 2) {
		return `"${variants[0]}" or "${variants[1]}"`;
	}

	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;
	}

View on GitHub (pinned to 78fe4bb3fd)