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,45 @@
+## [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)
+
+
+### Features
+
+* improve hover avatars with smooth animation and 3D elevation ([71b11f4](https://github.com/antialias/soroban-abacus-flashcards/commit/71b11f4ef08a5f9c3f1c1aaabca21ef023d5c0ce))
+
 ## [2.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.12.3...v2.13.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

@@ -1,6 +1,7 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useSpring, animated } from '@react-spring/web'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { css } from '../../../../../styled-system/css'
 import { useGameMode } from '../../../../contexts/GameModeContext'
 import { useMemoryPairs } from '../context/MemoryPairsContext'
@@ -81,10 +82,110 @@ function useGridDimensions(gridConfig: any, totalCards: number) {
   return gridDimensions
 }
 
+// Animated hover avatar component
+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: 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: avatarCenterX,
+        y: avatarCenterY,
+      })
+    }
+  }, [cardElement])
+
+  // Smooth spring animation for position changes
+  const springProps = useSpring({
+    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',
+        // 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: '48px',
+        // 3D elevation effect
+        boxShadow:
+          '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',
+        filter: 'drop-shadow(0 0 12px rgba(102, 126, 234, 0.9))',
+      }}
+      className={css({
+        animation: 'hoverFloat 2s ease-in-out infinite',
+      })}
+      title={`${playerInfo.name} is considering this card`}
+    >
+      {playerInfo.emoji}
+    </animated.div>
+  )
+}
+
 export function MemoryGrid() {
-  const { state, flipCard, hoverCard } = useMemoryPairs()
+  const { state, flipCard, hoverCard, gameMode } = useMemoryPairs()
   const { players: playerMap } = useGameMode()
 
+  // Track card element refs for positioning hover avatars
+  const cardRefs = useRef<Map<string, HTMLElement>>(new Map())
+
+  // Check if it's the local player's turn
+  const isMyTurn = useMemo(() => {
+    if (gameMode === 'single') return true // Always your turn in single player
+
+    const currentPlayerData = playerMap.get(state.currentPlayer)
+    return currentPlayerData?.isLocal === true
+  }, [state.currentPlayer, playerMap, gameMode])
+
   // Hooks must be called before early return
   const gridConfig = useMemo(() => getGridConfiguration(state.difficulty), [state.difficulty])
   const gridDimensions = useGridDimensions(gridConfig, state.gameCards.length)
@@ -118,6 +219,15 @@ export function MemoryGrid() {
       : null
   }
 
+  // Set card ref callback
+  const setCardRef = (cardId: string) => (element: HTMLDivElement | null) => {
+    if (element) {
+      cardRefs.current.set(cardId, element)
+    } else {
+      cardRefs.current.delete(cardId)
+    }
+  }
+
   return (
     <div
       className={css({
@@ -185,6 +295,7 @@ export function MemoryGrid() {
           return (
             <div
               key={card.id}
+              ref={setCardRef(card.id)}
               className={css({
                 aspectRatio: '3/4',
                 // Fully responsive card sizing - no fixed pixel sizes
@@ -195,17 +306,17 @@ export function MemoryGrid() {
                 opacity: isDimmed ? 0.3 : 1,
                 transition: 'opacity 0.3s ease',
                 filter: isDimmed ? 'grayscale(0.7)' : 'none',
-                position: 'relative', // For avatar positioning
+                position: 'relative',
               })}
               onMouseEnter={() => {
-                // Send hover state when mouse enters card (if not matched)
-                if (hoverCard && !isMatched) {
+                // Only send hover if it's your turn and card is not matched
+                if (hoverCard && !isMatched && isMyTurn) {
                   hoverCard(card.id)
                 }
               }}
               onMouseLeave={() => {
                 // Clear hover state when mouse leaves card
-                if (hoverCard && !isMatched) {
+                if (hoverCard && !isMatched && isMyTurn) {
                   hoverCard(null)
                 }
               }}
@@ -217,43 +328,6 @@ export function MemoryGrid() {
                 onClick={() => (isValidForSelection ? handleCardClick(card.id) : undefined)}
                 disabled={state.isProcessingMove || !isValidForSelection}
               />
-
-              {/* Hover Avatars - Show which players are hovering over this card */}
-              {state.playerHovers &&
-                Object.entries(state.playerHovers)
-                  .filter(([playerId, hoveredCardId]) => hoveredCardId === card.id)
-                  .map(([playerId]) => {
-                    const playerInfo = getPlayerHoverInfo(playerId)
-                    if (!playerInfo) return null
-
-                    return (
-                      <div
-                        key={playerId}
-                        className={css({
-                          position: 'absolute',
-                          top: '-12px',
-                          right: '-12px',
-                          width: '40px',
-                          height: '40px',
-                          borderRadius: '50%',
-                          background: playerInfo.color || 'linear-gradient(135deg, #667eea, #764ba2)',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          fontSize: '24px',
-                          boxShadow: '0 4px 12px rgba(0,0,0,0.3), 0 0 20px rgba(102, 126, 234, 0.6)',
-                          border: '3px solid white',
-                          zIndex: 100,
-                          animation: 'hoverPulse 1.5s ease-in-out infinite',
-                          transition: 'all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)',
-                          pointerEvents: 'none',
-                        })}
-                        title={`${playerInfo.name} is considering this card`}
-                      >
-                        {playerInfo.emoji}
-                      </div>
-                    )
-                  })}
             </div>
           )
         })}
@@ -306,6 +380,36 @@ 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(([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) return null
+
+            // Render avatar even if no cardElement (it will handle hiding itself)
+            return (
+              <HoverAvatar
+                key={playerId} // Key by playerId keeps component alive across card changes!
+                playerId={playerId}
+                playerInfo={playerInfo}
+                cardElement={cardElement}
+                isPlayersTurn={isPlayersTurn}
+              />
+            )
+          })}
     </div>
   )
 }
@@ -318,14 +422,12 @@ const gridAnimations = `
   75% { transform: translate(-50%, -50%) translateX(5px); }
 }
 
-@keyframes hoverPulse {
+@keyframes hoverFloat {
   0%, 100% {
-    transform: scale(1);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 20px rgba(102, 126, 234, 0.6);
+    transform: translateY(0px);
   }
   50% {
-    transform: scale(1.1);
-    box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 30px rgba(102, 126, 234, 0.9);
+    transform: translateY(-6px);
   }
 }
 `

package.json

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