remotion-dev/remotion · error · Error

input ${input} is not a valid transform. Must be a number or

Error message

input ${input} is not a valid transform. Must be a number or a string ending in one of the following units: ${lengthUnits.join(', ')}

What it means

Thrown by isUnitWithString when the string ends with a valid unit but does not match the number+unit regex /([0-9.]+)([a-z%]+)/. The suffix is recognized but the numeric prefix is missing or malformed, so the value cannot be used as a transform dimension.

Source

Thrown at packages/animation-utils/src/transformation-helpers/make-transform/is-unit-with-string.ts:18

import {lengthUnits} from '../../type';

export const isUnitWithString = (input: unknown, units: readonly string[]) => {
	if (typeof input !== 'string') {
		return false;
	}

	if (!units.find((u) => input.endsWith(u))) {
		throw new Error(
			`input ${input} does not end with a valid unit. Valid units are: ${units.join(
				', ',
			)}`,
		);
	}

	const match = input.match(/([0-9.]+)([a-z%]+)/);
	if (!match) {
		throw new Error(
			`input ${input} is not a valid transform. Must be a number or a string ending in one of the following units: ${lengthUnits.join(
				', ',
			)}`,
		);
	}

	return true;
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Provide a numeric value before the unit ('px' -> '0px', 'auto' -> '0px').
Pass a plain number if you want the default unit applied automatically.
Validate user-supplied transform strings with the regex /^([0-9.]+)([a-z%]+)$/ before passing them to a transform helper.

Example fix

// before
translate('auto');   // keyword, no leading number
translate('px');     // unit only, no number

// after
translate('0px');
// or
translate(0);

Defensive patterns

Strategy: type-guard

Validate before calling

const NUM_PLUS_UNIT = /^([0-9.]+)([a-z%]+)$/i;
const isNumberUnitString = (s: string): boolean => NUM_PLUS_UNIT.test(s);
// usage: isNumberUnitString('100px') === true; isNumberUnitString('auto') === false

Type guard

const NUMBER_UNIT_RE = /^([0-9.]+)([a-z%]+)$/i;
const isMeasuredString = (v: unknown): v is string =>
  typeof v === 'string' && NUMBER_UNIT_RE.test(v);

Prevention

Never pass CSS keywords (auto, none) to transform helpers — they require a measured length.
Validate user-supplied transform strings with /^([0-9.]+)([a-z%]+)$/ before passing.
Pass a plain number when you want the default unit applied automatically.

When it happens

Trigger: Passing a keyword like 'auto' or 'none' that happens to end in a unit-like suffix; a unit-only value with no leading number like 'px' or 'deg'; a malformed string like 'apx' where the prefix is non-numeric.

Common situations: Passing CSS keywords (auto/none) to a transform helper that only accepts measured lengths; malformed user input that happens to end in a unit; concatenation bugs that drop the number.

Related errors

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