diff --git a/web/src/components/settings/MotionMaskEditPane.tsx b/web/src/components/settings/MotionMaskEditPane.tsx
index eec5c9a38..e73409f50 100644
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@@ -73,6 +73,29 @@ export default function MotionMaskEditPane({
return `Motion Mask ${count + 1}`;
}, [polygons]);
+ const polygonArea = useMemo(() => {
+ if (polygon && polygon.isFinished && scaledWidth && scaledHeight) {
+ const points = interpolatePoints(
+ polygon.points,
+ scaledWidth,
+ scaledHeight,
+ 1,
+ 1,
+ );
+
+ const n = points.length;
+ let area = 0;
+
+ for (let i = 0; i < n; i++) {
+ const [x1, y1] = points[i];
+ const [x2, y2] = points[(i + 1) % n];
+ area += x1 * y2 - y1 * x2;
+ }
+
+ return Math.abs(area) / 2;
+ }
+ }, [polygon, scaledWidth, scaledHeight]);
+
const formSchema = z
.object({
polygon: z.object({ name: z.string(), isFinished: z.boolean() }),
@@ -238,6 +261,28 @@ export default function MotionMaskEditPane({