fix: enable smooth spring animations between card hovers

Fixed spring animation not working when moving between cards:

ISSUE:
- Avatar would jump instantly to new position instead of smoothly gliding
- The 'from' config was preventing spring from animating position changes

SOLUTION:
- Remove 'from' entirely from spring config
- Use simple spring with immediate flag for first render only
- Track isFirstRender with useRef to skip initial animation
- After first render, all position changes animate smoothly

HOW IT WORKS:
1. First hover: immediate:true - Avatar appears instantly at position
2. isFirstRender flag cleared after position is set
3. Subsequent hovers: immediate:false - Spring animates smoothly
4. Position updates trigger spring to animate x,y to new values
5. Config (tension:280, friction:60) provides smooth glide

RESULT:
- First hover: Avatar appears instantly (no fly-in)
- Moving between cards: Avatar smoothly glides with spring physics
- Feels like watching remote player's mouse cursor move

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/arcade/matching/components/MemoryGrid.tsx

@@ -93,14 +93,13 @@ function HoverAvatar({
   cardElement: HTMLElement | null
 }) {
   const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
+  const isFirstRender = useRef(true)
 
   // Update position when card element changes
   useEffect(() => {
     if (cardElement) {
       const rect = cardElement.getBoundingClientRect()
       // Calculate the actual position we want the avatar centered at (top-right of card)
-      // Since we're using translate(-50%, -50%), we need the center point
-      const avatarSize = 48
       const avatarCenterX = rect.right - 12 // 12px from right edge
       const avatarCenterY = rect.top - 12 // 12px from top edge
 
@@ -112,23 +111,25 @@ function HoverAvatar({
   }, [cardElement])
 
   // Smooth spring animation for position changes
-  // Use 'from' to set initial position when avatar first appears
   const springProps = useSpring({
-    from: position
-      ? { x: position.x, y: position.y, opacity: 0 }
-      : { x: 0, y: 0, opacity: 0 },
-    to: {
-      x: position?.x ?? 0,
-      y: position?.y ?? 0,
-      opacity: position ? 1 : 0,
-    },
+    x: position?.x ?? 0,
+    y: position?.y ?? 0,
+    opacity: position ? 1 : 0,
     config: {
       tension: 280,
       friction: 60,
       mass: 1,
     },
+    immediate: isFirstRender.current, // Skip animation on first render only
   })
 
+  // Clear first render flag after initial render
+  useEffect(() => {
+    if (position && isFirstRender.current) {
+      isFirstRender.current = false
+    }
+  }, [position])
+
   // Don't render until we have a position
   if (!position) return null