remotion-dev/remotion · error · TypeError

Cannot interpolate "${value}" because "${unit}" is not a sup

Error message

Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit

What it means

Thrown by interpolate's string parser when a component has a unit that is neither a CSS angle unit (deg, rad, grad, turn) nor a CSS length unit (px, %, em, rem, vh, etc.). Bare numbers are treated as scale, angles as rotate, lengths as translate; anything else is rejected.

Source

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

	if (!Number.isFinite(numberValue)) {
		throw new TypeError(
			`Cannot interpolate "${value}" because "${component}" is not finite`,
		);
	}

	if (unit === null) {
		return {kind: 'scale', value: numberValue, unit: null};
	}

	if (angleUnits.has(unit)) {
		return {kind: 'rotate', value: numberValue, unit};
	}

	if (lengthUnits.has(unit)) {
		return {kind: 'translate', value: numberValue, unit};
	}

	throw new TypeError(
		`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`,
	);
};

const parseTransformOriginLengthPercentage = ({
	component,
	value,
	allowPercentage,
}: {
	component: string;
	value: string;
	allowPercentage: boolean;
}): TransformOriginAxisValue => {
	const match = cssNumberRegex.exec(component);
	if (match === null) {
		throw new TypeError(
			`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`,
		);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Use only supported units: angles (deg, rad, grad, turn), lengths (px, %, em, rem, vw/vh, and the rest of the lengthUnits set), or no unit for scale.
2. Convert time-based units (s/ms) into the corresponding numeric value and animate separately.
3. Fix typos in the unit string (e.g. 'pix' -> 'px').

Example fix

// before
interpolate(frame, [0, 100], ['rotate(0trn)', 'rotate(90trn)']); // 'trn' unsupported

// after
interpolate(frame, [0, 100], ['rotate(0turn)', 'rotate(90turn)']);

const SUPPORTED_UNITS = new Set(['deg','rad','grad','turn','%','px','em','rem','vh','vw','vmin','vmax','cm','mm','in','pt','pc','ch','ex']);
function assertUnit(unit: string): void {
  if (!SUPPORTED_UNITS.has(unit)) {
    throw new TypeError(`Unsupported transform unit: ${unit}`);
  }
}

const isSupportedUnit = (u: string): boolean => SUPPORTED_UNITS.has(u);

When it happens

Trigger: Using an unsupported unit such as 's' (seconds), 'ms', 'dpi', 'fr', or a typo like 'pix' inside an interpolated transform string.

Common situations: Assuming any CSS unit is animatable; copy-paste of CSS values that include non-transform units; unit typos.

Related errors

• input ${input} does not end with a valid unit. Valid units a
• input ${input} is not a valid transform. Must be a number or
• Cannot interpolate "${value}" because "${component}" is not
• Cannot interpolate "${value}" because "${component}" is not
• The start and end values must be of the same type. Start val

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