chore(release): 2.16.0 [skip ci]

## [2.16.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.15.0...v2.16.0) (2025-10-09)

### Features

* fade out hover avatar when player stops hovering ([820eeb4](820eeb4fb0))

CHANGELOG.md

@@ -1,3 +1,38 @@
+## [2.16.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.15.0...v2.16.0) (2025-10-09)
+
+
+### Features
+
+* fade out hover avatar when player stops hovering ([820eeb4](https://github.com/antialias/soroban-abacus-flashcards/commit/820eeb4fb03ad8be6a86dd0a26e089052224f427))
+
+## [2.15.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.3...v2.15.0) (2025-10-09)
+
+
+### Features
+
+* implement smooth hover avatar animations with react-spring ([442c6b4](https://github.com/antialias/soroban-abacus-flashcards/commit/442c6b4529ba5c820b1fe8a64805a3d85489a8ea))
+
+## [2.14.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.2...v2.14.3) (2025-10-09)
+
+
+### Bug Fixes
+
+* enable smooth spring animations between card hovers ([8d53b58](https://github.com/antialias/soroban-abacus-flashcards/commit/8d53b589aa17ebc6d0a9251b3006fd8a90f90a61))
+
+## [2.14.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.1...v2.14.2) (2025-10-09)
+
+
+### Bug Fixes
+
+* correct avatar positioning to prevent fly-in animation ([573d0df](https://github.com/antialias/soroban-abacus-flashcards/commit/573d0df20dcdac41021c46feb423dbf3782728f6))
+
+## [2.14.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.14.0...v2.14.1) (2025-10-09)
+
+
+### Bug Fixes
+
+* prevent avatar fly-in and hide local player's own hover ([7f65a67](https://github.com/antialias/soroban-abacus-flashcards/commit/7f65a67cef3d7f0ebce1bd7417972a6138acfc46))
+
 ## [2.14.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.13.0...v2.14.0) (2025-10-09)
 
 

apps/web/.claude/settings.local.json

@@ -9,7 +9,8 @@
       "Bash(git push:*)",
       "Bash(git pull:*)",
       "Bash(git stash:*)",
-      "Bash(npm run format:*)"
+      "Bash(npm run format:*)",
+      "Bash(npm run pre-commit:*)"
     ],
     "deny": [],
     "ask": []

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

@@ -87,57 +87,79 @@ function HoverAvatar({
   playerId,
   playerInfo,
   cardElement,
+  isPlayersTurn,
 }: {
   playerId: string
   playerInfo: { emoji: string; name: string; color?: string }
   cardElement: HTMLElement | null
+  isPlayersTurn: boolean
 }) {
-  const [position, setPosition] = useState({ x: 0, y: 0 })
+  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 center of the card for avatar positioning
+      const avatarCenterX = rect.left + rect.width / 2
+      const avatarCenterY = rect.top + rect.height / 2
+
       setPosition({
-        x: rect.right - 12, // Position at top-right of card
-        y: rect.top - 12,
+        x: avatarCenterX,
+        y: avatarCenterY,
       })
     }
   }, [cardElement])
 
   // Smooth spring animation for position changes
   const springProps = useSpring({
-    x: position.x,
-    y: position.y,
+    x: position?.x ?? 0,
+    y: position?.y ?? 0,
+    opacity: position && isPlayersTurn && cardElement ? 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
+
   return (
     <animated.div
       style={{
         position: 'fixed',
-        left: springProps.x,
-        top: springProps.y,
-        width: '48px',
-        height: '48px',
+        // Don't use translate, just position directly at the calculated point
+        left: springProps.x.to((x) => `${x}px`),
+        top: springProps.y.to((y) => `${y}px`),
+        opacity: springProps.opacity,
+        width: '80px',
+        height: '80px',
+        marginLeft: '-40px', // Center horizontally (half of width)
+        marginTop: '-40px', // Center vertically (half of height)
         borderRadius: '50%',
         background: playerInfo.color || 'linear-gradient(135deg, #667eea, #764ba2)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        fontSize: '28px',
+        fontSize: '48px',
         // 3D elevation effect
         boxShadow:
-          '0 8px 20px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3), 0 0 30px rgba(102, 126, 234, 0.7)',
-        border: '3px solid white',
+          '0 12px 30px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.4), 0 0 40px rgba(102, 126, 234, 0.8)',
+        border: '4px solid white',
         zIndex: 1000,
         pointerEvents: 'none',
-        transform: 'translate(-50%, -50%)',
-        filter: 'drop-shadow(0 0 8px rgba(102, 126, 234, 0.8))',
+        filter: 'drop-shadow(0 0 12px rgba(102, 126, 234, 0.9))',
       }}
       className={css({
         animation: 'hoverFloat 2s ease-in-out infinite',
@@ -360,21 +382,31 @@ export function MemoryGrid() {
       )}
 
       {/* Animated Hover Avatars - Rendered as fixed positioned elements that smoothly transition */}
+      {/* Render one avatar per remote player - key by playerId to keep component alive */}
       {state.playerHovers &&
         Object.entries(state.playerHovers)
-          .filter(([_, cardId]) => cardId !== null) // Only show if hovering a card
+          .filter(([playerId]) => {
+            // Don't show your own hover avatar (only show remote players)
+            const player = playerMap.get(playerId)
+            return player?.isLocal !== true
+          })
           .map(([playerId, cardId]) => {
             const playerInfo = getPlayerHoverInfo(playerId)
+            // Get card element if player is hovering (cardId might be null)
             const cardElement = cardId ? cardRefs.current.get(cardId) : null
+            // Check if it's this player's turn
+            const isPlayersTurn = state.currentPlayer === playerId
 
-            if (!playerInfo || !cardElement) return null
+            if (!playerInfo) return null
 
+            // Render avatar even if no cardElement (it will handle hiding itself)
             return (
               <HoverAvatar
-                key={playerId}
+                key={playerId} // Key by playerId keeps component alive across card changes!
                 playerId={playerId}
                 playerInfo={playerInfo}
                 cardElement={cardElement}
+                isPlayersTurn={isPlayersTurn}
               />
             )
           })}
@@ -392,10 +424,10 @@ const gridAnimations = `
 
 @keyframes hoverFloat {
   0%, 100% {
-    transform: translate(-50%, -50%) translateY(0px);
+    transform: translateY(0px);
   }
   50% {
-    transform: translate(-50%, -50%) translateY(-6px);
+    transform: translateY(-6px);
   }
 }
 `

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [