What causes ""rows" must be >= 1, but got ${JSON.stringify(r.rows)}" in remotion-dev/remotion?

Keep rows >= 1 (documented range is 1..400).

remotion-dev/remotion · error · TypeError

"rows" must be >= 1, but got ${JSON.stringify(r.rows)}

Error message

"rows" must be >= 1, but got ${JSON.stringify(r.rows)}

What it means

pixelDissolve() requires 'rows' to be at least 1 after defaults are applied (default is 10). The check fires after integer/finite validation, throwing a TypeError showing the resolved value when rows < 1, preventing a degenerate grid from reaching the shader.

Source

Thrown at packages/effects/src/pixel-dissolve.ts:120

	assertOptionalFiniteNumber(params.columns, 'columns');
	assertOptionalFiniteNumber(params.rows, 'rows');
	assertOptionalFiniteNumber(params.seed, 'seed');
	assertOptionalFiniteNumber(params.feather, 'feather');
	assertOptionalIntegerNumber(params.columns, 'columns');
	assertOptionalIntegerNumber(params.rows, 'rows');

	const r = resolve(params);
	validateUnitInterval(r.progress, 'progress');
	validateUnitInterval(r.feather, 'feather');

	if (r.columns < 1) {
		throw new TypeError(
			`"columns" must be >= 1, but got ${JSON.stringify(r.columns)}`,
		);
	}

	if (r.rows < 1) {
		throw new TypeError(
			`"rows" must be >= 1, but got ${JSON.stringify(r.rows)}`,
		);
	}
};

type PixelDissolveState = {
	readonly gl: WebGL2RenderingContext;
	readonly program: WebGLProgram;
	readonly vao: WebGLVertexArrayObject;
	readonly vbo: WebGLBuffer;
	readonly texture: WebGLTexture;
	readonly uSource: WebGLUniformLocation | null;
	readonly uProgress: WebGLUniformLocation | null;
	readonly uColumns: WebGLUniformLocation | null;
	readonly uRows: WebGLUniformLocation | null;
	readonly uSeed: WebGLUniformLocation | null;
	readonly uFeather: WebGLUniformLocation | null;
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Keep rows >= 1 (documented range is 1..400).
Clamp animated values: Math.max(1, Math.round(value)).
Fade the dissolve via the 'progress' prop instead of zeroing rows.

Example fix

// before
pixelDissolve({ rows: animatedRows }) // hits 0

// after
pixelDissolve({ rows: Math.max(1, Math.round(animatedRows)) })

Defensive patterns

Strategy: validation

Validate before calling

// Keep rows within the documented range.
const rows = clamp(Math.round(rawRows), 1, 400);
pixelDissolve({ rows });
// where clamp(n, lo, hi) = Math.min(hi, Math.max(lo, n))

Type guard

const isValidRows = (v: unknown): v is number =>
  typeof v === 'number' && Number.isInteger(v) && v >= 1;

Prevention

Clamp animated rows with Math.max(1, Math.round(value)).
Use the 'progress' prop to fade the dissolve instead of zeroing rows.
Reject zero/negative values from external config at the boundary.
Validate against the schema min (1) and max (400) before rendering.

When it happens

Trigger: Calling pixelDissolve({ rows: 0 }) or pixelDissolve({ rows: -2 }), or animating rows to/below zero. Checked on the resolved value in validatePixelDissolveParams.

Common situations: Animating rows toward zero to fade the effect out; negative values from misconfigured defaults; rounding that collapses to zero on short segments.

Related errors

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