remotion-dev/remotion · error · TypeError

The "playbackRate" prop must be a number or undefined, but i

Error message

The "playbackRate" prop must be a number or undefined, but is ${JSON.stringify(playbackRate)}

What it means

validatePlaybackRate rejects any `playbackRate` prop that is not undefined or a number; it separately rejects NaN and non-finite values. The component then applies this rate to the Lottie timeline, so a non-numeric value would break frame mapping.

Source

Thrown at packages/lottie/src/validate-playbackrate.ts:7

export const validatePlaybackRate = (playbackRate: unknown) => {
	if (typeof playbackRate === 'undefined') {
		return;
	}

	if (typeof playbackRate !== 'number') {
		throw new TypeError(
			`The "playbackRate" prop must be a number or undefined, but is ${JSON.stringify(
				playbackRate,
			)}`,
		);
	}

	if (Number.isNaN(playbackRate) || !Number.isFinite(playbackRate)) {
		throw new TypeError(
			`The "playbackRate" props must be a real number, but is ${playbackRate}`,
		);
	}

	if (playbackRate <= 0) {
		throw new TypeError(
			`The "playbackRate" props must be positive, but is ${playbackRate}`,
		);
	}
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Pass a finite positive/negative number; use 1 for normal speed.
2. Coerce with Number() and validate Number.isFinite before passing.
3. If the source may be missing, fall back to 1 (or omit the prop).
4. Avoid 0 — it stops the animation; use delayRender/Sequence instead.

Example fix

// before
<Lottie animationData={anim} playbackRate={'2x'} />
// after
const rate = Number(rawRate);
<Lottie animationData={anim} playbackRate={Number.isFinite(rate) && rate !== 0 ? rate : 1} />

function asPlaybackRate(v: unknown): number | undefined {
  if (typeof v === 'undefined') return undefined;
  const n = Number(v);
  return Number.isFinite(n) && n !== 0 ? n : 1;
}

const isFinitePlaybackRate = (v: unknown): v is number =>
  typeof v === 'number' && Number.isFinite(v) && v !== 0;

When it happens

Trigger: Passing playbackRate as a string (e.g. '2'), null, or a value computed from arithmetic that yields NaN/Infinity.

Common situations: Reading playbackRate from config/URL as a string; computing rate = base/speed where speed can be 0; passing 0 thinking it means 'normal' (use 1 for normal).

Related errors

• animationData should be provided as an object. If you only h
• The "loop" prop must be a boolean or undefined, but is "${JS
• The layout prop of <Sequence /> expects either "absolute-fil
• You passed to the "trimBefore" prop of your <Sequence> an ar
• The `<Html5Audio>` tag requires a string for `src`, but got

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