chore(release): 4.63.0 [skip ci]

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

CHANGELOG.md

@@ -1,3 +1,31 @@
+## [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)
+
+
+### Features
+
+* **flashcards:** add dynamic shadow based on drag speed ([92148a4](https://github.com/antialias/soroban-abacus-flashcards/commit/92148a4cf87e828ba2e5ec1740fb51d9667c1d73))
+
+## [4.61.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.2...v4.61.3) (2025-10-21)
+
+
+### Code Refactoring
+
+* **flashcards:** completely rewrite drag-drop with simple approach ([5f0ad14](https://github.com/antialias/soroban-abacus-flashcards/commit/5f0ad14133340d073e861f5721cb48e1abab03ff))
+
 ## [4.61.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.1...v4.61.2) (2025-10-21)
 
 

apps/web/src/components/InteractiveFlashcards.tsx

@@ -1,9 +1,7 @@
 'use client'
 
 import { AbacusReact } from '@soroban/abacus-react'
-import { useDrag } from '@use-gesture/react'
 import { useEffect, useRef, useState } from 'react'
-import { animated, config, to, useSpring } from '@react-spring/web'
 import { css } from '../../styled-system/css'
 
 interface Flashcard {
@@ -16,12 +14,11 @@ interface Flashcard {
 }
 
 /**
- * InteractiveFlashcards - A fun, physics-based flashcard display
- * Users can drag and throw flashcards around with realistic momentum
+ * InteractiveFlashcards - A fun flashcard display where you can drag cards around
+ * Cards stay where you drop them - simple and intuitive
  */
 export function InteractiveFlashcards() {
   const containerRef = useRef<HTMLDivElement>(null)
-  // Generate 8-15 random flashcards (client-side only to avoid hydration errors)
   const [cards, setCards] = useState<Flashcard[]>([])
 
   useEffect(() => {
@@ -95,204 +92,187 @@ interface DraggableCardProps {
 }
 
 function DraggableCard({ card }: DraggableCardProps) {
-  // Track the card's current position in state (separate from the animation values)
-  const currentPositionRef = useRef({
-    x: card.initialX,
-    y: card.initialY,
-    rotation: card.initialRotation,
-  })
-
-  const [{ x, y, rotation, scale }, api] = useSpring(() => ({
-    x: card.initialX,
-    y: card.initialY,
-    rotation: card.initialRotation,
-    scale: 1,
-    config: config.wobbly,
-  }))
-
+  // Track position - starts at initial, updates when dragged
+  const [position, setPosition] = useState({ x: card.initialX, y: card.initialY })
+  const [rotation, setRotation] = useState(card.initialRotation) // Now dynamic!
   const [zIndex, setZIndex] = useState(card.zIndex)
-  const cardRef = useRef<HTMLDivElement>(null)
-  const dragOffsetRef = useRef({ x: 0, y: 0 })
-  const lastVelocityRef = useRef({ vx: 0, vy: 0 })
-  const velocityHistoryRef = useRef<Array<{ vx: number; vy: number }>>([])
-  const [transformOrigin, setTransformOrigin] = useState('center center')
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragSpeed, setDragSpeed] = useState(0) // Speed for dynamic shadow
 
-  const bind = useDrag(
-    ({ down, movement: [mx, my], velocity: [vx, vy], direction: [dx, dy], first, xy }) => {
-      // Bring card to front when dragging
-      if (down) {
-        setZIndex(1000)
+  // 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
 
-        // Calculate drag offset from card center on first touch
-        if (first && cardRef.current) {
-          const cardRect = cardRef.current.getBoundingClientRect()
-          const cardWidth = cardRect.width
-          const cardHeight = cardRect.height
+  const handlePointerDown = (e: React.PointerEvent) => {
+    setIsDragging(true)
+    setZIndex(1000) // Bring to front
+    setDragSpeed(0)
 
-          // xy is in viewport coordinates, convert to position relative to card
-          const clickRelativeToCard = {
-            x: xy[0] - cardRect.left,
-            y: xy[1] - cardRect.top,
-          }
+    // Capture the pointer
+    e.currentTarget.setPointerCapture(e.pointerId)
 
-          // Calculate offset from card center
-          const cardCenterX = cardWidth / 2
-          const cardCenterY = cardHeight / 2
-          const offsetX = clickRelativeToCard.x - cardCenterX
-          const offsetY = clickRelativeToCard.y - cardCenterY
-
-          dragOffsetRef.current = { x: offsetX, y: offsetY }
-
-          // Convert offset to transform-origin (50% + offset as percentage of card size)
-          const originX = 50 + (offsetX / cardWidth) * 100
-          const originY = 50 + (offsetY / cardHeight) * 100
-          const transformOriginValue = `${originX}% ${originY}%`
-
-          console.log(
-            `Drag start: click at (${clickRelativeToCard.x.toFixed(0)}, ${clickRelativeToCard.y.toFixed(0)}) in card, offset from center: (${offsetX.toFixed(0)}, ${offsetY.toFixed(0)}), origin: ${transformOriginValue}`
-          )
-
-          setTransformOrigin(transformOriginValue)
-          velocityHistoryRef.current = []
-        }
-
-        // Smooth velocity by averaging last 3 frames
-        velocityHistoryRef.current.push({ vx, vy })
-        if (velocityHistoryRef.current.length > 3) {
-          velocityHistoryRef.current.shift()
-        }
-
-        const avgVx =
-          velocityHistoryRef.current.reduce((sum, v) => sum + v.vx, 0) /
-          velocityHistoryRef.current.length
-        const avgVy =
-          velocityHistoryRef.current.reduce((sum, v) => sum + v.vy, 0) /
-          velocityHistoryRef.current.length
-
-        // Calculate rotation based on smoothed velocity and drag offset
-        const velocityAngle = Math.atan2(avgVy, avgVx) * (180 / Math.PI)
-        const offsetAngle =
-          Math.atan2(dragOffsetRef.current.y, dragOffsetRef.current.x) * (180 / Math.PI)
-
-        // Card rotates to align with movement direction, offset by where we're grabbing
-        const targetRotation = velocityAngle - offsetAngle + 90
-
-        const speed = Math.sqrt(avgVx * avgVx + avgVy * avgVy)
-
-        // Store smoothed velocity for throw
-        lastVelocityRef.current = { vx: avgVx, vy: avgVy }
-
-        const finalRotation = speed > 0.01 ? targetRotation : currentPositionRef.current.rotation
-
-        api.start({
-          x: currentPositionRef.current.x + mx,
-          y: currentPositionRef.current.y + my,
-          scale: 1.1,
-          rotation: finalRotation,
-          immediate: (key) => key !== 'rotation', // Position immediate, rotation smooth
-          config: { tension: 200, friction: 30 }, // Smoother rotation spring
-        })
-      } else {
-        // On release, reset transform origin to center
-        setTransformOrigin('center center')
-
-        // Update current position to where the card was dropped
-        currentPositionRef.current.x = currentPositionRef.current.x + mx
-        currentPositionRef.current.y = currentPositionRef.current.y + my
-
-        // First, snap the spring to the dropped position immediately
-        api.set({
-          x: currentPositionRef.current.x,
-          y: currentPositionRef.current.y,
-        })
-
-        // On release, apply momentum with decay physics
-        const throwVelocityX = lastVelocityRef.current.vx * 1000
-        const throwVelocityY = lastVelocityRef.current.vy * 1000
-
-        // Calculate final rotation based on throw direction
-        const throwAngle = Math.atan2(throwVelocityY, throwVelocityX) * (180 / Math.PI)
-
-        // Start position decay and rotation/scale animations
-        api.start({
-          x: {
-            velocity: throwVelocityX,
-            config: { decay: true },
-          },
-          y: {
-            velocity: throwVelocityY,
-            config: { decay: true },
-          },
-          scale: {
-            value: 1,
-            config: config.wobbly,
-          },
-          rotation: {
-            value: throwAngle + 90, // Card aligns with throw direction
-            config: config.wobbly,
-          },
-          onChange: (result) => {
-            // Continue updating position as card settles with momentum
-            if (result.value.x !== undefined) {
-              currentPositionRef.current.x = result.value.x
-            }
-            if (result.value.y !== undefined) {
-              currentPositionRef.current.y = result.value.y
-            }
-            if (result.value.rotation !== undefined) {
-              currentPositionRef.current.rotation = result.value.rotation
-            }
-          },
-        })
-      }
-    },
-    {
-      // Prevent scrolling when dragging
-      preventDefault: true,
-      filterTaps: true,
+    // Record where the drag started (pointer position and card position)
+    dragStartRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      cardX: position.x,
+      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
+    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')
+  }
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    if (!isDragging || !dragStartRef.current) return
+
+    // Calculate how far the pointer has moved since drag started
+    const deltaX = e.clientX - dragStartRef.current.x
+    const deltaY = e.clientY - dragStartRef.current.y
+
+    // Calculate velocity for dynamic shadow
+    const now = Date.now()
+    const timeDelta = now - lastMoveTimeRef.current
+
+    if (timeDelta > 0) {
+      // Distance moved since last frame
+      const distX = e.clientX - lastMovePositionRef.current.x
+      const distY = e.clientY - lastMovePositionRef.current.y
+      const distance = Math.sqrt(distX * distX + distY * distY)
+
+      // Speed in pixels per millisecond, then convert to reasonable scale
+      const speed = distance / timeDelta
+      const scaledSpeed = Math.min(speed * 100, 100) // Cap at 100 for reasonable shadow size
+
+      setDragSpeed(scaledSpeed)
+
+      // 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, timeDelta: ${timeDelta}ms`
+        )
+        lastLogTimeRef.current = now
+      }
+
+      lastMoveTimeRef.current = now
+      lastMovePositionRef.current = { x: e.clientX, y: e.clientY }
+    }
+
+    // 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 / 5000 // Scale factor for reasonable rotation (adjust as needed)
+    const newRotation = baseRotationRef.current + rotationInfluence
+
+    // Clamp rotation to prevent excessive spinning
+    const clampedRotation = Math.max(-45, Math.min(45, newRotation))
+    setRotation(clampedRotation)
+
+    // Update card position
+    setPosition({
+      x: dragStartRef.current.cardX + deltaX,
+      y: dragStartRef.current.cardY + deltaY,
+    })
+  }
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    setIsDragging(false)
+    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(() => {
+      setDragSpeed((prev) => {
+        const newSpeed = prev * 0.8 // Decay by 20% each frame
+        if (newSpeed < 1) {
+          clearInterval(decayInterval)
+          return 0
+        }
+        return newSpeed
+      })
+    }, 50) // Update every 50ms
+
+    // Release the pointer capture
+    e.currentTarget.releasePointerCapture(e.pointerId)
+  }
+
+  // Calculate dynamic shadow based on drag speed
+  // Base shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
+  // Fast drag: 0 32px 64px rgba(0, 0, 0, 0.6)
+  const shadowY = 8 + (dragSpeed / 100) * 24 // 8px to 32px
+  const shadowBlur = 24 + (dragSpeed / 100) * 40 // 24px to 64px
+  const shadowOpacity = 0.3 + (dragSpeed / 100) * 0.3 // 0.3 to 0.6
+  const boxShadow = `0 ${shadowY}px ${shadowBlur}px rgba(0, 0, 0, ${shadowOpacity})`
 
   return (
-    <animated.div
+    <div
       ref={cardRef}
-      {...bind()}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
       style={{
         position: 'absolute',
         left: 0,
         top: 0,
-        transform: to(
-          [x, y, rotation, scale],
-          (x, y, r, s) => `translate(${x}px, ${y}px) rotate(${r}deg) scale(${s})`
-        ),
-        transformOrigin,
+        transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${isDragging ? 1.05 : 1})`,
         zIndex,
         touchAction: 'none',
-        cursor: 'grab',
+        cursor: isDragging ? 'grabbing' : 'grab',
+        transition: isDragging ? 'none' : 'transform 0.2s ease-out',
       }}
       className={css({
         userSelect: 'none',
-        _active: {
-          cursor: 'grabbing',
-        },
       })}
     >
       <div
+        style={{
+          boxShadow, // Dynamic shadow based on drag speed
+        }}
         className={css({
           bg: 'white',
           rounded: 'lg',
           p: '4',
-          boxShadow: '0 8px 24px rgba(0, 0, 0, 0.3)',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           gap: '2',
           minW: '120px',
           border: '2px solid rgba(0, 0, 0, 0.1)',
-          transition: 'box-shadow 0.2s',
-          _hover: {
-            boxShadow: '0 12px 32px rgba(0, 0, 0, 0.4)',
-          },
+          transition: 'box-shadow 0.1s', // Quick transition for responsive feel
         })}
       >
         {/* Abacus visualization */}
@@ -317,6 +297,6 @@ function DraggableCard({ card }: DraggableCardProps) {
           {card.number}
         </div>
       </div>
-    </animated.div>
+    </div>
   )
 }

package.json

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