outputRange must contain strings with the appropriate CSS…

Error message

${outputType} outputRange must contain strings with the appropriate CSS units

What it means

For outputType 'translate', 'rotate', or 'transform-origin' (anything except 'scale'), the outputRange must contain strings carrying CSS units (e.g. '100px', '45deg'). Remotion throws a TypeError when the outputRange has no string entries at all, since unitless numbers cannot express these CSS transforms.

Solutions

Add CSS units to every string in the outputRange, e.g. ['0px','100px'] for translate or ['0deg','90deg'] for rotate.
Ensure outputRange contains at least one string when outputType is not 'scale'.
If unitless numbers are intended, use outputType: 'scale' instead.
Use template strings to attach units: `${value}px`.

Example fix

// before
interpolateColors(progress, [0, 1], [0, 100], {outputType: 'translate'});
// after
interpolateColors(progress, [0, 1], ['0px', '100px'], {outputType: 'translate'});

Defensive patterns

Strategy: validation

Validate before calling

if (outputType && outputType !== 'scale' &&
    !outputRange.some((o) => typeof o === 'string')) {
  throw new TypeError(`${outputType} outputRange needs strings with CSS units, e.g. '100px' or '45deg'`);
}

Type guard

const hasUnitStrings = (r: unknown[]): r is string[] =>
  r.some((o) => typeof o === 'string' && /^[\d.-]+(px|deg|%|em|rem|vh|vw)$/.test(o));

Try / catch

try {
  return interpolateColors(input, inputRange, outputRange, {outputType});
} catch (e) {
  if (e instanceof TypeError && e.message.includes('must contain strings with the appropriate CSS units')) {
    console.error(`outputRange ${JSON.stringify(outputRange)} lacks CSS units for ${outputType}`);
  }
  throw e;
}

Prevention

Attach units to transform values: px for translate, deg for rotate.
Remember only 'scale' accepts (effectively) unitless numeric ranges.
Build ranges with template strings (`${v}px`) so units are never forgotten.
Double-check ranges when changing outputType between 'scale' and other types.

When it happens

Trigger: Calling `interpolateColors(..., {outputType: 'translate'|'rotate'|'transform-origin'})` with a purely numeric outputRange like [0, 100] instead of ['0px', '100px'].

Common situations: Passing plain numbers because scale-like usage worked before, switching outputType from 'scale' to 'translate' without updating the range, or forgetting units such as px/deg/% in the range strings.

Understand the failure class

Background: "Invalid ... format", "must be in format X", "does not look like a ..." — invalid argument format errors across CLI tools and libraries — this error's family across 17 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-09-18). Data as JSON: /api/errors/12b18a1579b214f3. Report an issue: GitHub.

Appendix: source

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

		) {
			throw new TypeError(
				'Font weight outputRange must contain only numbers or strings',
			);
		}

		return interpolateFontWeight({
			input,
			inputRange,
			outputRange,
			options,
		});
	}

	const hasStringOutput = outputRange.some(
		(output) => typeof output === 'string',
	);
	if (outputType !== undefined && outputType !== 'scale' && !hasStringOutput) {
		throw new TypeError(
			`${outputType} outputRange must contain strings with the appropriate CSS units`,
		);
	}

	if (hasStringOutput) {
		if (
			!outputRange.every(
				(output) => typeof output === 'string' || typeof output === 'number',
			)
		) {
			throw new TypeError(
				'outputRange must contain only numbers, or supported scale, translate, and rotate strings',
			);
		}

		try {
			return interpolateString({
				input,

View on GitHub (pinned to 46a3a6bf13)