What causes ""${name}" must be between 0 and 1, but got ${JSON.stringify(value)}" in remotion-dev/remotion?

Ensure both origin components are between 0 and 1 inclusive (0 = left/top edge, 0.5 = center, 1 = right/bottom edge).

remotion-dev/remotion · error · TypeError

"${name}" must be between 0 and 1, but got ${JSON.stringify(

Error message

"${name}" must be between 0 and 1, but got ${JSON.stringify(value)}

What it means

The skew() effect's validateUvCoordinate helper checks each component of the resolved origin tuple. Both components must be within the inclusive range [0, 1] because they specify a position in UV (normalized) coordinate space. Passing an origin component outside this range throws this TypeError.

Source

Thrown at packages/effects/src/skew.ts:92

});

const assertOptionalUvCoordinate = (value: unknown, name: string): void => {
	if (value === undefined) {
		return;
	}

	if (
		!Array.isArray(value) ||
		value.length !== 2 ||
		value.some((item) => typeof item !== 'number' || !Number.isFinite(item))
	) {
		throw new TypeError(`"${name}" must be a [number, number] tuple`);
	}
};

const validateUvCoordinate = (value: number, name: string): void => {
	if (value < 0 || value > 1) {
		throw new TypeError(
			`"${name}" must be between 0 and 1, but got ${JSON.stringify(value)}`,
		);
	}
};

const validateAngle = (value: number, name: string): void => {
	if (Math.abs(value) >= MAX_ABSOLUTE_ANGLE) {
		throw new TypeError(
			`"${name}" must be greater than -${MAX_ABSOLUTE_ANGLE} and less than ${MAX_ABSOLUTE_ANGLE}, but got ${JSON.stringify(value)}`,
		);
	}
};

const validateSkewParams = (params: SkewParams): void => {
	assertEffectParamsObject(params, 'Skew');
	assertOptionalFiniteNumber(params.x, 'x');
	assertOptionalFiniteNumber(params.y, 'y');
	assertOptionalUvCoordinate(params.origin, 'origin');

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Ensure both origin components are between 0 and 1 inclusive (0 = left/top edge, 0.5 = center, 1 = right/bottom edge).
If you have pixel coordinates, convert them: originX_pixels / width, originY_pixels / height.
Clamp interpolated values: Math.min(1, Math.max(0, value)).
Remember UV coordinates are normalized, not percentages — 50% is 0.5, not 50.

Example fix

// before — pixel coordinates passed as UV
skew({ x: 20, y: 10, origin: [320, 180] })

// after — converted to normalized UV coordinates (for a 640x360 frame)
const [w, h] = [640, 360];
skew({ x: 20, y: 10, origin: [320 / w, 180 / h] })
// or simply use the default center
skew({ x: 20, y: 10 })

Defensive patterns

Strategy: validation

Validate before calling

// Validate and clamp origin components to [0, 1] before calling skew
function normalizeOrigin(origin: [number, number]): [number, number] {
  return origin.map((v) => Math.min(1, Math.max(0, v))) as [number, number];
}

// Or validate strictly:
function assertValidOrigin(origin: [number, number]): void {
  for (const [i, v] of origin.entries()) {
    if (v < 0 || v > 1) {
      throw new Error(`origin[${i}] must be between 0 and 1, got ${v}`);
    }
  }
}

assertValidOrigin(rawOrigin);
skew({ x: 20, origin: rawOrigin });

Type guard

const isValidUvTuple = (v: readonly [number, number]): boolean =>
  v[0] >= 0 && v[0] <= 1 && v[1] >= 0 && v[1] <= 1;

// Usage:
if (isNumberTuple(rawOrigin) && isValidUvTuple(rawOrigin)) {
  skew({ x: 20, origin: rawOrigin });
}

Try / catch

try {
  skew({ x: 20, y: 0, origin: rawOrigin });
} catch (e) {
  if (e instanceof TypeError && e.message.includes('between 0 and 1')) {
    // Clamp to valid range and retry
    const clamped = rawOrigin.map((v) => Math.min(1, Math.max(0, v)));
    skew({ x: 20, y: 0, origin: clamped as [number, number] });
  } else {
    throw e;
  }
}

Prevention

UV coordinates are normalized: 0 = edge, 0.5 = center, 1 = opposite edge.
Convert pixel coordinates to UV before passing: x_pixels / width, y_pixels / height.
Clamp interpolated or computed values to [0, 1] before passing to skew().
Do not pass percentages (0–100) or pixel coordinates as UV coordinates.

When it happens

Trigger: Calling skew({ origin: [1.5, 0.5] }) (first component > 1), skew({ origin: [0.5, -0.2] }) (second component < 0), or skew({ origin: [2, 2] }). This fires after the tuple-shape check passes, so the value is a valid [number, number] but one or both components are out of [0, 1].

Common situations: Passing pixel coordinates instead of normalized UV coordinates; computing origin from a formula that can exceed [0, 1]; confusing UV coordinates (0–1) with pixel coordinates or percentage values (0–100); animation interpolations that overshoot their target range.

Related errors

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