remotion-dev/remotion · error · TypeError

A "duration" of a spring is NaN, which it must not be

Error message

A "duration" of a spring is NaN, which it must not be

What it means

`validateSpringDuration()` rejects `NaN` for the optional `duration` of a spring because a NaN duration produces NaN outputs for every frame and silently breaks the animation. It throws a `TypeError` with a precise description.

Source

Thrown at packages/core/src/validation/validation-spring-duration.ts:13

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

	if (typeof dur !== 'number') {
		throw new TypeError(
			`A "duration" of a spring must be a "number" but is "${typeof dur}"`,
		);
	}

	if (Number.isNaN(dur)) {
		throw new TypeError(
			'A "duration" of a spring is NaN, which it must not be',
		);
	}

	if (!Number.isFinite(dur)) {
		throw new TypeError(
			'A "duration" of a spring must be finite, but is ' + dur,
		);
	}

	if (dur <= 0) {
		throw new TypeError(
			'A "duration" of a spring must be positive, but is ' + dur,
		);
	}
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Validate before calling: `if (duration != null && Number.isNaN(Number(duration))) return;`.
  2. Default undefined values: `duration: duration ?? undefined` (the validator skips undefined).
  3. Trace the upstream source of the NaN and fix the arithmetic.

Example fix

// before
spring({frame, fps, config, duration: Number(props.dur)}); // NaN when undefined
// after
spring({frame, fps, config, duration: props.dur == null ? undefined : Number(props.dur)});
Defensive patterns

Strategy: validation

Validate before calling

const duration = rawDuration == null ? undefined : Number(rawDuration);
if (duration != null && Number.isNaN(duration)) return;

Type guard

const isValidSpringDuration = (v: unknown): v is number | undefined => v == null || (typeof v === 'number' && !Number.isNaN(v));

Prevention

When it happens

Trigger: Passing `duration: NaN` to `spring()`, typically the result of `Number(undefined)`, `parseInt(undefined)`, or `0/0`.

Common situations: Destructuring `duration` from an optional prop that is not always provided and feeding it straight into `spring()` without an existence check.

Related errors


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