outputType must be "font-weight", "scale", "translate"…

Error message

outputType must be "font-weight", "scale", "translate", "rotate", or "transform-origin", but got ${String(outputType)}

What it means

interpolateColors (and related helpers) accepts an `outputType` option that must be one of the string literals 'font-weight', 'scale', 'translate', 'rotate', or 'transform-origin'. Remotion throws this error when any other value is passed, to fail fast instead of producing broken CSS. It is a guard on the public `interpolateColors(input, inputRange, outputRange, options)` API in packages/core/src/interpolate.ts.

Solutions

Check the value passed as `outputType` and use exactly one of: 'font-weight', 'scale', 'translate', 'rotate', 'transform-origin'.
Fix casing: the literals are lowercase kebab-case, e.g. 'transform-origin' not 'transformOrigin'.
If the value comes from a variable, log String(outputType) before the call to see what it actually holds.
If you don't need special CSS-unit handling, omit `outputType` entirely.

Example fix

// before
interpolateColors(0.5, [0, 1], ['#fff', '#000'], {outputType: 'transformOrigin'});
// after
interpolateColors(0.5, [0, 1], ['#fff', '#000'], {outputType: 'transform-origin'});

Defensive patterns

Strategy: validation

Validate before calling

const ALLOWED = ['font-weight','scale','translate','rotate','transform-origin'];
if (outputType !== undefined && !ALLOWED.includes(outputType)) {
  throw new Error(`Invalid outputType: ${String(outputType)}`);
}

Type guard

const isOutputType = (v: unknown): v is 'font-weight'|'scale'|'translate'|'rotate'|'transform-origin' =>
  typeof v === 'string' && ['font-weight','scale','translate','rotate','transform-origin'].includes(v);

Try / catch

try {
  return interpolateColors(input, inputRange, outputRange, {outputType});
} catch (e) {
  if (e instanceof Error && e.message.includes('outputType must be')) {
    console.error(`Bad outputType ${String(outputType)}; allowed: font-weight, scale, translate, rotate, transform-origin`);
  }
  throw e;
}

Prevention

Type the outputType variable with the exported union type so TypeScript rejects typos.
Always use the lowercase kebab-case literals ('transform-origin', not 'transformOrigin').
Log dynamic outputType values before calling interpolateColors.
Omit the option when you don't need CSS-unit handling.

When it happens

Trigger: Calling `interpolateColors` with an options object whose `outputType` is misspelled (e.g. 'translates', 'Translate', 'transformOrigin') or of the wrong type (a number, enum, or variable holding an unexpected value).

Common situations: Typos after refactoring, copying an option from another library, building the options object dynamically from a variable that no longer matches the allowed literals, or passing camelCase instead of the kebab-case literal.

Understand the failure class

Background: Invalid enum value errors: "Unknown type", "Invalid scope", "must be one of" — when a string is not on the library's allowed list — this error's family across 23 libraries.

Related errors

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

Appendix: source

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

		`output must be "linear" or "perceptual-scale", but got ${String(output)}`,
	);
}

function assertValidInterpolateOutputType(
	outputType: InterpolateOptions['outputType'],
) {
	if (
		outputType === undefined ||
		outputType === 'font-weight' ||
		outputType === 'scale' ||
		outputType === 'translate' ||
		outputType === 'rotate' ||
		outputType === 'transform-origin'
	) {
		return;
	}

	throw new Error(
		`outputType must be "font-weight", "scale", "translate", "rotate", or "transform-origin", but got ${String(outputType)}`,
	);
}

/*
 * @description Allows you to map a range of values to another using a concise syntax.
 * @see [Documentation](https://remotion.dev/docs/interpolate)
 */
/* eslint-disable no-redeclare */
export function interpolate(
	input: number,
	inputRange: readonly number[],
	outputRange: readonly number[],
	options?: InterpolateOptions,
): number;
export function interpolate(
	input: number,
	inputRange: readonly number[],

View on GitHub (pinned to 46a3a6bf13)