What causes ""hueShift" must be between 0 and 360, but got ${hueShift}" in remotion-dev/remotion?

Wrap the value with modulo: `((hue % 360) + 360) % 360`.

remotion-dev/remotion · error · RangeError

"hueShift" must be between 0 and 360, but got ${hueShift}

Error message

"hueShift" must be between 0 and 360, but got ${hueShift}

What it means

LightLeak throws a RangeError when hueShift is a finite number but outside the inclusive range [0,360]. Hue is an angle in degrees, so values outside this band are not meaningful for the rotation applied to the texture.

Source

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

	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}
		>
			<LightLeakCanvas seed={seed} hueShift={hueShift} />
		</Sequence>
	);
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Wrap the value with modulo: `((hue % 360) + 360) % 360`.
Use interpolate(..., {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}).
Validate the range before passing to LightLeak.

Example fix

// before
const hue = interpolate(frame, [0, 100], [0, 720]);
<LightLeak hueShift={hue} />
// after
const hue = interpolate(frame, [0, 100], [0, 360], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'});
<LightLeak hueShift={hue} />

Defensive patterns

Strategy: validation

Validate before calling

function clampHue(h: number): number {
  return ((Number(h) % 360) + 360) % 360;
}

Type guard

const isHueInRange = (v: unknown): v is number =>
  typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 360;

Prevention

Wrap hueShift with modulo before passing: ((h % 360) + 360) % 360.
Use interpolate(..., {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}).
Validate range in a wrapper component to centralize the clamp.
Treat hue as degrees, not a 0..1 normalized float.

When it happens

Trigger: Passing hueShift = -10, 400, or any value outside 0..360; animating hueShift without clamping extrapolation.

Common situations: Using interpolate() without extrapolateLeft/Right:'clamp'; passing a raw 0..1 normalized float instead of degrees; building hueShift from user input that is unbounded.

Related errors

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