From b9571d5d1890e824c8104c06b541fa6e0bb99f97 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Fri, 29 May 2026 23:21:59 +1000
Subject: [PATCH] Refine spotlight click effect preview

---
 src/components/video-editor/SettingsPanel.tsx | 25 ++++++++-----------
 .../videoPlayback/cursorRenderer.ts           | 13 ++++++----
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index fb441bf4..0ac72244 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -550,20 +550,17 @@ function CursorClickEffectPreview({
 				</svg>
 			) : null}
 			{effect === "spotlight" ? (
-				<>
-					<span
-						className="absolute h-12 w-12 rounded-full blur-[8px]"
-						style={{ backgroundColor: hexToRgba(color, 0.18) }}
-					/>
-					<span
-						className="absolute h-9 w-9 rounded-full"
-						style={{ backgroundColor: hexToRgba(color, 0.1) }}
-					/>
-					<span
-						className="absolute h-7 w-7 rounded-full border-[1.5px]"
-						style={{ borderColor: hexToRgba(color, 0.42) }}
-					/>
-				</>
+				<svg
+					className="absolute h-12 w-12"
+					style={{ color: hexToRgba(color, 0.92) }}
+					viewBox="0 0 48 48"
+					aria-hidden="true"
+				>
+					<g fill="none" stroke="currentColor">
+						<circle cx="24" cy="24" r="13.5" strokeWidth="1.5" opacity="0.3" />
+						<circle cx="24" cy="24" r="9.75" strokeWidth="1.7" opacity="0.56" />
+					</g>
+				</svg>
 			) : null}
 			{effect === "echo" ? (
 				<svg
diff --git a/src/components/video-editor/videoPlayback/cursorRenderer.ts b/src/components/video-editor/videoPlayback/cursorRenderer.ts
index 3ede3d17..a7fb89a3 100644
--- a/src/components/video-editor/videoPlayback/cursorRenderer.ts
+++ b/src/components/video-editor/videoPlayback/cursorRenderer.ts
@@ -889,9 +889,10 @@ function drawClickEffectGraphics(
 
 	if (effect === "spotlight") {
 		const glowRadius = baseRadius + reveal * cursorSize * effectScale;
+		const innerRadius = Math.max(baseRadius * 0.72, glowRadius * 0.76);
 		graphics.circle(px, py, glowRadius);
-		graphics.fill({ color, alpha: alpha * 0.16 });
-		graphics.circle(px, py, glowRadius * 0.78);
+		graphics.stroke({ width: Math.max(1.25, strokeWidth * 0.68), color, alpha: alpha * 0.28 });
+		graphics.circle(px, py, innerRadius);
 		graphics.stroke({ width: Math.max(1.5, strokeWidth * 0.75), color, alpha: alpha * 0.5 });
 		return;
 	}
@@ -948,14 +949,16 @@ function drawClickEffectOnCanvas(
 
 	if (effect === "spotlight") {
 		const glowRadius = baseRadius + reveal * cursorSize * effectScale;
-		ctx.fillStyle = `${strokeColor}${(alpha * 0.16).toFixed(3)})`;
+		const innerRadius = Math.max(baseRadius * 0.72, glowRadius * 0.76);
+		ctx.lineWidth = Math.max(1.25, strokeWidth * 0.68);
+		ctx.strokeStyle = `${strokeColor}${(alpha * 0.28).toFixed(3)})`;
 		ctx.beginPath();
 		ctx.arc(px, py, glowRadius, 0, Math.PI * 2);
-		ctx.fill();
+		ctx.stroke();
 		ctx.lineWidth = Math.max(1.5, strokeWidth * 0.75);
 		ctx.strokeStyle = `${strokeColor}${(alpha * 0.5).toFixed(3)})`;
 		ctx.beginPath();
-		ctx.arc(px, py, glowRadius * 0.78, 0, Math.PI * 2);
+		ctx.arc(px, py, innerRadius, 0, Math.PI * 2);
 		ctx.stroke();
 		ctx.restore();
 		return;