From 82521d5551e39392d98098297ee86f39a981450f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Apr 2026 09:47:09 +0000
Subject: [PATCH] kasuti: current vertex red on active side + one-shot ping
 ring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The active-side current vertex is red (primary) again; the green is
reserved for the go-indicators. A ring pulses briefly (SMIL animate
on r + opacity, keyed on side+vertex) each time the cursor lands,
to draw the eye — browsers won't let us move the OS mouse pointer.

https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw
---
 .../interactives/KasutiEmbroidery.tsx         | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/components/interactives/KasutiEmbroidery.tsx b/src/components/interactives/KasutiEmbroidery.tsx
index 6aa0a99..902fce1 100644
--- a/src/components/interactives/KasutiEmbroidery.tsx
+++ b/src/components/interactives/KasutiEmbroidery.tsx
@@ -1129,19 +1129,44 @@ const FabricPanel: React.FC<FabricPanelProps> = ({
               />
             )}
 
-            {/* Current vertex marker — full colour on the active side, grey on the other */}
-            {currentVertex && (
-              <circle
-                cx={toXY(currentVertex).x}
-                cy={toXY(currentVertex).y}
-                r={4}
-                className={
-                  isActive
-                    ? 'fill-green-600 dark:fill-green-400'
-                    : 'fill-muted-foreground/60'
+            {/* Current vertex marker — red on the active side, muted grey on the other.
+                A ring briefly expands each time the marker moves or the side flips
+                (the browser won't let us move the OS mouse pointer, so this draws
+                the eye instead). */}
+            {currentVertex &&
+              (() => {
+                const { x, y } = toXY(currentVertex);
+                if (!isActive) {
+                  return (
+                    <circle cx={x} cy={y} r={4} className="fill-muted-foreground/60" />
+                  );
                 }
-              />
-            )}
+                return (
+                  <g key={`cur-${side}-${vKey(currentVertex)}`}>
+                    <circle cx={x} cy={y} r={4} className="fill-primary/60">
+                      <animate
+                        attributeName="r"
+                        from="4"
+                        to="18"
+                        dur="0.65s"
+                        begin="0s"
+                        repeatCount="1"
+                        fill="freeze"
+                      />
+                      <animate
+                        attributeName="opacity"
+                        from="0.6"
+                        to="0"
+                        dur="0.65s"
+                        begin="0s"
+                        repeatCount="1"
+                        fill="freeze"
+                      />
+                    </circle>
+                    <circle cx={x} cy={y} r={4} className="fill-primary" />
+                  </g>
+                );
+              })()}
 
             {/* Click overlays: only active side accepts clicks */}
             {isActive &&