remotion-dev/remotion · error · Error

inputRange must have at least 2 elements

Error message

inputRange must have at least 2 elements

What it means

Thrown by checkInputRange when the inputRange array passed to interpolateStyles has fewer than 2 elements. Interpolation requires at least a start and an end point to define a segment, so a 0- or 1-element range cannot be processed.

Source

Thrown at packages/animation-utils/src/transformation-helpers/interpolate-styles/index.tsx:233

		// Avoid number to be a string
		if (!isNaN(Number(finalStyleValue))) {
			return {
				...acc,
				[key]: Number(finalStyleValue),
			};
		}

		return {
			...acc,
			[key]: finalStyleValue,
		};
	}, {});
};

function checkInputRange(arr: readonly number[]) {
	if (arr.length < 2) {
		throw new Error('inputRange must have at least 2 elements');
	}

	for (let index = 0; index < arr.length; index++) {
		if (typeof arr[index] !== 'number') {
			throw new Error(`inputRange must contain only numbers`);
		}

		if (arr[index] === -Infinity || arr[index] === Infinity) {
			throw new Error(
				`inputRange must contain only finite numbers, but got [${arr.join(
					',',
				)}]`,
			);
		}

		if (index > 0 && !(arr[index] > arr[index - 1])) {
			throw new Error(
				`inputRange must be strictly monotonically non-decreasing but got [${arr.join(

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure inputRange has at least 2 strictly ascending values, e.g. [0, 30] for a 30-frame transition.
2. Validate dynamic arrays with inputRange.length >= 2 before calling interpolateStyles.
3. If you only have one target style, return it directly instead of interpolating.

Example fix

// before
interpolateStyles(frame, [0], [{opacity: 1}]);

// after
interpolateStyles(frame, [0, 30], [{opacity: 1}, {opacity: 0}]);

if (!Array.isArray(inputRange) || inputRange.length < 2) {
  throw new Error('inputRange must have at least 2 elements');
}

const isValidInputRange = (arr: unknown): arr is number[] =>
  Array.isArray(arr) && arr.length >= 2 && arr.every((x) => typeof x === 'number' && Number.isFinite(x));

When it happens

Trigger: Calling interpolateStyles(frame, [0], [styleA]) with a single-element range; passing an empty inputRange []; building the range dynamically and ending up with one entry.

Common situations: Off-by-one when slicing arrays; a dynamically generated keyframe list that collapsed to one entry; copy-paste from an interpolate() call that was trimmed.

Related errors

• inputRange must contain only numbers
• inputRange must contain only finite numbers, but got [${arr.
• inputRange must be strictly monotonically non-decreasing but
• inputRange can not be undefined
• inputRange (${inputRange.length}) and outputStylesRange (${o

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