remotion-dev/remotion · error · TypeError

"hueShift" must be a finite number, but got ${JSON.stringify

Error message

"hueShift" must be a finite number, but got ${JSON.stringify(hueShift)}

What it means

LightLeak validates hueShift and throws TypeError if it is not a number or is not finite. hueShift rotates the color wheel of the leak, so a non-numeric value cannot be applied as a CSS/SVG hue rotation.

Source

Thrown at packages/light-leaks/src/LightLeak.tsx:282

	}
> = ({
	seed = 0,
	hueShift = 0,
	durationInFrames,
	style,
	controls,
	...sequenceProps
}) => {
	const {durationInFrames: videoDuration} = useVideoConfig();
	const resolvedDuration = durationInFrames ?? videoDuration;
	if (typeof seed !== 'number' || !Number.isFinite(seed)) {
		throw new TypeError(
			`"seed" must be a finite number, but got ${JSON.stringify(seed)}`,
		);
	}

	if (typeof hueShift !== 'number' || !Number.isFinite(hueShift)) {
		throw new TypeError(
			`"hueShift" must be a finite number, but got ${JSON.stringify(hueShift)}`,
		);
	}

	if (hueShift < 0 || hueShift > 360) {
		throw new RangeError(
			`"hueShift" must be between 0 and 360, but got ${hueShift}`,
		);
	}

	return (
		<Sequence
			durationInFrames={resolvedDuration}
			name="<LightLeak>"
			_remotionInternalDocumentationLink="https://www.remotion.dev/docs/light-leaks/light-leak"
			controls={controls}
			{...sequenceProps}
			style={style}

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Coerce with Number() and validate Number.isFinite before passing.
2. Clamp the computed hueShift into [0,360] before passing (also avoids error 1236).
3. Default to 0 when the source value is missing.

Example fix

// before
<LightLeak hueShift={hueStr} />
// after
const hue = Number(hueStr);
<LightLeak hueShift={Number.isFinite(hue) ? ((hue % 360) + 360) % 360 : 0} />

function toHueShift(v: unknown): number {
  const n = typeof v === 'number' ? v : Number(v);
  return Number.isFinite(n) ? Math.max(0, Math.min(360, n)) : 0;
}

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

When it happens

Trigger: Passing hueShift as a string ('120'), null, NaN, or Infinity; computing hueShift from input that may be undefined.

Common situations: Reading hueShift from controls/JSON as a string; CMS-driven props; arithmetic that produces NaN.

Related errors

• "seed" must be a finite number, but got ${JSON.stringify(see
• "hueShift" must be between 0 and 360, but got ${hueShift}
• animationData should be provided as an object. If you only h
• The layout prop of <Sequence /> expects either "absolute-fil
• You passed to the "trimBefore" prop of your <Sequence> an ar

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