remotion-dev/remotion · error · TypeError

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

Error message

Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}

What it means

Thrown by parseTransformOriginLengthPercentage when a transform-origin component (the x/y slot, or the z slot) does not match the CSS number regex /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/. Remotion's interpolate() accepts CSS transform-origin strings only when each non-keyword component is a number optionally followed by a unit. The message distinguishes the length-percentage axes (x/y) from the z-length axis via the allowPercentage flag.

Source

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

	}

	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'}`,
		);
	}

	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 ||
		!lengthUnits.has(unit) ||
		(!allowPercentage && unit === '%')
	) {
		throw new TypeError(

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Replace the offending component with a number plus a length unit, e.g. "left 50%" or "center 10px".
If you intended a non-numeric value (e.g. a color), use a numeric/tuple outputRange instead of a transform-origin string.
Keep the z component (third part) a pure length (no %): "center center 20px".

Example fix

// before
interpolate(t, [0, 1], ["left bad", "right 50%"]);
// after
interpolate(t, [0, 1], ["left 0%", "right 50%"]);

Defensive patterns

Strategy: validation

Validate before calling

const cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
const transformOriginKeywords = new Set(['left','center','right','top','bottom']);

function isValidTransformOriginComponent(part: string, allowPercentage: boolean): boolean {
  if (transformOriginKeywords.has(part.toLowerCase())) return true;
  const m = cssNumberRegex.exec(part);
  if (!m) return false;
  if (!Number.isFinite(Number(m[1]))) return false;
  const unit = m[2] ?? null;
  if (unit === null) return false;
  if (!allowPercentage && unit === '%') return false;
  return true;
}

// before calling interpolate, validate each transform-origin string:
const parts = output.trim().split(/\s+/);
const ok = parts.length >= 1 && parts.length <= 3
  && parts.every((p, i) => isValidTransformOriginComponent(p, i < 2));

Type guard

function isTransformOriginString(value: string): boolean {
  try {
    const parts = value.trim().split(/\s+/);
    if (parts.length < 1 || parts.length > 3) return false;
    if (!parts.every((p) => /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/.test(p)
        || /^(left|center|right|top|bottom)$/i.test(p))) return false;
    return true;
  } catch {
    return false;
  }
}

Prevention

Always pair transform-origin keywords with a number plus a length unit (%, px, em, etc.).
Reserve the third (z) component for a non-% length.
Run a quick regex check on author-facing strings before passing them to interpolate().

When it happens

Trigger: Call interpolate(input, inputRange, outputRange) where an outputRange string contains a transform-origin keyword (left/right/top/bottom/center) so it is routed to parseTransformOriginValue, AND a sibling component is not parseable as a number+unit. Examples: "left xyz" (xyz fails the regex on the x/y axis), "top #ff0000", "center center bogus" (bogus fails on the z axis).

Common situations: Passing color strings, CSS functions like calc(...) or var(...), comma-separated values, or typos such as "lef" into a transform-origin slot. Also using a keyword plus a non-numeric token (e.g. "center auto").

Related errors

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