What causes "The 'frame' prop of must be a real number, but it is NaN." in remotion-dev/remotion?

Trace the NaN to its source: log the operands of the frame expression.

remotion-dev/remotion · error · Error

The 'frame' prop of <Freeze /> must be a real number, but…

Error message

The 'frame' prop of <Freeze /> must be a real number, but it is NaN.

What it means

Thrown by <Freeze /> when frame is the value NaN. This typically results from an arithmetic bug (0/0, parsing failure, undefined math) rather than a missing prop.

Solutions

Trace the NaN to its source: log the operands of the frame expression.
Default the operands: frame={(a ?? 0) / (b ?? 1)}.
Guard before render: if (Number.isNaN(frame)) return null;.
Use Remotion's interpolate with clamp to avoid undefined math.

Example fix

// before
const frame = Number(input.offset) / step; // NaN when input.offset undefined
<Freeze frame={frame}>{scene}</Freeze>

// after
const offset = typeof input.offset === 'number' ? input.offset : 0;
<Freeze frame={offset / step}>{scene}</Freeze>

Defensive patterns

Strategy: validation

Validate before calling

const frame = computeFrame(input);
if (Number.isNaN(frame)) {
  console.warn('frame resolved to NaN; defaulting to 0');
  return <Freeze frame={0}>{children}</Freeze>;
}
return <Freeze frame={frame}>{children}</Freeze>;

Type guard

const isRealNumber = (v: unknown): v is number => typeof v === 'number' && !Number.isNaN(v);

Prevention

Default operands in frame arithmetic (a ?? 0, b ?? 1).
Log intermediate values when computing frames from optional input.
Use interpolate with clamp rather than hand-rolled division.

When it happens

Trigger: Passing frame={someCalc} where someCalc evaluated to NaN — e.g. Number(undefined), parseInt failure, or division by zero.

Common situations: Frame computed from optional input props that resolved to undefined then coerced via Number(); broken arithmetic in a frame-calculation helper.

Related errors

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

Appendix: source

Thrown at packages/core/src/freeze.tsx:41

	active = true,
}) => {
	const frame = useCurrentFrame();
	const videoConfig = useVideoConfig();

	if (typeof frameToFreeze === 'undefined') {
		throw new Error(
			`The <Freeze /> component requires a 'frame' prop, but none was passed.`,
		);
	}

	if (typeof frameToFreeze !== 'number') {
		throw new Error(
			`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frameToFreeze}`,
		);
	}

	if (Number.isNaN(frameToFreeze)) {
		throw new Error(
			`The 'frame' prop of <Freeze /> must be a real number, but it is NaN.`,
		);
	}

	if (!Number.isFinite(frameToFreeze)) {
		throw new Error(
			`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`,
		);
	}

	const isActive = useMemo(() => {
		if (typeof active === 'boolean') {
			return active;
		}

		if (typeof active === 'function') {
			return active(frame);
		}

View on GitHub (pinned to 46a3a6bf13)