remotion-dev/remotion · error · RangeError

The " " prop of must be between 0 and 1, but got . The crop…

Error message

The "${name}" prop of ${componentName} must be between 0 and 1, but got ${value}. The crop range is 0 to 1, not 0 to 100.

What it means

The Sequence crop props (cropLeft, cropRight, cropTop, cropBottom) are fractions of the frame in the range 0 to 1, not percentages. validateSequenceCrop() first rejects non-finite values with a TypeError, then throws this RangeError when a value exceeds 100 - a threshold chosen to catch percentage-scale values (e.g. 150 for 'crop 150%'). Note that values between 1 and 100 are silently clamped to 1 (full crop), so this error specifically means the value is far outside the valid scale.

Solutions

1. Express crop as a fraction: divide percent values by 100 (cropLeft={25} becomes cropLeft={0.25})
2. If the value comes from external data, normalize it once at the boundary: cropLeft={value / 100}
3. Check every crop prop on the throwing <Sequence> - the message names the exact prop and component

Example fix

// before - percent-style values
<Sequence cropLeft={25} cropBottom={100}>...</Sequence>

// after - fractions between 0 and 1
<Sequence cropLeft={0.25} cropBottom={1}>...</Sequence>

// Run before passing props to <Sequence>
const assertCropProps = (crop: {
  cropLeft?: number;
  cropRight?: number;
  cropTop?: number;
  cropBottom?: number;
}) => {
  for (const [name, value] of Object.entries(crop)) {
    if (value === undefined) continue;
    if (typeof value !== 'number' || !Number.isFinite(value) || value > 100) {
      throw new Error(
        `Invalid ${name}=${String(value)}: crop values are fractions 0-1, not percent`,
      );
    }
  }
};

assertCropProps({cropLeft: input.left / 100, cropBottom: input.bottom / 100});

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

When it happens

Trigger: Passing cropLeft/cropRight/cropTop/cropBottom > 100 to <Sequence> (or any component using useCropStyle / RegularSequenceRefForwardingFunction). Validation runs on every render of the sequence.

Common situations: Porting CSS or design-tool crop values expressed in percent (cropLeft={25} style units) into the crop props; computing crop from data in 0-100 scale (e.g. audio volume percentages) and passing it through without dividing by 100; copy-pasting crop values from an API that uses 0-100.

Related errors

• The cropLeft, cropRight, cropTop and cropBottom props of…
• The " " prop of must be a finite number, but got .
• Argument for frame must be an integer, but got
• Argument missing for parameter "frame"
• Argument passed for "frame" is not a number

AI-assisted analysis of remotion-dev/remotion@10db9de073 (2026-08-22). Data as JSON: /api/errors/516909eab4f57959. Report an issue: GitHub.

Appendix: source

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

};

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 > 100) {
			throw new RangeError(
				`The "${name}" prop of ${componentName} must be between 0 and 1, but got ${value}. The crop range is 0 to 1, not 0 to 100.`,
			);
		}
	}
};

View on GitHub (pinned to 10db9de073)