remotion-dev/remotion · error · TypeError

blur passed to blurSlide() must be a finite number, received

Error message

blur passed to blurSlide() must be a finite number, received ${blur}

What it means

validateProps throws a TypeError when the blur prop is not a finite number (NaN, Infinity, wrong type, or null/undefined coerced unexpectedly). blur must be a plain finite number to be used in the shader.

Source

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

		case 'from-bottom':
			return [0, -1];
		default:
			throw new Error(`Invalid direction: ${direction}`);
	}
};

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');
	}

View on GitHub (pinned to b2f4e34732)

Solutions

Pass a finite number, e.g. blur: 20
Guard with Number.isFinite(blur) before calling blurSlide()
Fix the upstream computation that yields NaN/Infinity
Omit blur to use DEFAULT_BLUR

Example fix

// before
blurSlide({blur: config.blurAmount}) // could be undefined/NaN
// after
const blur = Number(config.blurAmount);
blurSlide({blur: Number.isFinite(blur) ? blur : 20})

Defensive patterns

Strategy: validation

Validate before calling

if (typeof blur !== 'number' || !Number.isFinite(blur)) {
  throw new TypeError('blur must be a finite number');
}

Type guard

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

Try / catch

try {
  presentation = blurSlide({blur: rawBlur as any});
} catch (err) {
  if (err instanceof TypeError && err.message.includes('blur passed to blurSlide()')) {
    presentation = blurSlide({}); // default blur
  }
}

Prevention

Validate parsed numbers with Number.isFinite before use
Avoid arithmetic that can yield NaN/Infinity when deriving blur
Omit blur to use the library default
Coerce config values with Number() and check the result

When it happens

Trigger: blurSlide({blur: Infinity}), blur: NaN (e.g. from a failed parseFloat), blur: '10' as any, or blur computed from division by zero.

Common situations: Blur values parsed from user input or config files without validation; arithmetic producing NaN/Infinity; JSON configs containing null.

Understand the failure class

Background: "Must be a positive integer", "Invalid value", "Unsupported": the invalid-argument-value error family, when a library rejects the value you pass — this error's family across 35 libraries.

Related errors

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