{"record":{"id":"c16940889e22229c","repo":"remotion-dev/remotion","slug":"colors-must-be-an-array-with-at-least-2-colors-c16940","errorCode":null,"errorMessage":"\"colors\" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}","messagePattern":"\"colors\" must be an array with at least 2 colors, but got (.+?)","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/effects/src/zigzag.ts","lineNumber":216,"sourceCode":"\t\t);\n\t}\n};\n\nconst validateNonNegative = (value: number, name: string): void => {\n\tif (value < 0) {\n\t\tthrow new TypeError(\n\t\t\t`\"${name}\" must be greater than or equal to 0, but got ${JSON.stringify(value)}`,\n\t\t);\n\t}\n};\n\nconst validateColors = (colors: unknown): void => {\n\tif (colors === undefined) {\n\t\treturn;\n\t}\n\n\tif (!Array.isArray(colors) || colors.length < 2) {\n\t\tthrow new TypeError(\n\t\t\t`\"colors\" must be an array with at least 2 colors, but got ${JSON.stringify(colors)}`,\n\t\t);\n\t}\n\n\tfor (let i = 0; i < colors.length; i++) {\n\t\tassertRequiredColor(colors[i], `colors[${i}]`);\n\t}\n};\n\nconst validateDirection = (direction: unknown): void => {\n\tif (direction === undefined) {\n\t\treturn;\n\t}\n\n\tif (\n\t\ttypeof direction !== 'string' ||\n\t\t!ZIGZAG_DIRECTIONS.includes(direction as ZigzagDirection)\n\t) {","sourceCodeStart":198,"sourceCodeEnd":234,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/zigzag.ts#L198-L234","documentation":"Zigzag requires a colors array with at least two entries (it samples a 1-D palette texture indexed by stripe position, so a single color is meaningless). validateColors throws a TypeError if colors is omitted-but-not-undefined, not an array, or has fewer than two elements; each entry must then pass assertRequiredColor (a non-empty string). Note undefined is allowed because colors defaults to ['#dff4ff','#7cc6ff'].","triggerScenarios":"Calling zigzag({colors: []}), zigzag({colors: ['#ff0000']}), zigzag({colors: null}), zigzag({colors: 'red'}), or zigzag({colors: 42}).","commonSituations":"Passing a single-color array expecting a solid fill; passing a CSS color string instead of an array; spreading a possibly-empty list; setting colors from data that may contain one item.","solutions":["Always provide at least two color strings: zigzag({colors: ['#ff0000', '#00ff00']}).","If building the list dynamically, guard length before passing: colors.length >= 2 ? colors : undefined (lets the default apply).","Ensure each entry is a parseable CSS color string, not an object or empty string."],"exampleFix":"// before\nzigzag({colors: []});            // throws\nzigzag({colors: ['#ff0000']});    // throws\nzigzag({colors: '#ff0000'});      // throws\n\n// after\nzigzag({colors: ['#ff0000', '#00ff00']});\nzigzag({colors: list.length >= 2 ? list : undefined});","handlingStrategy":"type-guard","validationCode":"import {zigzag} from '@remotion/effects';\n\nconst colors = userInputColors; // unknown shape\n\nif (!Array.isArray(colors) || colors.length < 2 ||\n    !colors.every((c) => typeof c === 'string' && c.length > 0)) {\n  // fall back to default palette by omitting colors\n  zigzag({});\n} else {\n  zigzag({colors: colors as [string, string, ...string[]]});\n}","typeGuard":"const isZigzagColors = (v: unknown): v is [string, string, ...string[]] =>\n  Array.isArray(v) &&\n  v.length >= 2 &&\n  v.every((c) => typeof c === 'string' && c.length > 0);\n\n// usage:\nzigzag({colors: isZigzagColors(colors) ? colors : undefined});","tryCatchPattern":"try {\n  return <VideoEffects effects={[zigzag({colors})]} />;\n} catch (err) {\n  if (err instanceof TypeError && /colors.*array with at least 2/.test(err.message)) {\n    return <VideoEffects effects={[zigzag({colors: ['#dff4ff', '#7cc6ff']})]} />;\n  }\n  throw err;\n}","preventionTips":["Always pass at least two parseable CSS color strings in colors.","When colors come from dynamic data, guard length and element type, or pass undefined to use the default palette.","Do not pass a single-element array, a bare string, or null."],"tags":["validation","typescript","api-misuse","effect-params"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}