{"record":{"id":"59a685659908e347","repo":"remotion-dev/remotion","slug":"cannot-interpolate-kind-values-with-different-u","errorCode":null,"errorMessage":"Cannot interpolate ${kind} values with different units on axis ${axis + 1}: ${units[axis]} and ${unit}","messagePattern":"Cannot interpolate (.+?) values with different units on axis (.+?): (.+?) and (.+?)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate.ts","lineNumber":839,"sourceCode":"\tif (kind !== 'scale') {\n\t\tfor (let axis = 0; axis < dimensions; axis++) {\n\t\t\tif (hasAxisRotation && axis < 3) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tfor (const parsed of parsedOutputRange) {\n\t\t\t\tconst unit = parsed.units[axis];\n\t\t\t\tif (unit === null) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (units[axis] === null) {\n\t\t\t\t\tunits[axis] = unit;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tif (units[axis] !== unit) {\n\t\t\t\t\tthrow new TypeError(\n\t\t\t\t\t\t`Cannot interpolate ${kind} values with different units on axis ${axis + 1}: ${units[axis]} and ${unit}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (units[axis] === null) {\n\t\t\t\tthrow new TypeError(\n\t\t\t\t\t`Cannot interpolate ${kind} values because axis ${axis + 1} has no unit`,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst values: [number, number, number, number] = [0, 0, 0, 0];\n\tfor (let axis = 0; axis < dimensions; axis++) {\n\t\tvalues[axis] = interpolateNumber({\n\t\t\tinput,\n\t\t\tinputRange,","sourceCodeStart":821,"sourceCodeEnd":857,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/interpolate.ts#L821-L857","documentation":"Thrown by interpolateString when, for a non-scale kind, two outputRange elements declare different units on the same axis (e.g. px on one and em on another for axis 1). Units must agree per axis because Remotion interpolates the numeric values and reattaches a single unit; mismatched units cannot be blended.","triggerScenarios":"interpolate(input, inputRange, outputRange) like [\"0px\", \"10em\"] (axis 1: px vs em), [\"0px 0px\", \"10px 5vw\"] (axis 2: px vs vw), or [\"0deg\", \"1rad\"] (rotate axis: deg vs rad).","commonSituations":"Mixing responsive units (vw/vh/rem) with fixed px across keyframes; refactoring units on only some keyframes; mixing deg with rad for rotate.","solutions":["Pick one unit per axis and use it for every element: [\"0px\", \"10px\"].","Pre-convert units before building outputRange (e.g. compute rem to px at the current root font size)."],"exampleFix":"// before\ninterpolate(t, [0, 1], [\"0px\", \"10em\"]);\n// after\ninterpolate(t, [0, 1], [\"0px\", \"160px\"]);","handlingStrategy":"validation","validationCode":"function unitsPerAxis(value: string): string[] {\n  return value.trim().split(/\\s+/).map((p) => {\n    const m = /^([+-]?(?:\\d+\\.?\\d*|\\.\\d+))([a-zA-Z%]+)?$/.exec(p);\n    return m?.[2] ?? '';\n  });\n}\n\nconst grids = (outputRange as string[]).map(unitsPerAxis);\nfor (let axis = 0; axis < Math.max(...grids.map((g) => g.length)); axis++) {\n  const present = grids.map((g) => g[axis]).filter((u) => u);\n  if (new Set(present).size > 1) {\n    throw new Error(`Unit mismatch on axis ${axis + 1}: ${[...new Set(present)].join(', ')}`);\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Choose one unit per axis and reuse it across every keyframe.","Convert units (rem to px, deg to rad) before building outputRange."],"tags":["interpolate","string-interpolation","units","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}