{"record":{"id":"516909eab4f57959","repo":"remotion-dev/remotion","slug":"the-name-prop-of-componentname-must-be-bet","errorCode":null,"errorMessage":"The \"${name}\" prop of ${componentName} must be between 0 and 1, but got ${value}. The crop range is 0 to 1, not 0 to 100.","messagePattern":"The \"(.+?)\" prop of (.+?) must be between 0 and 1, but got (.+?)\\. The crop range is 0 to 1, not 0 to 100\\.","errorType":"exception","errorClass":"RangeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/sequence-crop.ts","lineNumber":99,"sourceCode":"};\n\nexport const validateSequenceCrop = (\n\tcrop: SequenceCropInput,\n\tcomponentName = '<Sequence />',\n): void => {\n\tfor (const [name, value] of Object.entries(crop)) {\n\t\tif (value === undefined) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (typeof value !== 'number' || !Number.isFinite(value)) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`The \"${name}\" prop of ${componentName} must be a finite number, but got ${String(value)}.`,\n\t\t\t);\n\t\t}\n\n\t\tif (value > 100) {\n\t\t\tthrow new RangeError(\n\t\t\t\t`The \"${name}\" prop of ${componentName} must be between 0 and 1, but got ${value}. The crop range is 0 to 1, not 0 to 100.`,\n\t\t\t);\n\t\t}\n\t}\n};\n","sourceCodeStart":81,"sourceCodeEnd":105,"githubUrl":"https://github.com/remotion-dev/remotion/blob/10db9de07356446fb0edb3c3ae211369b693d18b/packages/core/src/sequence-crop.ts#L81-L105","documentation":"The Sequence crop props (cropLeft, cropRight, cropTop, cropBottom) are fractions of the frame in the range 0 to 1, not percentages. validateSequenceCrop() first rejects non-finite values with a TypeError, then throws this RangeError when a value exceeds 100 - a threshold chosen to catch percentage-scale values (e.g. 150 for 'crop 150%'). Note that values between 1 and 100 are silently clamped to 1 (full crop), so this error specifically means the value is far outside the valid scale.","triggerScenarios":"Passing cropLeft/cropRight/cropTop/cropBottom > 100 to <Sequence> (or any component using useCropStyle / RegularSequenceRefForwardingFunction). Validation runs on every render of the sequence.","commonSituations":"Porting CSS or design-tool crop values expressed in percent (cropLeft={25} style units) into the crop props; computing crop from data in 0-100 scale (e.g. audio volume percentages) and passing it through without dividing by 100; copy-pasting crop values from an API that uses 0-100.","solutions":["Express crop as a fraction: divide percent values by 100 (cropLeft={25} becomes cropLeft={0.25})","If the value comes from external data, normalize it once at the boundary: cropLeft={value / 100}","Check every crop prop on the throwing <Sequence> - the message names the exact prop and component"],"exampleFix":"// before - percent-style values\n<Sequence cropLeft={25} cropBottom={100}>...</Sequence>\n\n// after - fractions between 0 and 1\n<Sequence cropLeft={0.25} cropBottom={1}>...</Sequence>","handlingStrategy":"validation","validationCode":"// Run before passing props to <Sequence>\nconst assertCropProps = (crop: {\n  cropLeft?: number;\n  cropRight?: number;\n  cropTop?: number;\n  cropBottom?: number;\n}) => {\n  for (const [name, value] of Object.entries(crop)) {\n    if (value === undefined) continue;\n    if (typeof value !== 'number' || !Number.isFinite(value) || value > 100) {\n      throw new Error(\n        `Invalid ${name}=${String(value)}: crop values are fractions 0-1, not percent`,\n      );\n    }\n  }\n};\n\nassertCropProps({cropLeft: input.left / 100, cropBottom: input.bottom / 100});","typeGuard":"const isCropFraction = (v: unknown): v is number =>\n  typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 1;","tryCatchPattern":null,"preventionTips":["Always author crop values as fractions (0.25, not 25)","Normalize external 0-100 data once at the API boundary (divide by 100)","Remember values in (1, 100] do not throw - they clamp to a full crop, so lint for crop values > 1 in code review"],"tags":["remotion","sequence","crop","validation","range-error","percent-vs-fraction"],"backgroundTag":"percent-vs-fraction-value","analyzedSha":"10db9de07356446fb0edb3c3ae211369b693d18b","analyzedAt":"2026-08-22T21:45:17.748Z","contentChangedAt":"2026-08-22T21:45:17.748Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}