chore(release): 4.38.1 [skip ci]

## [4.38.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.38.0...v4.38.1) (2025-10-20)

### Bug Fixes

* **levels:** adjust slider text positioning to prevent emoji overlap ([e5ffe39](e5ffe3927e))

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [4.38.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.38.0...v4.38.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** adjust slider text positioning to prevent emoji overlap ([e5ffe39](https://github.com/antialias/soroban-abacus-flashcards/commit/e5ffe3927edfb1baea7ddd216507e081f50e5d2c))
+
+## [4.38.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.37.0...v4.38.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add animated calculation effect to abacus display ([4f4c735](https://github.com/antialias/soroban-abacus-flashcards/commit/4f4c73577a944518c093b3208a85482909fe3064))
+
+## [4.37.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.36.0...v4.37.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add hover tracking to slider for real-time level preview ([477a0b3](https://github.com/antialias/soroban-abacus-flashcards/commit/477a0b367e32749b865b5a5405846e86d5bcef6a))
+
 ## [4.36.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.35.1...v4.36.0) (2025-10-20)
 
 

apps/web/src/app/levels/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useSpring, useTransition, animated } from '@react-spring/web'
 import * as Slider from '@radix-ui/react-slider'
 import { AbacusReact, StandaloneBead } from '@soroban/abacus-react'
@@ -183,8 +183,52 @@ const allLevels = [
 
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
+  const [isHovering, setIsHovering] = useState(false)
   const currentLevel = allLevels[currentIndex]
 
+  // State for animated abacus digits
+  const [animatedDigits, setAnimatedDigits] = useState<string>('')
+
+  // Initialize animated digits when level changes
+  useEffect(() => {
+    const generateRandomDigits = (numDigits: number) => {
+      return Array.from({ length: numDigits }, () => Math.floor(Math.random() * 10)).join('')
+    }
+    setAnimatedDigits(generateRandomDigits(currentLevel.digits))
+  }, [currentLevel.digits])
+
+  // Animate abacus calculations every 0.5 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setAnimatedDigits((prev) => {
+        const digits = prev.split('').map(Number)
+        const numColumns = digits.length
+
+        // Pick 1-3 adjacent columns to change (grouping effect)
+        const groupSize = Math.floor(Math.random() * 3) + 1
+        const startCol = Math.floor(Math.random() * (numColumns - groupSize + 1))
+
+        // Change the selected columns
+        for (let i = startCol; i < startCol + groupSize && i < numColumns; i++) {
+          digits[i] = Math.floor(Math.random() * 10)
+        }
+
+        return digits.join('')
+      })
+    }, 500)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  // Handle hover on slider track
+  const handleSliderHover = (e: React.MouseEvent<HTMLSpanElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const percentage = x / rect.width
+    const index = Math.round(percentage * (allLevels.length - 1))
+    setCurrentIndex(Math.max(0, Math.min(allLevels.length - 1, index)))
+  }
+
   // Calculate scale factor based on number of columns to fit the page
   // Use constrained range to prevent huge size differences between levels
   // Min 1.2 (for 30-column Dan levels) to Max 2.0 (for 2-column Kyu levels)
@@ -205,17 +249,12 @@ export default function LevelsPage() {
     config: { duration: 120 },
   })
 
-  // Generate an interesting non-zero number to display on the abacus
-  // Use a suffix pattern so rightmost digits stay constant as columns increase
-  // This prevents beads from shifting: ones always 9, tens always 8, etc.
-  const digitPattern = '123456789'
-  // Use BigInt for numbers > 15 digits (Dan levels with 30 columns)
-  const repeatedPattern = digitPattern.repeat(Math.ceil(currentLevel.digits / digitPattern.length))
-  const digitString = repeatedPattern.slice(-currentLevel.digits)
-
+  // Convert animated digits to a number/BigInt for the abacus display
   // Use BigInt for large numbers to get full 30-digit precision
   const displayValue =
-    currentLevel.digits > 15 ? BigInt(digitString) : Number.parseInt(digitString, 10)
+    animatedDigits.length > 15
+      ? BigInt(animatedDigits || '0')
+      : Number.parseInt(animatedDigits || '0', 10)
 
   // Dark theme styles matching the homepage
   const darkStyles = {
@@ -367,6 +406,9 @@ export default function LevelsPage() {
                     min={0}
                     max={allLevels.length - 1}
                     step={1}
+                    onMouseMove={handleSliderHover}
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
                     className={css({
                       position: 'relative',
                       display: 'flex',
@@ -437,7 +479,7 @@ export default function LevelsPage() {
                       <div
                         className={css({
                           position: 'absolute',
-                          bottom: '-60px',
+                          bottom: '-80px',
                           left: '50%',
                           transform: 'translateX(-50%)',
                           textAlign: 'center',

package.json

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