remotion-dev/remotion · error · Error

bezier x values must be in [0, 1] range

Error message

bezier x values must be in [0, 1] range

What it means

Remotion's bezier() builds a cubic-bezier easing function from four control points (x1,y1,x2,y2), matching CSS cubic-bezier semantics. For the curve to be a mathematically valid function (one y per x), the x control points must lie in [0,1]; the y points may take any value. The guard runs at curve construction and throws immediately on invalid x.

Source

Thrown at packages/core/src/bezier.ts:96

		if (currentSlope === 0.0) {
			return aGuessT;
		}

		const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
		aGuessT -= currentX / currentSlope;
	}

	return aGuessT;
}

export function bezier(
	mX1: number,
	mY1: number,
	mX2: number,
	mY2: number,
): (x: number) => number {
	if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
		throw new Error('bezier x values must be in [0, 1] range');
	}

	// Precompute samples table
	const sampleValues = float32ArraySupported
		? new Float32Array(kSplineTableSize)
		: new Array(kSplineTableSize);
	if (mX1 !== mY1 || mX2 !== mY2) {
		for (let i = 0; i < kSplineTableSize; ++i) {
			sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
		}
	}

	function getTForX(aX: number): number {
		let intervalStart = 0.0;
		let currentSample = 1;
		const lastSample = kSplineTableSize - 1;

		for (

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Clamp x control points to [0,1] before calling bezier: bezier(clamp(x1,0,1), y1, clamp(x2,0,1), y2).
2. Use a known-good preset (Easing.bezier(0.4, 0, 0.2, 1) etc.).
3. Validate the values at the source that produces the curve.

Example fix

// before
const e = bezier(x1, 0, x2, 1); // x1 or x2 may be out of range

// after
const e = bezier(
  Math.min(1, Math.max(0, x1)), 0,
  Math.min(1, Math.max(0, x2)), 1
);

const clamp01 = (n: number): number => Math.min(1, Math.max(0, n));
const fn = bezier(clamp01(x1), y1, clamp01(x2), y2);

const isValidBezierX = (x: number): boolean =>
  typeof x === 'number' && Number.isFinite(x) && x >= 0 && x <= 1;

When it happens

Trigger: Calling bezier(-0.1, 0, 1, 1), bezier(0, 0, 1.5, 1), or passing such values to Easing.bezier / interpolate's easing. Also triggered by dynamically computed control points that drift outside the unit interval due to rounding or bad math.

Common situations: Hand-tuning an easing curve and overshooting; copying a cubic-bezier from a design tool that allows extraneous x; computing control points from animation parameters without clamping.

Related errors

• Cannot interpolate "${value}" because "${component}" is not
• Non-numeric strings can only be interpolated using Easing.st
• inputRange must contain only finite numbers, but got [${arr.
• HtmlInCanvas: `width` must be a positive integer. Received:
• HtmlInCanvas: `height` must be a positive integer. Received:

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