remotion-dev/remotion · error · TypeError

"fieldOfView" must be <= ${MAX_FIELD_OF_VIEW}, but got ${JSO

Error message

"fieldOfView" must be <= ${MAX_FIELD_OF_VIEW}, but got ${JSON.stringify(resolved.fieldOfView)}

What it means

Thrown when the resolved fisheye fieldOfView exceeds MAX_FIELD_OF_VIEW (Math.PI). fieldOfView controls the lens angle; values above pi would invert geometry and break the projection math. The default 2.5 is already close to the pi ceiling, so accidental overshoot is the usual cause.

Source

Thrown at packages/effects/src/fisheye/index.ts:132

const validatePositive = (value: number, name: string): void => {
	if (value <= 0) {
		throw new TypeError(
			`"${name}" must be greater than 0, but got ${JSON.stringify(value)}`,
		);
	}
};

const validateFisheyeParams = (params: FisheyeParams): void => {
	assertEffectParamsObject(params, 'Fisheye');
	assertOptionalFiniteNumber(params.fieldOfView, 'fieldOfView');
	assertOptionalUvCoordinate(params.center, 'center');
	assertOptionalFiniteNumber(params.radius, 'radius');
	assertOptionalFiniteNumber(params.zoom, 'zoom');

	const resolved = resolve(params);
	validateNonNegative(resolved.fieldOfView, 'fieldOfView');
	if (resolved.fieldOfView > MAX_FIELD_OF_VIEW) {
		throw new TypeError(
			`"fieldOfView" must be <= ${MAX_FIELD_OF_VIEW}, but got ${JSON.stringify(resolved.fieldOfView)}`,
		);
	}

	validatePositive(resolved.radius, 'radius');
	validatePositive(resolved.zoom, 'zoom');
};

export const fisheye = createEffect<FisheyeParams, FisheyeState>({
	type: 'dev.remotion.effects.fisheye',
	label: 'fisheye()',
	documentationLink: 'https://www.remotion.dev/docs/effects/fisheye',
	backend: 'webgl2',
	calculateKey: (params) => {
		const r = resolve(params);
		return `fisheye-${r.fieldOfView}-${r.center.join(':')}-${r.radius}-${r.zoom}`;
	},
	setup: (target) => setupFisheye(target),

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Cap fieldOfView at Math.PI: fisheye({fieldOfView: Math.min(Math.PI, value)}).
  2. Use interpolate(value, [0,1], [1, Math.PI], {extrapolateRight: 'clamp'}).
  3. Stay in the documented working range (roughly 1 to 3).

Example fix

// before
fisheye({fieldOfView: spring({frame, fps}) * 3});
// after
fisheye({
  fieldOfView: Math.min(
    Math.PI,
    interpolate(spring({frame, fps}) * 3, [0, 3], [1, 3], {
      extrapolateRight: 'clamp',
    }),
  ),
});
Defensive patterns

Strategy: validation

Validate before calling

const MAX_FOV = Math.PI;
const fieldOfView = Math.min(MAX_FOV, Math.max(0, animatedFov));
fisheye({fieldOfView});

Type guard

const isValidFov = (v: unknown): v is number =>
  typeof v === 'number' && Number.isFinite(v) && v > 0 && v <= Math.PI;

Prevention

When it happens

Trigger: fisheye({fieldOfView: 4}), fisheye({fieldOfView: Math.PI + 0.01}), or animating fieldOfView with interpolate/spring without clamping that pushes past ~3.14159.

Common situations: Spring overshoot on fieldOfView; confusing degrees (e.g. 180) with the expected radian-like range; chaining a random() that exceeds bounds.

Related errors


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