diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 3fc31a40..d619034a 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -76,10 +76,15 @@ import {
SPEED_OPTIONS,
} from "./types";
import { fromCursorSwaySliderValue, toCursorSwaySliderValue } from "./videoPlayback/cursorSway";
-import { cursorSetAssets } from "./videoPlayback/uploadedCursorAssets";
+import {
+ cursorSetAssets,
+ getCursorStyleSizeMultiplier,
+} from "./videoPlayback/uploadedCursorAssets";
import { getWebcamPositionForPreset, resolveWebcamCorner } from "./webcamOverlay";
const tahoeCursorUrl = cursorSetAssets.tahoe.arrow.url;
+const BUILTIN_CURSOR_PREVIEW_SIZE = 28;
+const BUILTIN_CURSOR_PREVIEW_FRAME_SIZE = 48;
const GRADIENTS = [
"linear-gradient( 111.6deg, rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
@@ -653,14 +658,27 @@ function CursorStylePreview({
? (previewUrls["tahoe-inverted"] ?? tahoeCursorUrl)
: previewUrls[style];
- if (style === "macos" || style === "tahoe") {
+ if (style === "macos" || style === "tahoe" || style === "tahoe-inverted") {
+ const previewSize = BUILTIN_CURSOR_PREVIEW_SIZE * getCursorStyleSizeMultiplier(style);
return (
-
+
+

+
);
}
diff --git a/src/components/video-editor/videoPlayback/cursorRenderer.ts b/src/components/video-editor/videoPlayback/cursorRenderer.ts
index 13dae641..f34503ad 100644
--- a/src/components/video-editor/videoPlayback/cursorRenderer.ts
+++ b/src/components/video-editor/videoPlayback/cursorRenderer.ts
@@ -17,7 +17,7 @@ import {
resetSpringState,
stepSpringValue,
} from "./motionSmoothing";
-import { cursorSetAssets } from "./uploadedCursorAssets";
+import { cursorSetAssets, getCursorStyleSizeMultiplier } from "./uploadedCursorAssets";
type CursorAssetKey = NonNullable;
type StatefulCursorStyle = Extract;
@@ -95,14 +95,6 @@ const CURSOR_SHADOW_OFFSET_X = 0;
const CURSOR_SHADOW_OFFSET_Y = 2;
const CURSOR_SHADOW_BLUR = 3;
const CURSOR_SHADOW_PADDING = 12;
-const MACOS_POINTER_RAW_HEIGHT = 746;
-const TAHOE_POINTER_RAW_HEIGHT = 958;
-const CURSOR_STYLE_SIZE_MULTIPLIERS: Record = {
- macos: TAHOE_POINTER_RAW_HEIGHT / MACOS_POINTER_RAW_HEIGHT,
- tahoe: 1,
- "tahoe-inverted": 1,
-};
-
let cursorAssetsPromise: Promise | null = null;
let cursorPackAssetsPromise: Promise | null = null;
let loadedCursorPackSourcesSignature = "";
@@ -163,10 +155,6 @@ function isSingleCursorStyle(style: CursorStyle): style is SingleCursorStyle {
return style === "dot" || style === "figma";
}
-function getCursorStyleSizeMultiplier(style: CursorStyle) {
- return isStatefulCursorStyle(style) ? CURSOR_STYLE_SIZE_MULTIPLIERS[style] : 1;
-}
-
function resolveCursorPackVariant(cursorType: CursorAssetKey): CursorPackVariant {
return CURSOR_PACK_POINTER_TYPES.has(cursorType) ? "pointer" : "default";
}
diff --git a/src/components/video-editor/videoPlayback/uploadedCursorAssets.ts b/src/components/video-editor/videoPlayback/uploadedCursorAssets.ts
index 53256e5a..38faffba 100644
--- a/src/components/video-editor/videoPlayback/uploadedCursorAssets.ts
+++ b/src/components/video-editor/videoPlayback/uploadedCursorAssets.ts
@@ -21,6 +21,16 @@ import type { CursorStyle, CursorTelemetryPoint } from "../types";
type CursorAssetKey = NonNullable;
type CursorSetStyle = Extract;
+const MACOS_POINTER_ASSET_HEIGHT = 746;
+const MACOS_POINTER_CONTENT_HEIGHT = 386;
+const TAHOE_POINTER_ASSET_HEIGHT = 958;
+const TAHOE_POINTER_CONTENT_HEIGHT = 851;
+
+// Measured from the raw pointer assets using the non-shadow pixel bounds.
+const MACOS_CURSOR_STYLE_SIZE_MULTIPLIER =
+ (TAHOE_POINTER_CONTENT_HEIGHT / TAHOE_POINTER_ASSET_HEIGHT) /
+ (MACOS_POINTER_CONTENT_HEIGHT / MACOS_POINTER_ASSET_HEIGHT);
+
export type UploadedCursorAsset = {
url: string;
fallbackAnchor: {
@@ -67,4 +77,16 @@ export const cursorSetAssets: Record<
},
};
+export const cursorStyleSizeMultipliers: Record = {
+ macos: MACOS_CURSOR_STYLE_SIZE_MULTIPLIER,
+ tahoe: 1,
+ "tahoe-inverted": 1,
+};
+
+export function getCursorStyleSizeMultiplier(style: CursorStyle) {
+ return style in cursorStyleSizeMultipliers
+ ? cursorStyleSizeMultipliers[style as CursorSetStyle]
+ : 1;
+}
+
export const uploadedCursorAssets = cursorSetAssets.tahoe;