chore(release): 4.63.7 [skip ci]

## [4.63.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.6...v4.63.7) (2025-10-21)

### Bug Fixes

* **mobile:** reduce height of Your Journey section on mobile ([8944035](89440355bf))

CHANGELOG.md

@@ -1,3 +1,73 @@
+## [4.63.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.6...v4.63.7) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** reduce height of Your Journey section on mobile ([8944035](https://github.com/antialias/soroban-abacus-flashcards/commit/89440355bf494e54072d2d1a1f228c33ec43d52d))
+
+## [4.63.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.5...v4.63.6) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** optimize Your Journey section for iPhone displays ([9167fb4](https://github.com/antialias/soroban-abacus-flashcards/commit/9167fb40d68b7bdbe310b647083586434ceb6043))
+
+## [4.63.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.4...v4.63.5) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** store grab offset in local coordinates to prevent jump ([39d93a9](https://github.com/antialias/soroban-abacus-flashcards/commit/39d93a9e9f48a7d1ce10763cad62a600851a41d5))
+
+## [4.63.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.3...v4.63.4) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** keep grab point under cursor with proper coordinate conversion ([1869216](https://github.com/antialias/soroban-abacus-flashcards/commit/1869216d2fda77303c0b79d4f613c6dcdaf5324b))
+
+## [4.63.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.2...v4.63.3) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** revert to simple delta positioning to prevent card jumping ([d018b69](https://github.com/antialias/soroban-abacus-flashcards/commit/d018b699c46aea90e9cdc3309e797ff2d7447ecf))
+
+## [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)
+
+
+### 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)
 
 

apps/web/src/components/InteractiveFlashcards.tsx

@@ -81,7 +81,7 @@ export function InteractiveFlashcards() {
       })}
     >
       {cards.map((card) => (
-        <DraggableCard key={card.id} card={card} />
+        <DraggableCard key={card.id} card={card} containerRef={containerRef} />
       ))}
     </div>
   )
