remotion-dev/remotion · error · TypeError

The "${name}" prop of ${componentName} must be a finite numb

Error message

The "${name}" prop of ${componentName} must be a finite number, but got ${String(value)}.

What it means

validateSequenceCrop inspects each property of the crop object (e.g. left/right/top/bottom). Undefined is allowed (skipped via `continue`). Any value that is not a number, or is not finite (NaN/Infinity), throws a TypeError because crop ratios must be numeric fractions of the frame.

Source

Thrown at packages/core/src/sequence-crop.ts:93

			: undefined);
	const rounded = serializedBorderRadius
		? ` round ${serializedBorderRadius}`
		: '';

	return `inset(${top * 100}% ${right * 100}% ${bottom * 100}% ${left * 100}%${rounded})`;
};

export const validateSequenceCrop = (
	crop: SequenceCropInput,
	componentName = '<Sequence />',
): void => {
	for (const [name, value] of Object.entries(crop)) {
		if (value === undefined) {
			continue;
		}

		if (typeof value !== 'number' || !Number.isFinite(value)) {
			throw new TypeError(
				`The "${name}" prop of ${componentName} must be a finite number, but got ${String(value)}.`,
			);
		}

		if (value < 0 || value > 1) {
			throw new RangeError(
				`The "${name}" prop of ${componentName} must be between 0 and 1, but got ${value}.`,
			);
		}
	}
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Pass numeric fractions in [0,1]: crop={{left: 0.1}}.
2. Leave unused keys undefined (or omit them) so they are skipped.
3. Ensure upstream arithmetic does not produce NaN/Infinity.

Example fix

// before
<Series.Sequence crop={{left: "10%"}} />
// after
<Series.Sequence crop={{left: 0.1}} />

function cleanCrop(c) {
  const out = {};
  for (const [k, v] of Object.entries(c)) {
    if (v === undefined) continue;
    if (typeof v !== 'number' || !Number.isFinite(v))
      throw new TypeError(`${k} must be a finite number`);
    out[k] = v;
  }
  return out;
}

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

When it happens

Trigger: crop={{left: "10%"}}, crop={{top: NaN}}, crop={{right: Infinity}}, crop={{left: true}}.

Common situations: Passing CSS-style percentage strings instead of fractions; arithmetic producing NaN; reading a value from config as a string.

Related errors

• The cropLeft, cropRight, cropTop and cropBottom props of <Se
• The "${name}" prop of ${componentName} must be between 0 and
• The layout prop of <Sequence /> expects either "absolute-fil
• If layout="none", you may not pass a style. Passed: ${JSON.s
• You passed to durationInFrames an argument of type ${typeof

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