remotion-dev/remotion · error · TypeError

blur passed to blurSlide() must be greater than or equal to

Error message

blur passed to blurSlide() must be greater than or equal to 0, received ${blur}

What it means

validateProps for the blurSlide() presentation enforces that the blur prop, when provided, is a number >= 0 (after the finite-number check). A negative blur is physically meaningless for the CSS blur used by the transition, so it throws a TypeError naming the received value.

Source

Thrown at packages/transitions/src/presentations/blur-slide.tsx:202

const validateProps = (props: BlurSlideProps) => {
	const direction = props.direction ?? DEFAULT_DIRECTION;
	const blur = props.blur ?? DEFAULT_BLUR;

	if (!VALID_DIRECTIONS.includes(direction)) {
		throw new TypeError(
			`direction passed to blurSlide() must be one of ${VALID_DIRECTIONS.map((d) => `"${d}"`).join(', ')}, received ${JSON.stringify(direction)}`,
		);
	}

	if (typeof blur !== 'number' || !Number.isFinite(blur)) {
		throw new TypeError(
			`blur passed to blurSlide() must be a finite number, received ${blur}`,
		);
	}

	if (blur < 0) {
		throw new TypeError(
			`blur passed to blurSlide() must be greater than or equal to 0, received ${blur}`,
		);
	}
};

export const blurSlideShader = (
	canvas: OffscreenCanvas,
): ReturnType<HtmlInCanvasShader<BlurSlideProps>> => {
	const gl = canvas.getContext('webgl2', {premultipliedAlpha: true});
	if (!gl) {
		throw new Error('Failed to create WebGL2 context');
	}

	const slideProgram = createProgram(gl, SLIDE_FRAGMENT_SHADER);
	const blurProgram = createProgram(gl, BLUR_FRAGMENT_SHADER);
	const prevTex = createTexture(gl);
	const nextTex = createTexture(gl);
	const intermediateTex = createTexture(gl);

View on GitHub (pinned to b2f4e34732)

Solutions

Clamp the blur value: Math.max(0, blur)
Pass a non-negative constant like blur: 10
Fix the interpolation/formula producing negative values
Omit blur to use DEFAULT_BLUR

Example fix

// before
blurSlide({blur: springValue}) // may go negative
// after
blurSlide({blur: Math.max(0, springValue)})

Defensive patterns

Strategy: validation

Validate before calling

const safeBlur = Math.max(0, blur);
if (!Number.isFinite(safeBlur)) throw new TypeError('blur must be finite');

Type guard

const isNonNegative = (v: number): boolean => Number.isFinite(v) && v >= 0;

Try / catch

try {
  presentation = blurSlide({blur: animatedBlur});
} catch (err) {
  if (err instanceof TypeError && err.message.includes('greater than or equal to 0')) {
    presentation = blurSlide({blur: Math.max(0, animatedBlur)});
  }
}

Prevention

Clamp interpolated/animated blur values with Math.max(0, v)
Check easing curves for undershoot below zero
Fix sign errors in formulas that compute blur
Omit blur to use the default

When it happens

Trigger: blurSlide({blur: -5}) or a computed blur (e.g. interpolated value) that dips below zero during animation.

Common situations: Interpolating blur over time with an easing that overshoots below 0; sign errors in formulas deriving blur from other values.

Understand the failure class

Background: "value must be between 0 and 1" / "out of range" / "must not be negative" errors: fixing range-validation failures across open-source libraries — this error's family across 42 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/5021c9ef0d75c225. Report an issue: GitHub.