remotion-dev/remotion · error · TypeError

The "playbackRate" props must be a real number, but is ${pla

Error message

The "playbackRate" props must be a real number, but is ${playbackRate}

What it means

Thrown by validatePlaybackRate in @remotion/lottie when `playbackRate` is a number but is NaN or Infinity/Infinity. These values break the frame-time arithmetic used to drive the Lottie animation, so they are rejected even though they are technically of type 'number'. A separate, later check rejects zero and negative values.

Source

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

		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

Sanitize the computed rate with a guard: const rate = Number.isFinite(raw) && raw > 0 ? raw : 1.
Fix the upstream calculation so it never produces NaN/Infinity (check denominators, validate parse results).
Default to a sensible rate when the computed value is not finite.

Example fix

// before
<Lottie src={anim} playbackRate={Number(queryRate)} /> // queryRate may be undefined

// after
const rate = Number(queryRate);
<Lottie src={anim} playbackRate={Number.isFinite(rate) && rate > 0 ? rate : undefined} />

Defensive patterns

Strategy: validation

Validate before calling

const safeRate = (raw: unknown): number | undefined => {
  const n = typeof raw === 'number' ? raw : Number(raw);
  return Number.isFinite(n) && n > 0 ? n : undefined;
};

Type guard

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

Prevention

Guard every computed rate with Number.isFinite before passing it down.
Audit divisions used to derive playbackRate for zero denominators.
Validate parseFloat/Number parse results before use.

When it happens

Trigger: Passing playbackRate={NaN} (e.g. Number(undefined), Number('abc'), 0/0), playbackRate={Infinity} (e.g. 1/0), or playbackRate={-Infinity}. Common when computing the rate from division by zero or from parseFloat on invalid input.

Common situations: Deriving playbackRate from a division whose denominator can be zero, from parseInt/parseFloat on user input that failed to parse, or from arithmetic on undefined values coerced to NaN.

Related errors

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