remotion-dev/remotion · error · TypeError

Cannot interpolate "${output}" because it mixes ${kind} and

Error message

Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values

What it means

Thrown by parseStringInterpolationValue when a single outputRange string contains components that parse to different interpolation kinds (scale vs translate vs rotate). All components of one value must share a kind so Remotion can interpolate them on the same axis set; mixing e.g. a unit-less scale number with a length forces an ambiguous interpolation.

Source

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

	const parts = output.trim().split(/\s+/);
	if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
		throw new TypeError(
			`String outputRange values must contain 1 to 3 components, but got "${output}"`,
		);
	}

	if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
		return parseTransformOriginValue(output, parts);
	}

	const parsed = parts.map((part) =>
		parseStringInterpolationComponent(part, output),
	);
	const [{kind}] = parsed;
	for (const part of parsed) {
		if (part.kind !== kind) {
			throw new TypeError(
				`Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values`,
			);
		}
	}

	if (kind === 'scale') {
		const x = parsed[0].value;
		const y = parsed[1]?.value ?? x;
		const z = parsed[2]?.value ?? 1;
		return {
			kind,
			values: [x, y, z, 0],
			units: [null, null, null, null],
			dimensions: parsed.length,
			axisRotation: false,
		};
	}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Keep all components the same kind: "1 2 3" (scale), "1px 2px 3px" (translate), or "1deg 2deg 3deg" (rotate).
  2. Split independent transforms across separate interpolate() calls and compose them in style.transform.

Example fix

// before
interpolate(t, [0, 1], ["1px 90deg", "10px 180deg"]);
// after
const tx = interpolate(t, [0, 1], ["1px", "10px"]);
const rot = interpolate(t, [0, 1], ["90deg", "180deg"]);
// style.transform = `translate(${tx}) rotate(${rot})`
Defensive patterns

Strategy: validation

Validate before calling

const angleUnits = new Set(['deg','rad','grad','turn']);
const lengthUnits = new Set(['px','em','rem','%','vh','vw','pt','pc','cm','mm','in','ch','ex','cap','ic','lh','vmin','vmax','dvh','dvw','svh','svw','lvh','lvw','vb','vi','q','cqb','cqh','cqi','cqmax','cqmin','cqw','rlh']);

function componentKind(part: string): 'scale' | 'translate' | 'rotate' {
  const m = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/.exec(part);
  if (!m) throw new Error(`unparseable component: ${part}`);
  const unit = m[2];
  if (!unit) return 'scale';
  if (angleUnits.has(unit)) return 'rotate';
  if (lengthUnits.has(unit)) return 'translate';
  throw new Error(`unknown unit: ${unit}`);
}

function isHomogeneousString(value: string): boolean {
  const parts = value.trim().split(/\s+/);
  const kinds = parts.map(componentKind);
  return kinds.every((k) => k === kinds[0]);
}

outputRange.filter((o) => typeof o === 'string').forEach((o) => {
  if (!isHomogeneousString(o)) throw new Error(`Mixed kinds in: ${o}`);
});

Prevention

When it happens

Trigger: A multi-component string whose parts disagree: "1px 90deg" (translate + rotate), "1 2px" (scale + translate), "2 1px 3" (scale + translate + scale). The first component's kind is taken as the expected kind and any deviation throws.

Common situations: Authoring a transform shorthand by hand and mixing unit-less scale factors with translate lengths or angles; copy-pasting a full CSS transform() into a single output slot.

Related errors

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