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

Thrown by the dot-grid effect's validatePositive guard when gridSize is supplied and is less than or equal to zero. gridSize controls cell spacing in the dot-grid fragment shader; a non-positive value would cause division by zero or infinite cells. dotSize is allowed to be zero (covered by a separate non-negative check), but gridSize must be strictly positive.

Source

Thrown at packages/effects/src/dot-grid.ts:73

	gridSize: p.gridSize ?? DEFAULT_GRID_SIZE,
	invert: p.invert ?? DEFAULT_INVERT,
});

const assertOptionalBoolean = (value: unknown, name: string): void => {
	if (value === undefined) {
		return;
	}

	if (typeof value !== 'boolean') {
		throw new TypeError(
			`"${name}" must be a boolean, but got ${JSON.stringify(value)}`,
		);
	}
};

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 validateDotGridParams = (params: DotGridParams): void => {
	assertEffectParamsObject(params, 'Dot grid');
	assertOptionalFiniteNumber(params.dotSize, 'dotSize');
	assertOptionalFiniteNumber(params.gridSize, 'gridSize');
	assertOptionalBoolean(params.invert, 'invert');

	if (params.dotSize !== undefined) {
		validateNonNegative(params.dotSize, 'dotSize');
	}

	if (params.gridSize !== undefined) {
		validatePositive(params.gridSize, 'gridSize');
	}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Set gridSize to a positive integer such as 20 (the default).
2. Clamp animated values: gridSize: Math.max(1, Math.round(value)).
3. If 0 is a meaningful 'no grid' state in your UI, conditionally omit the dotGrid() effect rather than passing gridSize: 0.
4. Audit interpolate() input/output ranges so the floor is >= 1.

Example fix

// before
dotGrid({gridSize: interpolate(frame, [0, 30], [40, 0])});

// after
dotGrid({gridSize: Math.max(1, Math.round(interpolate(frame, [0, 30], [40, 1])))});

const safeGridSize = (n) =>
  typeof n === 'number' && Number.isFinite(n) ? Math.max(1, Math.round(n)) : undefined;

const params = {};
const g = safeGridSize(rawGridSize);
if (g !== undefined) params.gridSize = g;
dotGrid(params);

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

const safeGridSize = (v: unknown): number => {
  if (!isPositiveInt(v)) {
    throw new TypeError(`gridSize must be a positive number, got ${String(v)}`);
  }
  return v;
};

When it happens

Trigger: Calling dotGrid() with gridSize: 0, gridSize: -10, or gridSize: -0. Also reached if gridSize is animated down to zero or below through an interpolate/Spring whose range crosses zero, or if a default of 0 is set in external config.

Common situations: Animation easing curves that overshoot below zero; user-facing sliders that allow 0 as the floor; importing grid spacing from CSS where 0 means 'auto'; copy-pasting a 0 from a disabled state.

Related errors

• "${name}" must be a boolean, but got ${JSON.stringify(value)
• inputRange must contain only finite numbers, but got [${arr.
• HtmlInCanvas: `width` must be a positive integer. Received:
• HtmlInCanvas: `height` must be a positive integer. Received:
• HtmlInCanvas: `pixelDensity` must be a positive finite numbe

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