@@ -89,21 +89,30 @@ export function InteractiveFlashcards() {
 
 interface DraggableCardProps {
   card: Flashcard
+  containerRef: React.RefObject<HTMLDivElement>
 }
 
-function DraggableCard({ card }: DraggableCardProps) {
+function DraggableCard({ card, containerRef }: 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)
     setZIndex(1000) // Bring to front
+    setDragSpeed(0)
 
     // Capture the pointer
     e.currentTarget.setPointerCapture(e.pointerId)
@@ -115,6 +124,41 @@ function DraggableCard({ card }: DraggableCardProps) {
       cardX: position.x,
       cardY: position.y,
     }
+
+    // Calculate grab offset from card center IN LOCAL COORDINATES (unrotated)
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect()
+      const cardCenterX = rect.left + rect.width / 2
+      const cardCenterY = rect.top + rect.height / 2
+
+      // Screen-space offset from center
+      const screenOffsetX = e.clientX - cardCenterX
+      const screenOffsetY = e.clientY - cardCenterY
+
+      // Convert to local coordinates by rotating by -rotation
+      const currentRotationRad = (rotation * Math.PI) / 180
+      const cosRot = Math.cos(-currentRotationRad)
+      const sinRot = Math.sin(-currentRotationRad)
+
+      grabOffsetRef.current = {
+        x: screenOffsetX * cosRot - screenOffsetY * sinRot,
+        y: screenOffsetX * sinRot + screenOffsetY * cosRot,
+      }
+      console.log(
+        `[GrabPoint] Grabbed at local offset: (${grabOffsetRef.current.x.toFixed(0)}, ${grabOffsetRef.current.y.toFixed(0)})px (screen offset: ${screenOffsetX.toFixed(0)}, ${screenOffsetY.toFixed(0)}px, rotation: ${rotation.toFixed(1)}°)`
+      )
+    }
+
+    // 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) => {
@@ -124,10 +168,95 @@ function DraggableCard({ card }: DraggableCardProps) {
     const deltaX = e.clientX - dragStartRef.current.x
     const deltaY = e.clientY - dragStartRef.current.y
 
-    // Update card position
+    // 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 / 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 grab point under cursor while rotating
+    // Calculate the rotated grab offset
+    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
+
+    // Get container bounds for coordinate conversion
+    if (!containerRef.current || !cardRef.current) {
+      // Fallback to simple delta if refs not ready
+      setPosition({
+        x: dragStartRef.current.cardX + deltaX,
+        y: dragStartRef.current.cardY + deltaY,
+      })
+      return
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const cardRect = cardRef.current.getBoundingClientRect()
+
+    // Current cursor position in viewport space
+    const cursorViewportX = e.clientX
+    const cursorViewportY = e.clientY
+
+    // Card center should be at: cursor - rotated grab offset (viewport space)
+    const cardCenterViewportX = cursorViewportX - rotatedGrabX
+    const cardCenterViewportY = cursorViewportY - rotatedGrabY
+
+    // Convert card center from viewport space to container space
+    const cardCenterContainerX = cardCenterViewportX - containerRect.left
+    const cardCenterContainerY = cardCenterViewportY - containerRect.top
+
+    // position.x/y represents translate() which positions the top-left corner
+    // So we need: top-left = center - (width/2, height/2)
     setPosition({
-      x: dragStartRef.current.cardX + deltaX,
-      y: dragStartRef.current.cardY + deltaY,
+      x: cardCenterContainerX - cardRect.width / 2,
+      y: cardCenterContainerY - cardRect.height / 2,
     })
   }
 
@@ -135,12 +264,38 @@ function DraggableCard({ card }: DraggableCardProps) {
     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 (
     <div
+      ref={cardRef}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
@@ -159,20 +314,20 @@ function DraggableCard({ card }: DraggableCardProps) {
       })}
     >
       <div
+        style={{
+          boxShadow, // Dynamic shadow based on drag speed
+        }}
         className={css({
           bg: 'white',
           rounded: 'lg',
           p: '4',
-          boxShadow: isDragging
-            ? '0 16px 48px rgba(0, 0, 0, 0.5)'
-            : '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',
+          transition: 'box-shadow 0.1s', // Quick transition for responsive feel
         })}
       >
         {/* Abacus visualization */}

apps/web/src/components/LevelSliderDisplay.tsx

@@ -412,8 +412,9 @@ export function LevelSliderDisplay({
                   ? 'violet.500'
                   : 'amber.500',
           rounded: 'xl',
-          p: { base: '6', md: '8' },
+          p: { base: '4', md: '8' },
           height: { base: 'auto', md: '700px' },
+          maxHeight: { base: '500px', md: 'none' },
           display: 'flex',
           flexDirection: 'column',
         })}
@@ -448,7 +449,7 @@ export function LevelSliderDisplay({
                     key={index}
                     onClick={() => setCurrentIndex(index)}
                     className={css({
-                      fontSize: '4xl',
+                      fontSize: { base: '2xl', sm: '3xl', md: '4xl' },
                       opacity: index === currentIndex ? '1' : '0.3',
                       transition: 'all 0.2s',
                       cursor: 'pointer',
@@ -500,8 +501,8 @@ export function LevelSliderDisplay({
                   alignItems: 'center',
                   justifyContent: 'center',
                   position: 'relative',
-                  w: '180px',
-                  h: '128px',
+                  w: { base: '120px', md: '180px' },
+                  h: { base: '96px', md: '128px' },
                   bg: 'transparent',
                   cursor: 'grab',
                   transition: 'transform 0.15s ease-out, left 0.3s ease-out',
@@ -514,7 +515,12 @@ export function LevelSliderDisplay({
                   _active: { cursor: 'grabbing' },
                 })}
               >
-                <div className={css({ opacity: 0.75 })}>
+                <div
+                  className={css({
+                    opacity: 0.75,
+                    transform: { base: 'scale(0.75)', md: 'scale(1)' },
+                  })}
+                >
                   <StandaloneBead
                     size={128}
                     color={currentLevel.color === 'violet' ? '#8b5cf6' : '#22c55e'}
@@ -607,8 +613,9 @@ export function LevelSliderDisplay({
         <div
           className={css({
             display: 'flex',
+            flexDirection: { base: 'column', lg: 'row' },
             gap: '4',
-            p: '6',
+            p: { base: '4', md: '6' },
             bg: 'rgba(0, 0, 0, 0.3)',
             rounded: 'lg',
             border: '1px solid',
@@ -634,11 +641,17 @@ export function LevelSliderDisplay({
                   className={css({
                     flex: '0 0 auto',
                     display: 'grid',
-                    gridTemplateColumns: 'repeat(2, 1fr)',
+                    gridTemplateColumns: {
+                      base: 'repeat(2, 1fr)',
+                      sm: 'repeat(3, 1fr)',
+                      lg: 'repeat(2, 1fr)',
+                    },
                     gap: '2',
                     p: '2',
-                    maxW: '400px',
+                    w: '100%',
+                    maxW: { base: '100%', lg: '400px' },
                     alignContent: 'center',
+                    justifyItems: 'center',
                   })}
                 >
                   {sections.map((section, idx) => {
@@ -666,8 +679,10 @@ export function LevelSliderDisplay({
                           justifyContent: 'center',
                           gap: '1.5',
                           opacity: hasData ? 1 : 0.3,
-                          width: '170px',
-                          height: '150px',
+                          w: { base: '100%', sm: 'auto' },
+                          minW: { sm: '140px' },
+                          maxW: { base: '170px', sm: '170px' },
+                          minH: '150px',
                           _hover: hasData
                             ? {
                                 borderColor: 'gray.500',
@@ -737,9 +752,13 @@ export function LevelSliderDisplay({
           <div
             className={css({
               display: 'flex',
-              justifyContent: currentLevel.type === 'kyu' ? 'flex-end' : 'center',
+              justifyContent:
+                currentLevel.type === 'kyu' ? { base: 'center', lg: 'flex-end' } : 'center',
               alignItems: 'center',
               flex: 1,
+              overflowX: 'auto',
+              overflowY: 'hidden',
+              minW: 0, // Allow flex shrinking
             })}
           >
             <animated.div

package.json

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