{"record":{"id":"3ce0d4e5554fbfdd","repo":"remotion-dev/remotion","slug":"cannot-interpolate-value-because-component","errorCode":null,"errorMessage":"Cannot interpolate \"${value}\" because \"${component}\" is not a supported scale, translate, or rotate value","messagePattern":"Cannot interpolate \"(.+?)\" because \"(.+?)\" is not a supported scale, translate, or rotate value","errorType":"exception","errorClass":"UnsupportedStringInterpolationValueError","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate.ts","lineNumber":145,"sourceCode":"const transformOriginCenter: TransformOriginAxisValue = {value: 50, unit: '%'};\n\nconst stringifyNumber = (value: number): string => {\n\treturn String(normalizeNumber(value));\n};\n\nclass UnsupportedStringInterpolationValueError extends TypeError {}\n\nconst parseStringInterpolationComponent = (\n\tcomponent: string,\n\tvalue: string,\n): {\n\tkind: StringInterpolationKind;\n\tvalue: number;\n\tunit: string | null;\n} => {\n\tconst match = cssNumberRegex.exec(component);\n\tif (match === null) {\n\t\tthrow new UnsupportedStringInterpolationValueError(\n\t\t\t`Cannot interpolate \"${value}\" because \"${component}\" is not a supported scale, translate, or rotate value`,\n\t\t);\n\t}\n\n\tconst unit = match[2] ?? null;\n\tconst numberValue = Number(match[1]);\n\tif (!Number.isFinite(numberValue)) {\n\t\tthrow new TypeError(\n\t\t\t`Cannot interpolate \"${value}\" because \"${component}\" is not finite`,\n\t\t);\n\t}\n\n\tif (unit === null) {\n\t\treturn {kind: 'scale', value: numberValue, unit: null};\n\t}\n\n\tif (angleUnits.has(unit)) {\n\t\treturn {kind: 'rotate', value: numberValue, unit};","sourceCodeStart":127,"sourceCodeEnd":163,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/interpolate.ts#L127-L163","documentation":"Thrown by the string-interpolation path of interpolate() when a component of an interpolated transform value (scale/translate/rotate) does not match the expected <number><unit?> pattern. interpolate can animate CSS-transform-like strings, but each comma-separated component must be a plain number or a number with a recognized unit.","triggerScenarios":"Passing interpolate an output range of strings like 'translateX(abc)' or '50px 25px junk' where a component is not a number-with-optional-unit; missing numeric value in a transform segment.","commonSituations":"Animating transform strings with malformed segments; concatenating user input into the output range without validation; copy-paste that drops the number.","solutions":["Ensure every component is a number optionally followed by a unit, e.g. '100px', '50%', '45deg', or a bare number for scale.","If interpolating transforms, prefer one unit per kind (all px, or all deg) and avoid mixing keyword tokens.","Log the failing component string (the second quoted token in the message) to locate the bad segment."],"exampleFix":"// before\ninterpolate(frame, [0, 100], ['translateX(px)', 'translateX(100px)']);\n\n// after\ninterpolate(frame, [0, 100], ['translateX(0px)', 'translateX(100px)']);","handlingStrategy":"validation","validationCode":"const COMPONENT_RE = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)([a-zA-Z%]+)?$/;\nfunction assertTransformComponents(value: string): void {\n  for (const part of value.split(/[\\s,()]+/).filter(Boolean)) {\n    if (!COMPONENT_RE.test(part) && !/^[a-zA-Z]+$/.test(part)) {\n      throw new TypeError(`Bad transform component: ${part} in ${value}`);\n    }\n  }\n}\noutputRange.forEach(assertTransformComponents);","typeGuard":"const isTransformComponent = (c: string): boolean => /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)([a-zA-Z%]+)?$/.test(c);","tryCatchPattern":null,"preventionTips":["Keep each transform component as number-with-optional-unit.","Avoid keyword tokens (other than scale/translate/rotate names) inside interpolated strings.","Log the failing component (second quoted token) to locate bad segments."],"tags":["interpolate","transform","css","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}