chore(release): 4.33.6 [skip ci]

## [4.33.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.5...v4.33.6) (2025-10-20)

### Bug Fixes

* **levels:** increase container height to prevent abacus clipping ([cd5c15a](cd5c15aeb2))

CHANGELOG.md

@@ -1,3 +1,53 @@
+## [4.33.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.5...v4.33.6) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** increase container height to prevent abacus clipping ([cd5c15a](https://github.com/antialias/soroban-abacus-flashcards/commit/cd5c15aeb260c568fe7ad9b6a4f51c4d6498b2b8))
+
+## [4.33.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.4...v4.33.5) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** revert delayed column change, keep overflow hidden ([22f00f5](https://github.com/antialias/soroban-abacus-flashcards/commit/22f00f59f5facc36a846408dcd196ec54ea676b1))
+
+## [4.33.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.3...v4.33.4) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** stabilize slider position and prevent abacus clipping ([09004dc](https://github.com/antialias/soroban-abacus-flashcards/commit/09004dc2c055031ee2f71c964ceee6f7b1d42ecd))
+
+## [4.33.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.2...v4.33.3) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** move slider into level display pane above abacus ([2d8bb4a](https://github.com/antialias/soroban-abacus-flashcards/commit/2d8bb4ab8804f399d1ccc8a18feff9f09eca8029))
+
+## [4.33.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.1...v4.33.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** add fixed height to entire level display pane ([200b26c](https://github.com/antialias/soroban-abacus-flashcards/commit/200b26c2cd35d1d637ede9dcfc3dbbc7f3f19320))
+
+## [4.33.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.0...v4.33.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** only animate abacus, not container with background/border ([c80477d](https://github.com/antialias/soroban-abacus-flashcards/commit/c80477d24877ddada5f3f4405abbf05e1d753b5d))
+
+## [4.33.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.1...v4.33.0) (2025-10-20)
+
+
+### Features
+
+* **abacus-react:** add BigInt support for 30-digit Dan level abacuses ([0ab4cc2](https://github.com/antialias/soroban-abacus-flashcards/commit/0ab4cc288066b75a6ea4371f65098db5c0fc8847))
+* **levels:** add hover interaction and smooth React Spring transitions ([fd2b633](https://github.com/antialias/soroban-abacus-flashcards/commit/fd2b6338a84c3bbc683eff216a8da3b155749f0f))
+
 ## [4.32.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.0...v4.32.1) (2025-10-20)
 
 

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

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { useSpring, animated } from '@react-spring/web'
 import { AbacusReact } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
@@ -121,12 +122,36 @@ const allLevels = [
 
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
+  const sliderRef = useRef<HTMLInputElement>(null)
   const currentLevel = allLevels[currentIndex]
 
   // Calculate scale factor based on number of columns to fit the page
   // Smaller scale for more columns (Dan levels with 30 columns)
   const scaleFactor = Math.min(2.5, 20 / currentLevel.digits)
 
+  // Animate scale factor with React Spring for smooth transitions
+  const animatedProps = useSpring({
+    scaleFactor,
+    config: { tension: 280, friction: 60 },
+  })
+
+  // Handle mouse/touch move over slider for hover interaction
+  const handleSliderHover = (
+    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
+  ) => {
+    if (!sliderRef.current) return
+
+    const rect = sliderRef.current.getBoundingClientRect()
+    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
+    const x = clientX - rect.left
+    const percentage = Math.max(0, Math.min(1, x / rect.width))
+    const newIndex = Math.round(percentage * (allLevels.length - 1))
+
+    if (newIndex !== currentIndex) {
+      setCurrentIndex(newIndex)
+    }
+  }
+
   // 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.
@@ -228,10 +253,22 @@ export default function LevelsPage() {
                         : 'amber.500',
                 rounded: 'xl',
                 p: { base: '6', md: '8' },
+                height: { base: 'auto', md: '900px' },
+                display: 'flex',
+                flexDirection: 'column',
               })}
             >
               {/* Level Info */}
-              <div className={css({ textAlign: 'center', mb: '6' })}>
+              <div
+                className={css({
+                  textAlign: 'center',
+                  mb: '4',
+                  height: '160px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                })}
+              >
                 <div className={css({ fontSize: '5xl', mb: '3' })}>{currentLevel.emoji}</div>
                 <h2
                   className={css({
@@ -262,27 +299,81 @@ export default function LevelsPage() {
                 )}
               </div>
 
+              {/* Range Slider with hover support */}
+              <div className={css({ mb: '6', px: { base: '2', md: '8' } })}>
+                <div className={css({ mb: '3', textAlign: 'center' })}>
+                  <p className={css({ fontSize: 'sm', color: 'gray.400' })}>
+                    Hover, drag, or touch the slider to explore all levels
+                  </p>
+                </div>
+
+                <div
+                  onMouseMove={handleSliderHover}
+                  onTouchMove={handleSliderHover}
+                  className={css({ position: 'relative' })}
+                >
+                  <input
+                    ref={sliderRef}
+                    type="range"
+                    min="0"
+                    max={allLevels.length - 1}
+                    value={currentIndex}
+                    onChange={(e) => setCurrentIndex(Number(e.target.value))}
+                    className={css({
+                      w: '100%',
+                      h: '2',
+                      bg: 'gray.700',
+                      rounded: 'full',
+                      outline: 'none',
+                      cursor: 'pointer',
+                    })}
+                  />
+                </div>
+
+                {/* Level Markers */}
+                <div
+                  className={css({
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: '3',
+                    fontSize: 'xs',
+                    color: 'gray.500',
+                  })}
+                >
+                  <span>10th Kyu</span>
+                  <span>1st Kyu</span>
+                  <span>10th Dan</span>
+                </div>
+              </div>
+
               {/* Abacus Display */}
               <div
                 className={css({
                   display: 'flex',
                   justifyContent: 'center',
-                  mb: '6',
+                  alignItems: 'center',
                   p: '6',
                   bg: 'rgba(0, 0, 0, 0.3)',
                   rounded: 'lg',
                   border: '1px solid',
                   borderColor: 'gray.700',
-                  overflowX: 'auto',
+                  overflow: 'hidden',
+                  flex: 1,
                 })}
               >
-                <AbacusReact
-                  value={displayValue}
-                  columns={currentLevel.digits}
-                  scaleFactor={scaleFactor}
-                  showNumbers={true}
-                  customStyles={darkStyles}
-                />
+                <animated.div
+                  style={{
+                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
+                  }}
+                >
+                  <AbacusReact
+                    value={displayValue}
+                    columns={currentLevel.digits}
+                    scaleFactor={scaleFactor}
+                    showNumbers={true}
+                    customStyles={darkStyles}
+                  />
+                </animated.div>
               </div>
 
               {/* Digit Count */}
@@ -291,60 +382,6 @@ export default function LevelsPage() {
               </div>
             </div>
 
-            {/* Slider Control */}
-            <div
-              className={css({
-                bg: 'rgba(0, 0, 0, 0.3)',
-                border: '1px solid',
-                borderColor: 'gray.700',
-                rounded: 'xl',
-                p: '6',
-              })}
-            >
-              <div className={css({ mb: '4', textAlign: 'center' })}>
-                <h3
-                  className={css({ fontSize: 'lg', fontWeight: 'bold', color: 'white', mb: '2' })}
-                >
-                  Explore All Levels
-                </h3>
-                <p className={css({ fontSize: 'sm', color: 'gray.400' })}>
-                  Drag the slider to see each rank
-                </p>
-              </div>
-
-              {/* Range Slider */}
-              <input
-                type="range"
-                min="0"
-                max={allLevels.length - 1}
-                value={currentIndex}
-                onChange={(e) => setCurrentIndex(Number(e.target.value))}
-                className={css({
-                  w: '100%',
-                  h: '2',
-                  bg: 'gray.700',
-                  rounded: 'full',
-                  outline: 'none',
-                  cursor: 'pointer',
-                })}
-              />
-
-              {/* Level Markers */}
-              <div
-                className={css({
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  mt: '4',
-                  fontSize: 'xs',
-                  color: 'gray.500',
-                })}
-              >
-                <span>10th Kyu</span>
-                <span>1st Kyu</span>
-                <span>10th Dan</span>
-              </div>
-            </div>
-
             {/* Legend */}
             <div
               className={css({

package.json

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