remotion-dev/remotion · error · TypeError
"${name}" must be greater than 0, but got ${JSON.stringify(v
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.
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)
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
- "${name}" must be greater than or equal to 0, but got ${JSON
- "colors" must be an array with at least 2 colors, but got ${
- "direction" must be ${formatEnum(ZIGZAG_DIRECTIONS)}, but go
- loadFont() requires an object as its argument, but received
- loadFont() requires a "url" field in the options object, but
AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12).
Data as JSON: /api/errors/65de5f6d4e231dd2.
Report an issue: GitHub.