{"record":{"id":"fa71d57c70efa529","repo":"remotion-dev/remotion","slug":"colorb-must-be-a-string","errorCode":null,"errorMessage":"\"colorB\" must be a string","messagePattern":"\"colorB\" must be a string","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/brand/src/effects/metallic-swirl-effect.ts","lineNumber":355,"sourceCode":"\tassertOptionalFiniteNumber(params.colorRange, 'colorRange');\n\tassertOptionalFiniteNumber(params.colorBias, 'colorBias');\n\tassertOptionalFiniteNumber(params.brightness, 'brightness');\n\tassertOptionalFiniteNumber(params.opacity, 'opacity');\n\tassertOptionalEnum(params.mode, 'mode', MODES);\n\n\tif (\n\t\tparams.backgroundColor !== undefined &&\n\t\ttypeof params.backgroundColor !== 'string'\n\t) {\n\t\tthrow new TypeError('\"backgroundColor\" must be a string');\n\t}\n\n\tif (params.colorA !== undefined && typeof params.colorA !== 'string') {\n\t\tthrow new TypeError('\"colorA\" must be a string');\n\t}\n\n\tif (params.colorB !== undefined && typeof params.colorB !== 'string') {\n\t\tthrow new TypeError('\"colorB\" must be a string');\n\t}\n\n\tconst resolved = resolve(params);\n\tvalidateRange(resolved.speed, 'speed', 0, 10);\n\tvalidateRange(resolved.zoom, 'zoom', 0.01, 50);\n\tvalidateRange(resolved.iterations, 'iterations', 1, 12);\n\tvalidateRange(resolved.sampleGap, 'sampleGap', 0.0001, 1);\n\tvalidateRange(resolved.colorRange, 'colorRange', 0, 2);\n\tvalidateRange(resolved.colorBias, 'colorBias', 0, 2);\n\tvalidateRange(resolved.brightness, 'brightness', 0, 5);\n\tvalidateRange(resolved.opacity, 'opacity', 0, 1);\n\tparseHexColor(resolved.backgroundColor, 'backgroundColor');\n\tparseHexColor(resolved.colorA, 'colorA');\n\tparseHexColor(resolved.colorB, 'colorB');\n};\n\nconst VERTEX_SHADER = /* glsl */ `#version 300 es\nin vec2 aPos;","sourceCodeStart":337,"sourceCodeEnd":373,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/brand/src/effects/metallic-swirl-effect.ts#L337-L373","documentation":"`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.","triggerScenarios":"`metallicSwirl({colorB: 0x0047ff})`, `metallicSwirl({colorB: null})`, `metallicSwirl({colorB: {r:0,g:71,b:255}})`, `metallicSwirl({colorB: true})`.","commonSituations":"Numeric color codes; color objects from third-party pickers; null meaning 'unset'; boolean flags.","solutions":["Pass a hex string: `metallicSwirl({colorB: '#0047ff'})`.","Omit the key to use the default color B.","Convert color objects to `#RRGGBB` at your boundary.","Use `undefined`, not `null`, for 'unset'."],"exampleFix":"// before\nmetallicSwirl({colorB: {r: 0, g: 71, b: 255}});\n\n// after\nconst toHex = (r, g, b) => '#' + [r, g, b].map(n => n.toString(16).padStart(2, '0')).join('');\nmetallicSwirl({colorB: toHex(0, 71, 255)});","handlingStrategy":"type-guard","validationCode":"const optionalString = (v: unknown): string | undefined => {\n  if (v === undefined || v === null) return undefined;\n  if (typeof v !== 'string') {\n    throw new Error('colorB must be a string');\n  }\n  return v;\n};\nmetallicSwirl({colorB: optionalString(raw.colorB)});","typeGuard":"const isOptionalString = (v: unknown): v is string =>\n  typeof v === 'string';","tryCatchPattern":null,"preventionTips":["Pass hex strings for colorB; convert color objects to `#RRGGBB` first.","Omit the key to use the default colorB instead of passing null.","Type params as `MetallicSwirlParams` so non-strings fail at compile time.","Keep color picker output as hex strings end-to-end."],"tags":["brand","metallic-swirl","validation","color","params"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}