remotion-dev/remotion · error · TypeError

Cannot interpolate ${kind} values with different units on ax

Error message

Cannot interpolate ${kind} values with different units on axis ${axis + 1}: ${units[axis]} and ${unit}

What it means

Thrown by interpolateString when, for a non-scale kind, two outputRange elements declare different units on the same axis (e.g. px on one and em on another for axis 1). Units must agree per axis because Remotion interpolates the numeric values and reattaches a single unit; mismatched units cannot be blended.

Source

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

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

			for (const parsed of parsedOutputRange) {
				const unit = parsed.units[axis];
				if (unit === null) {
					continue;
				}

				if (units[axis] === null) {
					units[axis] = unit;
					continue;
				}

				if (units[axis] !== unit) {
					throw new TypeError(
						`Cannot interpolate ${kind} values with different units on axis ${axis + 1}: ${units[axis]} and ${unit}`,
					);
				}
			}

			if (units[axis] === null) {
				throw new TypeError(
					`Cannot interpolate ${kind} values because axis ${axis + 1} has no unit`,
				);
			}
		}
	}

	const values: [number, number, number, number] = [0, 0, 0, 0];
	for (let axis = 0; axis < dimensions; axis++) {
		values[axis] = interpolateNumber({
			input,
			inputRange,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Pick one unit per axis and use it for every element: ["0px", "10px"].
Pre-convert units before building outputRange (e.g. compute rem to px at the current root font size).

Example fix

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

Defensive patterns

Strategy: validation

Validate before calling

function unitsPerAxis(value: string): string[] {
  return value.trim().split(/\s+/).map((p) => {
    const m = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/.exec(p);
    return m?.[2] ?? '';
  });
}

const grids = (outputRange as string[]).map(unitsPerAxis);
for (let axis = 0; axis < Math.max(...grids.map((g) => g.length)); axis++) {
  const present = grids.map((g) => g[axis]).filter((u) => u);
  if (new Set(present).size > 1) {
    throw new Error(`Unit mismatch on axis ${axis + 1}: ${[...new Set(present)].join(', ')}`);
  }
}

Prevention

Choose one unit per axis and reuse it across every keyframe.
Convert units (rem to px, deg to rad) before building outputRange.

When it happens

Trigger: interpolate(input, inputRange, outputRange) like ["0px", "10em"] (axis 1: px vs em), ["0px 0px", "10px 5vw"] (axis 2: px vs vw), or ["0deg", "1rad"] (rotate axis: deg vs rad).

Common situations: Mixing responsive units (vw/vh/rem) with fixed px across keyframes; refactoring units on only some keyframes; mixing deg with rad for rotate.

Related errors

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