From b80eff4aea70d2e19baa2bdf8ef49523c96df846 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 15 Jun 2026 19:33:33 +1000
Subject: [PATCH] Match annotation preview layer to camera transform

---
 src/components/video-editor/VideoPlayback.tsx | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 581378d0..9e3a2228 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -3363,27 +3363,27 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 							</div>
 						) : null}
 						<div
-							className="absolute"
+							className="absolute inset-0"
 							style={{
 								pointerEvents: "none",
-								left: 0,
-								top: 0,
-								width:
-									annotationRecordingRect.width ||
-									(overlayRef.current?.clientWidth || 800),
-								height:
-									annotationRecordingRect.height ||
-									(overlayRef.current?.clientHeight || 600),
-								transform: `translate(${
-									(annotationRecordingRect.x || 0) * annotationSceneTransform.scale +
-									annotationSceneTransform.x
-								}px, ${
-									(annotationRecordingRect.y || 0) * annotationSceneTransform.scale +
-									annotationSceneTransform.y
-								}px) scale(${annotationSceneTransform.scale})`,
+								transform: `matrix(${annotationSceneTransform.scale}, 0, 0, ${annotationSceneTransform.scale}, ${annotationSceneTransform.x}, ${annotationSceneTransform.y})`,
 								transformOrigin: "top left",
 							}}
 						>
+							<div
+								className="absolute"
+								style={{
+									pointerEvents: "none",
+									left: annotationRecordingRect.x || 0,
+									top: annotationRecordingRect.y || 0,
+									width:
+										annotationRecordingRect.width ||
+										(overlayRef.current?.clientWidth || 800),
+									height:
+										annotationRecordingRect.height ||
+										(overlayRef.current?.clientHeight || 600),
+								}}
+							>
 							{(() => {
 								const filtered = (annotationRegions || []).filter((annotation) => {
 									if (
@@ -3458,6 +3458,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 									/>
 								));
 							})()}
+							</div>
 						</div>
 					</div>
 				)}