{"record":{"id":"b82d944ec37908c6","repo":"remotion-dev/remotion","slug":"topleft-must-be-above-and-to-the-left-of-bottom","errorCode":null,"errorMessage":"\"topLeft\" must be above and to the left of \"bottomRight\"","messagePattern":"\"topLeft\" must be above and to the left of \"bottomRight\"","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/effects/src/region-blur/index.ts","lineNumber":126,"sourceCode":"\nconst validateRegionBlurParams = (params: RegionBlurParams): void => {\n\tassertEffectParamsObject(params, 'Region blur');\n\tassertRequiredUvCoordinate(params.topLeft, 'topLeft');\n\tassertRequiredUvCoordinate(params.bottomRight, 'bottomRight');\n\tassertOptionalFiniteNumber(params.blurRadius, 'blurRadius');\n\tassertOptionalFiniteNumber(params.feather, 'feather');\n\tassertOptionalFiniteNumber(params.roundness, 'roundness');\n\n\tconst resolved = resolve(params);\n\tvalidateNonNegative(resolved.blurRadius, 'blurRadius');\n\tvalidateNonNegative(resolved.feather, 'feather');\n\tvalidateUnitInterval(resolved.roundness, 'roundness');\n\n\tif (\n\t\tresolved.topLeft[0] >= resolved.bottomRight[0] ||\n\t\tresolved.topLeft[1] >= resolved.bottomRight[1]\n\t) {\n\t\tthrow new TypeError(\n\t\t\t'\"topLeft\" must be above and to the left of \"bottomRight\"',\n\t\t);\n\t}\n};\n\nexport const regionBlur = createEffect<RegionBlurParams, RegionBlurState>({\n\ttype: 'remotion/region-blur',\n\tlabel: 'regionBlur()',\n\tdocumentationLink: 'https://www.remotion.dev/docs/effects/region-blur',\n\tbackend: 'webgl2',\n\tcalculateKey: (params) => {\n\t\tconst resolved = resolve(params);\n\t\treturn `region-blur-${resolved.topLeft.join(':')}-${resolved.bottomRight.join(':')}-${resolved.blurRadius}-${resolved.feather}-${resolved.roundness}`;\n\t},\n\tsetup: (target) => setupRegionBlur(target),\n\tapply: ({source, width, height, params, state, flipSourceY}) => {\n\t\tconst resolved = resolve(params);\n\t\tapplyRegionBlur({","sourceCodeStart":108,"sourceCodeEnd":144,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/effects/src/region-blur/index.ts#L108-L144","documentation":"After resolving defaults and confirming both coordinates are valid tuples, the regionBlur effect checks that topLeft is strictly above and to the left of bottomRight (both x and y components strictly less). If topLeft[0] >= bottomRight[0] or topLeft[1] >= bottomRight[1], the region has zero or negative area and the effect throws a TypeError.","triggerScenarios":"Passing regionBlur({ topLeft: [0.8, 0.2], bottomRight: [0.2, 0.8] }) (x-axis inverted), regionBlur({ topLeft: [0.5, 0.5], bottomRight: [0.5, 0.8] }) (x-axis identical), or any case where the coordinates form a degenerate rectangle.","commonSituations":"Coordinates computed from dynamic layout where the region can collapse to a line; swapped topLeft/bottomRight during refactoring; passing identical points; animations that tween both corners to the same position.","solutions":["Ensure topLeft x < bottomRight x and topLeft y < bottomRight y (note: y increases downward in UV space)","Normalize coordinates before passing: sort the two points so topLeft has the smaller values","In animated sequences, clamp the region to a minimum size (e.g. ensure at least 1px difference)","If the region can legitimately be empty, conditionally omit the effect rather than passing a degenerate rectangle"],"exampleFix":"// before\nregionBlur({ topLeft: [0.8, 0.2], bottomRight: [0.2, 0.8] })\n// after\nconst x1 = 0.2, y1 = 0.2, x2 = 0.8, y2 = 0.8;\nregionBlur({\n  topLeft: [Math.min(x1, x2), Math.min(y1, y2)],\n  bottomRight: [Math.max(x1, x2), Math.max(y1, y2)],\n})","handlingStrategy":"validation","validationCode":"const x1 = 0.2, y1 = 0.2, x2 = 0.8, y2 = 0.8;\nconst topLeft: [number, number] = [Math.min(x1, x2), Math.min(y1, y2)];\nconst bottomRight: [number, number] = [Math.max(x1, x2), Math.max(y1, y2)];\nif (topLeft[0] >= bottomRight[0] || topLeft[1] >= bottomRight[1]) {\n  throw new Error('Degenerate region');\n}\nregionBlur({ topLeft, bottomRight });","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Sort corner coordinates so topLeft always has the smaller x and y values","Ensure animated regions maintain a minimum area at every frame","Conditionally omit the effect when the region would collapse to a line"],"tags":["validation","typescript","geometry","region-blur"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}