remotion-dev/remotion · error · TypeError

"${name}" must be between ${min} and ${max}

Error message

"${name}" must be between ${min} and ${max}

What it means

`validateRange` runs after `resolve()` fills defaults, so every numeric field is checked against its schema min/max even if the caller omitted it. Fields and bounds: speed 0–10, zoom 0.01–50, iterations 1–12, sampleGap 0.0001–1, tangentForce -5–5, gradientForce -5–5, colorRange 0–2, colorBias 0–2, brightness 0–5, opacity 0–1. A value outside its range throws with the bounds in the message.

Source

Thrown at packages/brand/src/effects/metallic-swirl-effect.ts:292

	name: keyof MetallicSwirlParams,
): void => {
	if (value === undefined) {
		return;
	}

	if (typeof value !== 'number' || !Number.isFinite(value)) {
		throw new TypeError(`"${name}" must be a finite number`);
	}
};

const validateRange = (
	value: number,
	name: keyof MetallicSwirlParams,
	min: number,
	max: number,
): void => {
	if (value < min || value > max) {
		throw new TypeError(`"${name}" must be between ${min} and ${max}`);
	}
};

const assertOptionalEnum = <T extends string>(
	value: unknown,
	name: keyof MetallicSwirlParams,
	variants: readonly T[],
): void => {
	if (value === undefined) {
		return;
	}

	if (typeof value !== 'string' || !variants.includes(value as T)) {
		throw new TypeError(`"${name}" must be one of ${variants.join(', ')}`);
	}
};

const parseHexColor = (hex: string, name: keyof MetallicSwirlParams): Rgb => {

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Clamp the value to the documented range before passing: `Math.min(10, Math.max(0, speed))`.
2. Check the message for the exact min/max, then constrain your input/UI to that range.
3. If you genuinely need a wider range, animate around the default and keep the field within bounds.
4. Validate form input before submission.

Example fix

// before
metallicSwirl({speed: userInput}); // userInput may be 100

// after
const speed = Math.min(10, Math.max(0, Number(userInput)));
metallicSwirl({speed});

// Clamp each numeric param to its schema range before passing.
const RANGES = {
  speed: [0, 10], zoom: [0.01, 50], iterations: [1, 12],
  sampleGap: [0.0001, 1], tangentForce: [-5, 5], gradientForce: [-5, 5],
  colorRange: [0, 2], colorBias: [0, 2], brightness: [0, 5], opacity: [0, 1],
} as const;

const clamp = (v: number, [min, max]: readonly [number, number]) =>
  Math.min(max, Math.max(min, v));

metallicSwirl({speed: clamp(Number(raw.speed), RANGES.speed)});

When it happens

Trigger: `metallicSwirl({speed: 100})` (>10), `metallicSwirl({zoom: 0})` (<0.01), `metallicSwirl({opacity: 2})` (>1), `metallicSwirl({iterations: 20})` (>12), `metallicSwirl({sampleGap: 0})` (<0.0001).

Common situations: Slider/Form inputs without clamp; copying values from a different effect with different bounds; user-typed values that exceed the documented range; animating a value that briefly overshoots.

Related errors

• ${name} params must be an object
• "${name}" must be a finite number
• "${name}" must be one of ${variants.join(', ')}
• "backgroundColor" must be a string
• "colorA" must be a string

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