remotion-dev/remotion · error · TypeError

"colorB" must be a string

Error message

"colorB" must be a string

What it means

`validateMetallicSwirlParams` checks `colorB`: if present (`!== undefined`) it must be a `string`, else this throws. Same shape as the colorA/backgroundColor checks; runs before `parseHexColor`, so non-strings fail here first.

Source

Thrown at packages/brand/src/effects/metallic-swirl-effect.ts:355

	assertOptionalFiniteNumber(params.colorRange, 'colorRange');
	assertOptionalFiniteNumber(params.colorBias, 'colorBias');
	assertOptionalFiniteNumber(params.brightness, 'brightness');
	assertOptionalFiniteNumber(params.opacity, 'opacity');
	assertOptionalEnum(params.mode, 'mode', MODES);

	if (
		params.backgroundColor !== undefined &&
		typeof params.backgroundColor !== 'string'
	) {
		throw new TypeError('"backgroundColor" must be a string');
	}

	if (params.colorA !== undefined && typeof params.colorA !== 'string') {
		throw new TypeError('"colorA" must be a string');
	}

	if (params.colorB !== undefined && typeof params.colorB !== 'string') {
		throw new TypeError('"colorB" must be a string');
	}

	const resolved = resolve(params);
	validateRange(resolved.speed, 'speed', 0, 10);
	validateRange(resolved.zoom, 'zoom', 0.01, 50);
	validateRange(resolved.iterations, 'iterations', 1, 12);
	validateRange(resolved.sampleGap, 'sampleGap', 0.0001, 1);
	validateRange(resolved.colorRange, 'colorRange', 0, 2);
	validateRange(resolved.colorBias, 'colorBias', 0, 2);
	validateRange(resolved.brightness, 'brightness', 0, 5);
	validateRange(resolved.opacity, 'opacity', 0, 1);
	parseHexColor(resolved.backgroundColor, 'backgroundColor');
	parseHexColor(resolved.colorA, 'colorA');
	parseHexColor(resolved.colorB, 'colorB');
};

const VERTEX_SHADER = /* glsl */ `#version 300 es
in vec2 aPos;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Pass a hex string: `metallicSwirl({colorB: '#0047ff'})`.
2. Omit the key to use the default color B.
3. Convert color objects to `#RRGGBB` at your boundary.
4. Use `undefined`, not `null`, for 'unset'.

Example fix

// before
metallicSwirl({colorB: {r: 0, g: 71, b: 255}});

// after
const toHex = (r, g, b) => '#' + [r, g, b].map(n => n.toString(16).padStart(2, '0')).join('');
metallicSwirl({colorB: toHex(0, 71, 255)});

const optionalString = (v: unknown): string | undefined => {
  if (v === undefined || v === null) return undefined;
  if (typeof v !== 'string') {
    throw new Error('colorB must be a string');
  }
  return v;
};
metallicSwirl({colorB: optionalString(raw.colorB)});

const isOptionalString = (v: unknown): v is string =>
  typeof v === 'string';

When it happens

Trigger: `metallicSwirl({colorB: 0x0047ff})`, `metallicSwirl({colorB: null})`, `metallicSwirl({colorB: {r:0,g:71,b:255}})`, `metallicSwirl({colorB: true})`.

Common situations: Numeric color codes; color objects from third-party pickers; null meaning 'unset'; boolean flags.

Related errors

• "backgroundColor" must be a string
• "colorA" must be a string
• ${name} params must be an object
• "${name}" must be a finite number
• "${name}" must be between ${min} and ${max}

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