remotion-dev/remotion · error · UnsupportedStringInterpolationValueError

Cannot interpolate "${value}" because "${component}" is not

Error message

Cannot interpolate "${value}" because "${component}" is not a supported scale, translate, or rotate value

What it means

Thrown by the string-interpolation path of interpolate() when a component of an interpolated transform value (scale/translate/rotate) does not match the expected <number><unit?> pattern. interpolate can animate CSS-transform-like strings, but each comma-separated component must be a plain number or a number with a recognized unit.

Source

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

const transformOriginCenter: TransformOriginAxisValue = {value: 50, unit: '%'};

const stringifyNumber = (value: number): string => {
	return String(normalizeNumber(value));
};

class UnsupportedStringInterpolationValueError extends TypeError {}

const parseStringInterpolationComponent = (
	component: string,
	value: string,
): {
	kind: StringInterpolationKind;
	value: number;
	unit: string | null;
} => {
	const match = cssNumberRegex.exec(component);
	if (match === null) {
		throw new UnsupportedStringInterpolationValueError(
			`Cannot interpolate "${value}" because "${component}" is not a supported scale, translate, or rotate value`,
		);
	}

	const unit = match[2] ?? null;
	const numberValue = Number(match[1]);
	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};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Ensure every component is a number optionally followed by a unit, e.g. '100px', '50%', '45deg', or a bare number for scale.
2. If interpolating transforms, prefer one unit per kind (all px, or all deg) and avoid mixing keyword tokens.
3. Log the failing component string (the second quoted token in the message) to locate the bad segment.

Example fix

// before
interpolate(frame, [0, 100], ['translateX(px)', 'translateX(100px)']);

// after
interpolate(frame, [0, 100], ['translateX(0px)', 'translateX(100px)']);

const COMPONENT_RE = /^[+-]?(?:\d+\.?\d*|\.\d+)([a-zA-Z%]+)?$/;
function assertTransformComponents(value: string): void {
  for (const part of value.split(/[\s,()]+/).filter(Boolean)) {
    if (!COMPONENT_RE.test(part) && !/^[a-zA-Z]+$/.test(part)) {
      throw new TypeError(`Bad transform component: ${part} in ${value}`);
    }
  }
}
outputRange.forEach(assertTransformComponents);

const isTransformComponent = (c: string): boolean => /^[+-]?(?:\d+\.?\d*|\.\d+)([a-zA-Z%]+)?$/.test(c);

When it happens

Trigger: Passing interpolate an output range of strings like 'translateX(abc)' or '50px 25px junk' where a component is not a number-with-optional-unit; missing numeric value in a transform segment.

Common situations: Animating transform strings with malformed segments; concatenating user input into the output range without validation; copy-paste that drops the number.

Related errors

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

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