remotion-dev/remotion · error · Error

Invalid direction: ${direction}

Error message

Invalid direction: ${direction}

What it means

Internal guard in getDirectionVector: the direction prop value reached the switch statement without matching any known direction. Reaching this throw usually means a direction string outside the union was cast to BlurSlideProps['direction'] at runtime (validateProps is not run on this path).

Source

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

	);
	return tex;
};

const getDirectionVector = (
	direction: BlurSlideDirection,
): [number, number] => {
	// v_uv has its origin in the top-left corner, so +y points down.
	switch (direction) {
		case 'from-left':
			return [1, 0];
		case 'from-right':
			return [-1, 0];
		case 'from-top':
			return [0, 1];
		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}`,
		);
	}

View on GitHub (pinned to b2f4e34732)

Solutions

1. Use one of the valid direction literals: 'from-left', 'from-right', 'from-top', 'from-bottom'
2. Trim/normalize the direction string before passing it
3. If the value is dynamic, validate it against VALID_DIRECTIONS before assigning
4. Fix any `as` casts that let invalid strings into the direction prop

Example fix

// before
<BlurSlide direction={"top" as any} />
// after
<BlurSlide direction="from-top" />

const VALID = ['from-left','from-right','from-top','from-bottom'] as const;
if (!VALID.includes(direction as any)) {
  throw new Error(`Invalid direction: ${direction}`);
}

const isDirection = (d: unknown): d is 'from-left'|'from-right'|'from-top'|'from-bottom' =>
  ['from-left','from-right','from-top','from-bottom'].includes(d as string);

try {
  presentation = blurSlide({direction: userInput as any});
} catch (err) {
  if (String(err).startsWith('Invalid direction')) presentation = blurSlide({});
}

When it happens

Trigger: Passing a direction value like 'from-left ' (typo/whitespace), a dynamically computed string, or an object typed as the union via `as any` into the blurSlide presentation props.

Common situations: Props coming from user input, JSON config, or database values where TypeScript's union typing was bypassed; typos like 'top' instead of 'from-top'.

Understand the failure class

Background: Invalid enum value errors: "Unknown type", "Invalid scope", "must be one of" — when a string is not on the library's allowed list — this error's family across 23 libraries.

Related errors

• Emoji ${emoji} not found. Available emojis: ${emojis.map((e)
• The "freeze" prop is not supported on <Html5Audio />. Use <S
• The `<Html5Audio>` tag requires a string for `src`, but got
• You cannot call `getInputProps()` from a <Player>. Instead,
• Cannot call `getInputProps()` - window.remotion_inputProps i

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