What causes "Cannot interpolate ${kind} values with ${parsed.kind} values" in remotion-dev/remotion?

Align every element to the same kind: all translate ("0px", "10px"), all scale ("1", "2"), or all rotate ("0deg", "90deg").

remotion-dev/remotion · error · TypeError

Cannot interpolate ${kind} values with ${parsed.kind} values

Error message

Cannot interpolate ${kind} values with ${parsed.kind} values

What it means

Thrown by interpolateString after parsing every outputRange element when the kinds disagree across elements (e.g. one element is a translate and another is a scale, or one is a rotate and another a translate). All elements must share one kind so the same axis set and interpolation math applies across the whole range.

Source

Thrown at packages/core/src/interpolate.ts:805

					units: [null, null, null, parsed.units[0]] as [
						null,
						null,
						null,
						string | null,
					],
					dimensions: 4,
					axisRotation: true,
				};
			})
		: initiallyParsedOutputRange;
	const kind = parsedOutputRange[0]?.kind;
	if (kind === undefined) {
		throw new Error('outputRange must have at least 1 element');
	}

	for (const parsed of parsedOutputRange) {
		if (parsed.kind !== kind) {
			throw new TypeError(
				`Cannot interpolate ${kind} values with ${parsed.kind} values`,
			);
		}
	}

	const dimensions = Math.max(
		...parsedOutputRange.map((parsed) => parsed.dimensions),
	);
	const units: [string | null, string | null, string | null, string | null] = [
		null,
		null,
		null,
		null,
	];

	if (kind !== 'scale') {
		for (let axis = 0; axis < dimensions; axis++) {
			if (hasAxisRotation && axis < 3) {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Align every element to the same kind: all translate ("0px", "10px"), all scale ("1", "2"), or all rotate ("0deg", "90deg").
Use separate interpolate() calls per transform type and compose the resulting transform string.

Example fix

// before
interpolate(t, [0, 1], ["0px", "1"]);
// after
interpolate(t, [0, 1], ["0px", "10px"]);

Defensive patterns

Strategy: validation

Validate before calling

function elementKind(value: string | number): 'scale' | 'translate' | 'rotate' | 'transform-origin' {
  if (typeof value === 'number') return 'scale';
  const parts = value.trim().split(/\s+/);
  if (parts.some((p) => /^(left|right|top|bottom|center)$/i.test(p))) return 'transform-origin';
  const kinds = parts.map((p) => {
    const m = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/.exec(p);
    if (!m) return 'unknown';
    if (!m[2]) return 'scale';
    if (['deg','rad','grad','turn'].includes(m[2])) return 'rotate';
    return 'translate';
  });
  return kinds[0] as any;
}

const kinds = outputRange.map(elementKind);
if (!kinds.every((k) => k === kinds[0])) {
  throw new Error(`Mismatched outputRange kinds: ${kinds.join(', ')}`);
}

Prevention

Keep every element of outputRange the same kind (all scale, all translate, all rotate, or all transform-origin).
Avoid conditionally swapping a unit-less number for a length in the same array.

When it happens

Trigger: interpolate(input, inputRange, outputRange) with mismatched element kinds: ["0px", "1"] (translate vs scale), ["90deg", "0px"] (rotate vs translate), ["1", "2px 3px"] (scale vs translate).

Common situations: Conditionally building outputRange from different units at runtime; refactoring a numeric outputRange to strings and forgetting to align kinds; mixing a unitless scale number with a translate length.

Related errors

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