chore(release): 2.14.3 [skip ci]

## [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](8d53b589aa))

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
 
 

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

@@ -93,32 +93,43 @@ 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)
+      const avatarCenterX = rect.right - 12 // 12px from right edge
+      const avatarCenterY = rect.top - 12 // 12px from top edge
+
       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
-  // Only animate if we have a position (prevents fly-in from 0,0)
   const springProps = useSpring({
     x: position?.x ?? 0,
     y: position?.y ?? 0,
-    opacity: position ? 1 : 0, // Fade in when position is set
+    opacity: position ? 1 : 0,
     config: {
       tension: 280,
       friction: 60,
       mass: 1,
     },
-    immediate: !position, // No animation on first render
+    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
 
@@ -126,11 +137,14 @@ function HoverAvatar({
     <animated.div
       style={{
         position: 'fixed',
-        left: springProps.x,
-        top: springProps.y,
-        opacity: springProps.opacity, // Fade in smoothly
+        // 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: '48px',
         height: '48px',
+        marginLeft: '-24px', // Center horizontally (half of width)
+        marginTop: '-24px', // Center vertically (half of height)
         borderRadius: '50%',
         background: playerInfo.color || 'linear-gradient(135deg, #667eea, #764ba2)',
         display: 'flex',
@@ -143,7 +157,6 @@ function HoverAvatar({
         border: '3px solid white',
         zIndex: 1000,
         pointerEvents: 'none',
-        transform: 'translate(-50%, -50%)',
         filter: 'drop-shadow(0 0 8px rgba(102, 126, 234, 0.8))',
       }}
       className={css({

package.json

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