remotion-dev/remotion · error · TypeError

"hueShift" must be <= 360, but got ${hueShift}

Error message

"hueShift" must be <= 360, but got ${hueShift}

What it means

Thrown by the `lightLeak()` validator when `hueShift` exceeds 360. Because 360 degrees is a full hue-wheel rotation (equivalent to 0), anything larger is redundant and treated as invalid input rather than silently wrapped.

Source

Thrown at packages/effects/src/light-leak.ts:72

const resolve = (p: LightLeakEffectParams): LightLeakResolved => ({
	seed: p.seed ?? DEFAULT_SEED,
	hueShift: p.hueShift ?? DEFAULT_HUE_SHIFT,
	progress: p.progress ?? DEFAULT_PROGRESS,
});

const validateLightLeakParams = (params: LightLeakEffectParams): void => {
	assertEffectParamsObject(params, 'lightLeak()');
	assertOptionalFiniteNumber(params.seed, 'seed');
	assertOptionalFiniteNumber(params.hueShift, 'hueShift');
	assertOptionalFiniteNumber(params.progress, 'progress');

	const {hueShift, progress} = resolve(params);
	if (hueShift < 0) {
		throw new TypeError(`"hueShift" must be >= 0, but got ${hueShift}`);
	}

	if (hueShift > 360) {
		throw new TypeError(`"hueShift" must be <= 360, but got ${hueShift}`);
	}

	validateUnitInterval(progress, 'progress');
};

const LIGHT_LEAK_VS = /* glsl */ `#version 300 es
in vec2 aPos;
in vec2 aUv;
out vec2 vUv;
void main() {
	vUv = aUv;
	gl_Position = vec4(aPos, 0.0, 1.0);
}
`;

const LIGHT_LEAK_FS = /* glsl */ `#version 300 es
precision highp float;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

  1. Keep `hueShift` within [0, 360]; subtract 360 if you need an equivalent angle.
  2. Clamp animated hueShift with `extrapolateRight: 'clamp'` and an output max of 360.
  3. Normalize computed hue values with `((n % 360) + 360) % 360` before passing them in.

Example fix

// before
lightLeak({hueShift: 450})

// after
lightLeak({hueShift: 90})
Defensive patterns

Strategy: validation

Validate before calling

if (typeof params.hueShift === 'number') {
  params = {...params, hueShift: ((params.hueShift % 360) + 360) % 360};
}

Type guard

const isHueShiftSafe = (h: number | undefined): boolean =>
  h === undefined || (h >= 0 && h <= 360);

Prevention

When it happens

Trigger: Passing `lightLeak({hueShift: 400})`; animating hueShift with an unclamped interpolate that overshoots above 360; multiplying hueShift by a factor that pushes it past 360.

Common situations: Slider maxed out; spring/physics animations that overshoot; arithmetic that accumulates beyond one rotation.

Related errors


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