chore(release): 4.63.2 [skip ci]

## [4.63.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.1...v4.63.2) (2025-10-21)

### Bug Fixes

* **flashcards:** correct pivot point to rotate around card center ([50fc3fd](50fc3fdf7f))

CHANGELOG.md

@@ -1,3 +1,31 @@
+## [4.63.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.1...v4.63.2) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** correct pivot point to rotate around card center ([50fc3fd](https://github.com/antialias/soroban-abacus-flashcards/commit/50fc3fdf7f2c9b7412f6d7d890f5e0d52cb86a9b))
+
+## [4.63.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.0...v4.63.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** increase rotation sensitivity 10x for visible grab point physics ([c0fa926](https://github.com/antialias/soroban-abacus-flashcards/commit/c0fa926d16d02c1bfe880b7f0056a760e8461b3b))
+
+## [4.63.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.62.1...v4.63.0) (2025-10-21)
+
+
+### Features
+
+* **flashcards:** add grab point physics for realistic rotation ([bf37eb1](https://github.com/antialias/soroban-abacus-flashcards/commit/bf37eb1928de8d07673234e2faa1fa6268c45686))
+
+## [4.62.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.62.0...v4.62.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** improve shadow speed logging with separate throttling ([0f51366](https://github.com/antialias/soroban-abacus-flashcards/commit/0f51366fd56540e691df4931b6350c03043484f1))
+
 ## [4.62.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.3...v4.62.0) (2025-10-21)
 
 

apps/web/src/components/InteractiveFlashcards.tsx

@@ -94,15 +94,19 @@ interface DraggableCardProps {
 function DraggableCard({ card }: DraggableCardProps) {
   // Track position - starts at initial, updates when dragged
   const [position, setPosition] = useState({ x: card.initialX, y: card.initialY })
-  const [rotation] = useState(card.initialRotation)
+  const [rotation, setRotation] = useState(card.initialRotation) // Now dynamic!
   const [zIndex, setZIndex] = useState(card.zIndex)
   const [isDragging, setIsDragging] = useState(false)
   const [dragSpeed, setDragSpeed] = useState(0) // Speed for dynamic shadow
 
   // Track drag state
   const dragStartRef = useRef<{ x: number; y: number; cardX: number; cardY: number } | null>(null)
+  const grabOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 }) // Offset from card center where grabbed
+  const baseRotationRef = useRef(card.initialRotation) // Starting rotation
   const lastMoveTimeRef = useRef<number>(0)
   const lastMovePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+  const lastLogTimeRef = useRef<number>(0) // Separate throttling for logging
+  const cardRef = useRef<HTMLDivElement>(null) // Reference to card element
 
   const handlePointerDown = (e: React.PointerEvent) => {
     setIsDragging(true)
@@ -120,9 +124,28 @@ function DraggableCard({ card }: DraggableCardProps) {
       cardY: position.y,
     }
 
+    // Calculate grab offset from card center
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect()
+      const cardCenterX = rect.left + rect.width / 2
+      const cardCenterY = rect.top + rect.height / 2
+      grabOffsetRef.current = {
+        x: e.clientX - cardCenterX,
+        y: e.clientY - cardCenterY,
+      }
+      console.log(
+        `[GrabPoint] Grabbed at offset: (${grabOffsetRef.current.x.toFixed(0)}, ${grabOffsetRef.current.y.toFixed(0)})px from center`
+      )
+    }
+
+    // Store the current rotation as the base for this drag
+    baseRotationRef.current = rotation
+
     // Initialize velocity tracking
-    lastMoveTimeRef.current = Date.now()
+    const now = Date.now()
+    lastMoveTimeRef.current = now
     lastMovePositionRef.current = { x: e.clientX, y: e.clientY }
+    lastLogTimeRef.current = now
 
     console.log('[Shadow] Drag started, speed reset to 0')
   }
@@ -150,22 +173,78 @@ function DraggableCard({ card }: DraggableCardProps) {
 
       setDragSpeed(scaledSpeed)
 
-      // Log occasionally (every ~100ms) to avoid console spam
-      if (timeDelta > 100) {
+      // Log occasionally (every ~200ms) to avoid console spam
+      const timeSinceLastLog = now - lastLogTimeRef.current
+      if (timeSinceLastLog > 200) {
         console.log(
-          `[Shadow] Speed: ${scaledSpeed.toFixed(1)}, distance: ${distance.toFixed(0)}px, time: ${timeDelta}ms`
+          `[Shadow] Speed: ${scaledSpeed.toFixed(1)}, distance: ${distance.toFixed(0)}px, timeDelta: ${timeDelta}ms`
         )
+        lastLogTimeRef.current = now
       }
 
       lastMoveTimeRef.current = now
       lastMovePositionRef.current = { x: e.clientX, y: e.clientY }
     }
 
-    // Update card position
-    setPosition({
-      x: dragStartRef.current.cardX + deltaX,
-      y: dragStartRef.current.cardY + deltaY,
-    })
+    // Calculate rotation based on grab point physics
+    // Cross product of grab offset and drag direction determines rotation
+    // If grabbed on left and dragged right → clockwise rotation
+    // If grabbed on right and dragged left → counter-clockwise rotation
+    const crossProduct = grabOffsetRef.current.x * deltaY - grabOffsetRef.current.y * deltaX
+    const rotationInfluence = crossProduct / 500 // Reduced scale factor for more visible rotation
+    const newRotation = baseRotationRef.current + rotationInfluence
+
+    // Clamp rotation to prevent excessive spinning
+    const clampedRotation = Math.max(-45, Math.min(45, newRotation))
+    setRotation(clampedRotation)
+
+    // Log rotation changes occasionally (same throttle as shadow logging)
+    const timeSinceLastLog = now - lastLogTimeRef.current
+    if (timeSinceLastLog > 200) {
+      console.log(
+        `[GrabPoint] Rotation: ${clampedRotation.toFixed(1)}° (influence: ${rotationInfluence.toFixed(1)}°, cross: ${crossProduct.toFixed(0)})`
+      )
+    }
+
+    // Update card position - keep the grab point "stuck" to the cursor
+    // As the card rotates, the grab point rotates with it, so we need to account for rotation
+    const rotationRad = (clampedRotation * Math.PI) / 180
+    const cosRot = Math.cos(rotationRad)
+    const sinRot = Math.sin(rotationRad)
+
+    // Rotate the grab offset by the current rotation angle
+    const rotatedGrabX = grabOffsetRef.current.x * cosRot - grabOffsetRef.current.y * sinRot
+    const rotatedGrabY = grabOffsetRef.current.x * sinRot + grabOffsetRef.current.y * cosRot
+
+    // Current cursor position
+    const cursorX = e.clientX
+    const cursorY = e.clientY
+
+    // Card center should be at: cursor position - rotated grab offset
+    // But we need to position the card element (top-left), not the center
+    // Get card dimensions to calculate offset from center to top-left
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect()
+      const cardWidth = rect.width
+      const cardHeight = rect.height
+
+      // Card center position in screen space
+      const cardCenterX = cursorX - rotatedGrabX
+      const cardCenterY = cursorY - rotatedGrabY
+
+      // Convert center position to top-left position (what we store in position state)
+      // Note: position.x/y is used in translate(), which positions the element
+      setPosition({
+        x: cardCenterX - cardWidth / 2,
+        y: cardCenterY - cardHeight / 2,
+      })
+    } else {
+      // Fallback to simple delta if we don't have card dimensions yet
+      setPosition({
+        x: dragStartRef.current.cardX + deltaX,
+        y: dragStartRef.current.cardY + deltaY,
+      })
+    }
   }
 
   const handlePointerUp = (e: React.PointerEvent) => {
@@ -173,6 +252,9 @@ function DraggableCard({ card }: DraggableCardProps) {
     dragStartRef.current = null
 
     console.log('[Shadow] Drag released, speed decaying to 0')
+    console.log(
+      `[GrabPoint] Final rotation: ${rotation.toFixed(1)}° (base was ${baseRotationRef.current.toFixed(1)}°)`
+    )
 
     // Gradually decay speed back to 0 for smooth shadow transition
     const decayInterval = setInterval(() => {
@@ -200,6 +282,7 @@ function DraggableCard({ card }: DraggableCardProps) {
 
   return (
     <div
+      ref={cardRef}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}

package.json

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