What causes ""rotation" must be between 0 and 90" in remotion-dev/remotion?

Clamp the value into [0, 90] before passing: Math.min(90, Math.max(0, rotation)).

"rotation" must be between 0 and 90

Error message

"rotation" must be between 0 and 90

What it means

The <Tear> effect's `rotation` parameter sets the maximum outward rotation of the torn pieces in degrees and must lie between 0 and 90 inclusive. validateTearParams throws this error after substituting the default (20) when the resolved rotation is negative or above 90. This keeps the tear visually bounded — larger rotations would blow pieces outside the frame region.

Source

Thrown at packages/effects/src/tear.ts:79

	progress: p.progress ?? DEFAULT_PROGRESS,
	angle: p.angle ?? DEFAULT_ANGLE,
	rotation: p.rotation ?? DEFAULT_ROTATION,
	jaggedness: p.jaggedness ?? DEFAULT_JAGGEDNESS,
});

const validateTearParams = (params: TearParams): void => {
	assertEffectParamsObject(params, 'Tear');
	assertOptionalFiniteNumber(params.progress, 'progress');
	assertOptionalFiniteNumber(params.angle, 'angle');
	assertOptionalFiniteNumber(params.rotation, 'rotation');
	assertOptionalFiniteNumber(params.jaggedness, 'jaggedness');
	const r = resolve(params);
	if (r.progress < 0) {
		throw new Error('"progress" must be >= 0');
	}

	if (r.rotation < 0 || r.rotation > 90) {
		throw new Error('"rotation" must be between 0 and 90');
	}

	if (r.jaggedness < 0) {
		throw new Error('"jaggedness" must be >= 0');
	}
};

type TearState = {
	readonly gl: WebGL2RenderingContext;
	readonly program: WebGLProgram;
	readonly vao: WebGLVertexArrayObject;
	readonly vbo: WebGLBuffer;
	readonly texture: WebGLTexture;
	readonly uSource: WebGLUniformLocation | null;
	readonly uAngle: WebGLUniformLocation | null;
	readonly uProgress: WebGLUniformLocation | null;
	readonly uRotation: WebGLUniformLocation | null;
	readonly uJaggedness: WebGLUniformLocation | null;

View on GitHub (pinned to b2f4e34732)

Solutions

Clamp the value into [0, 90] before passing: Math.min(90, Math.max(0, rotation)).
If you meant a larger visual turn, note the API caps at 90 degrees — compose with angle instead.
Check unit assumptions: the value is plain degrees, not radians or percent.
Inspect dynamic sources (random(), spring overshoot) and clamp or set extrapolate: 'clamp'.

Example fix

// before
<Tear rotation={random(`rot-${frame}`) * 200} />

// after
import {random} from 'remotion';
<Tear rotation={Math.min(90, Math.max(0, random(`rot-${frame}`) * 200))} />

Defensive patterns

Strategy: validation

Validate before calling

if (rotation !== undefined && (!Number.isFinite(rotation) || rotation < 0 || rotation > 90)) {
  throw new RangeError(`rotation must be between 0 and 90, got ${rotation}`);
}

Try / catch

try {
  return <Tear rotation={r} ... />;
} catch (e) {
  if (e instanceof Error && e.message.includes('"rotation" must be between 0 and 90')) {
    return <Tear rotation={Math.min(90, Math.max(0, r))} ... />;
  }
  throw e;
}

Prevention

Write a clamp helper clamp(v, 0, 90) and wrap all dynamic rotation values.
Remember the unit is degrees (0–90), not radians or percent.
Clamp outputs of random() and eased/spring values before passing them as rotation.
Keep a props type like {rotation: number} and validate at the boundary where props come from user input.

When it happens

Trigger: Passing <Tear rotation={-5}>, <Tear rotation={120}>, or a dynamic value computed outside 0–90, e.g. a percentage mixed up with degrees (passing 150 instead of 15), or reusing a value configured for a different effect.

Common situations: Feeding the rotation a random or eased value without clamping; confusing radians with degrees or percent-of-screen with degrees; copying params from another effect with a wider rotation range.

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/fb3c2ffc8df757b4. Report an issue: GitHub.