chore(release): 4.40.0 [skip ci]

## [4.40.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.39.1...v4.40.0) (2025-10-20) ### Features * **levels:** progressive animation speed for Dan levels ([9dff3e7](9dff3e7b7b))
feat(levels): progressive animation speed for Dan levels
2025-10-20 15:58:36 +00:00 · 2025-10-20 10:57:31 -05:00 · 2025-10-20 15:54:04 +00:00 · 2025-10-20 10:52:56 -05:00 · 2025-10-20 15:49:37 +00:00 · 2025-10-20 10:48:22 -05:00
6 changed files with 756 additions and 153 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,145 @@
+## [4.40.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.39.1...v4.40.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** progressive animation speed for Dan levels ([9dff3e7](https://github.com/antialias/soroban-abacus-flashcards/commit/9dff3e7b7b1ca46ea7f19a48135124b80c5182c0))
+
+## [4.39.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.39.0...v4.39.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** improve slider tick spacing to use full width ([1e90d6c](https://github.com/antialias/soroban-abacus-flashcards/commit/1e90d6c6207f29084a8dc96ccfbb1013a1a62271))
+
+## [4.39.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.38.1...v4.39.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add auto-advance slider with hover pause ([41eaed2](https://github.com/antialias/soroban-abacus-flashcards/commit/41eaed24fce510bab7fd03fa2e39e829b33a7346))
+
+## [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)
+
+
+### Features
+
+* **levels:** make emoji tick marks clickable and remove redundant UI ([07c783a](https://github.com/antialias/soroban-abacus-flashcards/commit/07c783a79454f50e7302b19684be6d2e5930154d))
+
+
+### Bug Fixes
+
+* **levels:** add smooth CSS transitions for slider thumb movement ([ca8cef1](https://github.com/antialias/soroban-abacus-flashcards/commit/ca8cef1c36efeb1c8c214c74f8bd383f9295be3b))
+
+## [4.35.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.35.0...v4.35.1) (2025-10-20)
+
+
+### Features
+
+* **abacus-react:** export StandaloneBead component wired to AbacusDisplayContext ([0146ce1](https://github.com/antialias/soroban-abacus-flashcards/commit/0146ce1e67da27a24cbaa8338ba6a1a6befd6bd3))
+
+
+### Performance Improvements
+
+* **levels:** speed up slider animations for more responsive feel ([1e5467f](https://github.com/antialias/soroban-abacus-flashcards/commit/1e5467fad4e27b832300c49b4f73547dc47598b0))
+
+## [4.35.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.34.0...v4.35.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** replace slider thumb with diamond-shaped abacus beads ([0fbde53](https://github.com/antialias/soroban-abacus-flashcards/commit/0fbde53039d3ea000c6a3be492b733479e7bf47c))
+
+## [4.34.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.8...v4.34.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** redesign slider with abacus-themed beads ([f3dce84](https://github.com/antialias/soroban-abacus-flashcards/commit/f3dce84532fa706e4ec9551facde2055a060ee13))
+
+
+### Code Refactoring
+
+* **levels:** convert to Radix UI Slider with abacus theme ([a03e73c](https://github.com/antialias/soroban-abacus-flashcards/commit/a03e73c849c5da4337f26a74b8f12b617c66068e))
+
+## [4.33.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.7...v4.33.8) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** reduce Dan scale and container height to prevent clipping ([563136f](https://github.com/antialias/soroban-abacus-flashcards/commit/563136fb79fa10b2af3a119bf0f861e3b0812b2e))
+* **levels:** reduce max scale factor to allow more compact container ([ead9ee9](https://github.com/antialias/soroban-abacus-flashcards/commit/ead9ee9589aa4d7376e9385da5da53a6b444858a))
+
+## [4.33.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.6...v4.33.7) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** reduce scale factor variation to minimize margin differences ([abb647c](https://github.com/antialias/soroban-abacus-flashcards/commit/abb647ce40b8f9d0c8268ab18c139324ae3195c5))
+
+## [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)


--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -1,24 +1,85 @@
 'use client'

-import { useRef, useState } from 'react'
-import { useSpring, animated } from '@react-spring/web'
-import { AbacusReact } from '@soroban/abacus-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'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
 import { container, stack } from '../../../styled-system/patterns'

 // Combine all levels into one array for the slider
 const allLevels = [
-  { level: '10th Kyu', emoji: '🧒', color: 'green', digits: 2, type: 'kyu' as const },
-  { level: '9th Kyu', emoji: '🧒', color: 'green', digits: 2, type: 'kyu' as const },
-  { level: '8th Kyu', emoji: '🧒', color: 'green', digits: 3, type: 'kyu' as const },
-  { level: '7th Kyu', emoji: '🧒', color: 'green', digits: 4, type: 'kyu' as const },
-  { level: '6th Kyu', emoji: '🧑', color: 'blue', digits: 5, type: 'kyu' as const },
-  { level: '5th Kyu', emoji: '🧑', color: 'blue', digits: 6, type: 'kyu' as const },
-  { level: '4th Kyu', emoji: '🧑', color: 'blue', digits: 7, type: 'kyu' as const },
-  { level: '3rd Kyu', emoji: '🧔', color: 'violet', digits: 8, type: 'kyu' as const },
-  { level: '2nd Kyu', emoji: '🧔', color: 'violet', digits: 9, type: 'kyu' as const },
-  { level: '1st Kyu', emoji: '🧔', color: 'violet', digits: 10, type: 'kyu' as const },
+  {
+    level: '10th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    digits: 2,
+    type: 'kyu' as const,
+  },
+  {
+    level: '9th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    digits: 2,
+    type: 'kyu' as const,
+  },
+  {
+    level: '8th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    digits: 3,
+    type: 'kyu' as const,
+  },
+  {
+    level: '7th Kyu',
+    emoji: '🧒',
+    color: 'green',
+    digits: 4,
+    type: 'kyu' as const,
+  },
+  {
+    level: '6th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    digits: 5,
+    type: 'kyu' as const,
+  },
+  {
+    level: '5th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    digits: 6,
+    type: 'kyu' as const,
+  },
+  {
+    level: '4th Kyu',
+    emoji: '🧑',
+    color: 'blue',
+    digits: 7,
+    type: 'kyu' as const,
+  },
+  {
+    level: '3rd Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    digits: 8,
+    type: 'kyu' as const,
+  },
+  {
+    level: '2nd Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    digits: 9,
+    type: 'kyu' as const,
+  },
+  {
+    level: '1st Kyu',
+    emoji: '🧔',
+    color: 'violet',
+    digits: 10,
+    type: 'kyu' as const,
+  },
  {
    level: 'Pre-1st Dan',
    name: 'Jun-Shodan',
@@ -122,47 +183,110 @@ const allLevels = [

 export default function LevelsPage() {
  const [currentIndex, setCurrentIndex] = useState(0)
-  const sliderRef = useRef<HTMLInputElement>(null)
+  const [isHovering, setIsHovering] = useState(false)
+  const [isPaneHovered, setIsPaneHovered] = 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 - speed increases with Dan level
+  useEffect(() => {
+    // Calculate animation speed based on level
+    // Kyu levels: 500ms
+    // Dan levels: interpolate from 500ms (Pre-1st Dan) to 50ms (10th Dan)
+    const getAnimationInterval = () => {
+      if (currentIndex < 10) {
+        // Kyu levels: constant 500ms
+        return 500
+      }
+      // Dan levels: speed up from 500ms to 50ms
+      // Index 10 (Pre-1st Dan) → 500ms
+      // Index 20 (10th Dan) → 50ms
+      const danProgress = (currentIndex - 10) / 10 // 0.0 to 1.0
+      return 500 - danProgress * 450 // 500ms down to 50ms
+    }
+
+    const intervalMs = getAnimationInterval()
+
+    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('')
+      })
+    }, intervalMs)
+
+    return () => clearInterval(interval)
+  }, [currentIndex])
+
+  // Auto-advance slider position every 3 seconds (unless pane is hovered)
+  useEffect(() => {
+    if (isPaneHovered) return // Don't auto-advance when mouse is over the pane
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => {
+        // Cycle back to 0 when reaching the end
+        return prev >= allLevels.length - 1 ? 0 : prev + 1
+      })
+    }, 3000)
+
+    return () => clearInterval(interval)
+  }, [isPaneHovered])
+
+  // 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
-  // Smaller scale for more columns (Dan levels with 30 columns)
-  const scaleFactor = Math.min(2.5, 20 / currentLevel.digits)
+  // 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)
+  const scaleFactor = Math.max(1.2, Math.min(2.0, 20 / currentLevel.digits))

  // Animate scale factor with React Spring for smooth transitions
  const animatedProps = useSpring({
    scaleFactor,
-    config: { tension: 280, friction: 60 },
+    config: { tension: 350, friction: 45 },
  })

-  // 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.
-  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)
+  // Animate emoji with proper cross-fade (old fades out, new fades in)
+  const emojiTransitions = useTransition(currentLevel.emoji, {
+    keys: currentIndex,
+    from: { opacity: 0 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+    config: { duration: 120 },
+  })

+  // 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 = {
@@ -203,7 +327,13 @@ export default function LevelsPage() {
            })}
          />

-          <div className={container({ maxW: '6xl', px: '4', position: 'relative' })}>
+          <div
+            className={container({
+              maxW: '6xl',
+              px: '4',
+              position: 'relative',
+            })}
+          >
            <div className={css({ textAlign: 'center', maxW: '5xl', mx: 'auto' })}>
              <h1
                className={css({
@@ -240,8 +370,10 @@ export default function LevelsPage() {
          <section className={stack({ gap: '8' })}>
            {/* Current Level Display */}
            <div
+              onMouseEnter={() => setIsPaneHovered(true)}
+              onMouseLeave={() => setIsPaneHovered(false)}
              className={css({
-                bg: 'rgba(0, 0, 0, 0.4)',
+                bg: 'transparent',
                border: '2px solid',
                borderColor:
                  currentLevel.color === 'green'
@@ -253,130 +385,235 @@ export default function LevelsPage() {
                        : 'amber.500',
                rounded: 'xl',
                p: { base: '6', md: '8' },
+                height: { base: 'auto', md: '700px' },
+                display: 'flex',
+                flexDirection: 'column',
              })}
            >
-              {/* Level Info */}
-              <div className={css({ textAlign: 'center', mb: '6' })}>
-                <div className={css({ fontSize: '5xl', mb: '3' })}>{currentLevel.emoji}</div>
-                <h2
+              {/* Abacus-themed Radix Slider */}
+              <div className={css({ mb: '6', px: { base: '2', md: '8' } })}>
+                <div className={css({ position: 'relative', py: '12' })}>
+                  {/* Emoji tick marks */}
+                  <div
+                    className={css({
+                      position: 'absolute',
+                      top: '0',
+                      left: '0',
+                      right: '0',
+                      h: 'full',
+                      display: 'flex',
+                      alignItems: 'center',
+                      pointerEvents: 'none',
+                      px: '0', // Use full width for tick spacing
+                    })}
+                  >
+                    <div
+                      className={css({
+                        position: 'relative',
+                        w: 'full',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                      })}
+                    >
+                      {allLevels.map((level, index) => (
+                        <div
+                          key={index}
+                          onClick={() => setCurrentIndex(index)}
+                          className={css({
+                            fontSize: '4xl',
+                            opacity: index === currentIndex ? '1' : '0.3',
+                            transition: 'all 0.2s',
+                            cursor: 'pointer',
+                            pointerEvents: 'auto',
+                            _hover: { opacity: index === currentIndex ? '1' : '0.6' },
+                          })}
+                        >
+                          {level.emoji}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <Slider.Root
+                    value={[currentIndex]}
+                    onValueChange={([value]) => setCurrentIndex(value)}
+                    min={0}
+                    max={allLevels.length - 1}
+                    step={1}
+                    onMouseMove={handleSliderHover}
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
+                    className={css({
+                      position: 'relative',
+                      display: 'flex',
+                      alignItems: 'center',
+                      userSelect: 'none',
+                      touchAction: 'none',
+                      w: 'full',
+                      h: '32',
+                      cursor: 'pointer',
+                    })}
+                  >
+                    <Slider.Track
+                      className={css({
+                        bg: 'rgba(255, 255, 255, 0.2)',
+                        position: 'relative',
+                        flexGrow: 1,
+                        rounded: 'full',
+                        h: '3px',
+                      })}
+                    >
+                      <Slider.Range className={css({ display: 'none' })} />
+                    </Slider.Track>
+
+                    <Slider.Thumb
+                      className={css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        position: 'relative',
+                        w: '180px',
+                        h: '128px',
+                        bg: 'transparent',
+                        cursor: 'grab',
+                        transition: 'transform 0.15s ease-out, left 0.3s ease-out',
+                        zIndex: 10,
+                        _hover: { transform: 'scale(1.15)' },
+                        _focus: {
+                          outline: 'none',
+                          transform: 'scale(1.15)',
+                        },
+                        _active: { cursor: 'grabbing' },
+                      })}
+                    >
+                      <div className={css({ opacity: 0.75 })}>
+                        <StandaloneBead
+                          size={128}
+                          color={currentLevel.color === 'violet' ? '#8b5cf6' : '#22c55e'}
+                          animated={false}
+                        />
+                      </div>
+                      {emojiTransitions((style, emoji) => (
+                        <animated.div
+                          style={style}
+                          className={css({
+                            position: 'absolute',
+                            fontSize: '9xl',
+                            pointerEvents: 'none',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                          })}
+                        >
+                          {emoji}
+                        </animated.div>
+                      ))}
+
+                      {/* Level text as part of the bead display */}
+                      <div
+                        className={css({
+                          position: 'absolute',
+                          bottom: '-80px',
+                          left: '50%',
+                          transform: 'translateX(-50%)',
+                          textAlign: 'center',
+                          pointerEvents: 'none',
+                          whiteSpace: 'nowrap',
+                        })}
+                      >
+                        <h2
+                          className={css({
+                            fontSize: '2xl',
+                            fontWeight: 'bold',
+                            color:
+                              currentLevel.color === 'green'
+                                ? 'green.400'
+                                : currentLevel.color === 'blue'
+                                  ? 'blue.400'
+                                  : currentLevel.color === 'violet'
+                                    ? 'violet.400'
+                                    : 'amber.400',
+                            mb: '0.5',
+                          })}
+                        >
+                          {currentLevel.level}
+                        </h2>
+                        {'name' in currentLevel && (
+                          <div
+                            className={css({
+                              fontSize: 'md',
+                              color: 'gray.300',
+                              mb: '0.5',
+                            })}
+                          >
+                            {currentLevel.name}
+                          </div>
+                        )}
+                        {'minScore' in currentLevel && (
+                          <div className={css({ fontSize: 'sm', color: 'gray.400' })}>
+                            Min: {currentLevel.minScore}pts
+                          </div>
+                        )}
+                      </div>
+                    </Slider.Thumb>
+                  </Slider.Root>
+                </div>
+
+                {/* Level Markers */}
+                <div
                  className={css({
-                    fontSize: { base: '2xl', md: '3xl' },
-                    fontWeight: 'bold',
-                    color:
-                      currentLevel.color === 'green'
-                        ? 'green.400'
-                        : currentLevel.color === 'blue'
-                          ? 'blue.400'
-                          : currentLevel.color === 'violet'
-                            ? 'violet.400'
-                            : 'amber.400',
-                    mb: '2',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: '1',
+                    fontSize: 'xs',
+                    color: 'gray.500',
                  })}
                >
-                  {currentLevel.level}
-                </h2>
-                {'name' in currentLevel && (
-                  <div className={css({ fontSize: 'md', color: 'gray.400', mb: '1' })}>
-                    {currentLevel.name}
-                  </div>
-                )}
-                {'minScore' in currentLevel && (
-                  <div className={css({ fontSize: 'sm', color: 'gray.500' })}>
-                    Minimum Score: {currentLevel.minScore} points
-                  </div>
-                )}
+                  <span>10th Kyu</span>
+                  <span>1st Kyu</span>
+                  <span>10th Dan</span>
+                </div>
              </div>

              {/* Abacus Display */}
-              <animated.div
+              <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,
                })}
-                style={{
-                  transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                }}
              >
-                <AbacusReact
-                  value={displayValue}
-                  columns={currentLevel.digits}
-                  scaleFactor={scaleFactor}
-                  showNumbers={true}
-                  customStyles={darkStyles}
-                />
-              </animated.div>
+                <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 */}
-              <div className={css({ textAlign: 'center', color: 'gray.400', fontSize: 'sm' })}>
-                Requires mastery of <strong>{currentLevel.digits}-digit</strong> calculations
-              </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' })}>
-                  Hover, drag, or touch the slider to see each rank
-                </p>
-              </div>
-
-              {/* Range Slider with hover support */}
-              <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: '4',
-                  fontSize: 'xs',
-                  color: 'gray.500',
+                  textAlign: 'center',
+                  color: 'gray.400',
+                  fontSize: 'sm',
                })}
              >
-                <span>10th Kyu</span>
-                <span>1st Kyu</span>
-                <span>10th Dan</span>
+                Requires mastery of <strong>{currentLevel.digits}-digit</strong> calculations
              </div>
            </div>

@@ -394,26 +631,78 @@ export default function LevelsPage() {
                borderColor: 'gray.700',
              })}
            >
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'green.500', rounded: 'sm' })} />
+              <div
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '2',
+                })}
+              >
+                <div
+                  className={css({
+                    w: '4',
+                    h: '4',
+                    bg: 'green.500',
+                    rounded: 'sm',
+                  })}
+                />
                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
                  Beginner (10-7 Kyu)
                </span>
              </div>
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'blue.500', rounded: 'sm' })} />
+              <div
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '2',
+                })}
+              >
+                <div
+                  className={css({
+                    w: '4',
+                    h: '4',
+                    bg: 'blue.500',
+                    rounded: 'sm',
+                  })}
+                />
                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
                  Intermediate (6-4 Kyu)
                </span>
              </div>
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'violet.500', rounded: 'sm' })} />
+              <div
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '2',
+                })}
+              >
+                <div
+                  className={css({
+                    w: '4',
+                    h: '4',
+                    bg: 'violet.500',
+                    rounded: 'sm',
+                  })}
+                />
                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
                  Advanced (3-1 Kyu)
                </span>
              </div>
-              <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
-                <div className={css({ w: '4', h: '4', bg: 'amber.500', rounded: 'sm' })} />
+              <div
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '2',
+                })}
+              >
+                <div
+                  className={css({
+                    w: '4',
+                    h: '4',
+                    bg: 'amber.500',
+                    rounded: 'sm',
+                  })}
+                />
                <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
                  Master (Dan ranks)
                </span>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.33.0",
+  "version": "4.40.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
--- a/packages/abacus-react/CHANGELOG.md
+++ b/packages/abacus-react/CHANGELOG.md
@@ -1,3 +1,25 @@
+# [2.1.0](https://github.com/antialias/soroban-abacus-flashcards/compare/abacus-react-v2.0.0...abacus-react-v2.1.0) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** add fixed height to entire level display pane ([200b26c](https://github.com/antialias/soroban-abacus-flashcards/commit/200b26c2cd35d1d637ede9dcfc3dbbc7f3f19320))
+* **levels:** increase container height to prevent abacus clipping ([cd5c15a](https://github.com/antialias/soroban-abacus-flashcards/commit/cd5c15aeb260c568fe7ad9b6a4f51c4d6498b2b8))
+* **levels:** only animate abacus, not container with background/border ([c80477d](https://github.com/antialias/soroban-abacus-flashcards/commit/c80477d24877ddada5f3f4405abbf05e1d753b5d))
+* **levels:** reduce Dan scale and container height to prevent clipping ([563136f](https://github.com/antialias/soroban-abacus-flashcards/commit/563136fb79fa10b2af3a119bf0f861e3b0812b2e))
+* **levels:** reduce max scale factor to allow more compact container ([ead9ee9](https://github.com/antialias/soroban-abacus-flashcards/commit/ead9ee9589aa4d7376e9385da5da53a6b444858a))
+* **levels:** reduce scale factor variation to minimize margin differences ([abb647c](https://github.com/antialias/soroban-abacus-flashcards/commit/abb647ce40b8f9d0c8268ab18c139324ae3195c5))
+* **levels:** revert delayed column change, keep overflow hidden ([22f00f5](https://github.com/antialias/soroban-abacus-flashcards/commit/22f00f59f5facc36a846408dcd196ec54ea676b1))
+* **levels:** stabilize slider position and prevent abacus clipping ([09004dc](https://github.com/antialias/soroban-abacus-flashcards/commit/09004dc2c055031ee2f71c964ceee6f7b1d42ecd))
+
+
+### Features
+
+* **abacus-react:** export StandaloneBead component wired to AbacusDisplayContext ([0146ce1](https://github.com/antialias/soroban-abacus-flashcards/commit/0146ce1e67da27a24cbaa8338ba6a1a6befd6bd3))
+* **levels:** add hover interaction and smooth React Spring transitions ([fd2b633](https://github.com/antialias/soroban-abacus-flashcards/commit/fd2b6338a84c3bbc683eff216a8da3b155749f0f))
+* **levels:** redesign slider with abacus-themed beads ([f3dce84](https://github.com/antialias/soroban-abacus-flashcards/commit/f3dce84532fa706e4ec9551facde2055a060ee13))
+* **levels:** replace slider thumb with diamond-shaped abacus beads ([0fbde53](https://github.com/antialias/soroban-abacus-flashcards/commit/0fbde53039d3ea000c6a3be492b733479e7bf47c))
+
 # [2.0.0](https://github.com/antialias/soroban-abacus-flashcards/compare/abacus-react-v1.8.0...abacus-react-v2.0.0) (2025-10-20)


--- a/packages/abacus-react/src/StandaloneBead.tsx
+++ b/packages/abacus-react/src/StandaloneBead.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import React from "react";
+import { useSpring, animated } from "@react-spring/web";
+import {
+  useAbacusConfig,
+  getDefaultAbacusConfig,
+  type BeadShape,
+} from "./AbacusContext";
+
+export interface StandaloneBeadProps {
+  /** Size of the bead in pixels */
+  size?: number;
+  /** Override the shape from context (diamond, circle, square) */
+  shape?: BeadShape;
+  /** Override the color from context */
+  color?: string;
+  /** Enable animation */
+  animated?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Custom style */
+  style?: React.CSSProperties;
+  /** Active state for the bead */
+  active?: boolean;
+}
+
+/**
+ * Standalone Bead component that respects the AbacusDisplayContext.
+ * This component renders a single abacus bead with styling from the context.
+ *
+ * Usage:
+ * ```tsx
+ * import { StandaloneBead, AbacusDisplayProvider } from '@soroban/abacus-react';
+ *
+ * <AbacusDisplayProvider>
+ *   <StandaloneBead size={28} color="#8b5cf6" />
+ * </AbacusDisplayProvider>
+ * ```
+ */
+export const StandaloneBead: React.FC<StandaloneBeadProps> = ({
+  size = 28,
+  shape: shapeProp,
+  color: colorProp,
+  animated: animatedProp,
+  className,
+  style,
+  active = true,
+}) => {
+  // Try to use context config, fallback to defaults if no context
+  let contextConfig;
+  try {
+    contextConfig = useAbacusConfig();
+  } catch {
+    // No context provider, use defaults
+    contextConfig = getDefaultAbacusConfig();
+  }
+
+  // Use props if provided, otherwise fall back to context config
+  const shape = shapeProp ?? contextConfig.beadShape;
+  const enableAnimation = animatedProp ?? contextConfig.animated;
+  const color = colorProp ?? "#000000";
+
+  const [springs, api] = useSpring(() => ({
+    scale: 1,
+    config: { tension: 300, friction: 20 },
+  }));
+
+  React.useEffect(() => {
+    if (enableAnimation) {
+      api.start({ scale: 1 });
+    }
+  }, [enableAnimation, api]);
+
+  const renderShape = () => {
+    const halfSize = size / 2;
+    const actualColor = active ? color : "rgb(211, 211, 211)";
+
+    switch (shape) {
+      case "diamond":
+        return (
+          <polygon
+            points={`${size * 0.7},0 ${size * 1.4},${halfSize} ${size * 0.7},${size} 0,${halfSize}`}
+            fill={actualColor}
+            stroke="#000"
+            strokeWidth="0.5"
+          />
+        );
+      case "square":
+        return (
+          <rect
+            width={size}
+            height={size}
+            fill={actualColor}
+            stroke="#000"
+            strokeWidth="0.5"
+            rx="1"
+          />
+        );
+      case "circle":
+      default:
+        return (
+          <circle
+            cx={halfSize}
+            cy={halfSize}
+            r={halfSize}
+            fill={actualColor}
+            stroke="#000"
+            strokeWidth="0.5"
+          />
+        );
+    }
+  };
+
+  const getXOffset = () => {
+    return shape === "diamond" ? size * 0.7 : size / 2;
+  };
+
+  const getYOffset = () => {
+    return size / 2;
+  };
+
+  const AnimatedG = animated.g;
+
+  return (
+    <svg
+      width={size * (shape === "diamond" ? 1.4 : 1)}
+      height={size}
+      className={className}
+      style={style}
+    >
+      <AnimatedG
+        transform={`translate(0, 0)`}
+        style={
+          enableAnimation
+            ? {
+                transform: springs.scale.to((s) => `scale(${s})`),
+                transformOrigin: "center",
+              }
+            : undefined
+        }
+      >
+        {renderShape()}
+      </AnimatedG>
+    </svg>
+  );
+};
--- a/packages/abacus-react/src/index.ts
+++ b/packages/abacus-react/src/index.ts
@@ -14,3 +14,6 @@ export type {
  AbacusDisplayConfig,
  AbacusDisplayContextType,
 } from "./AbacusContext";
+
+export { StandaloneBead } from "./StandaloneBead";
+export type { StandaloneBeadProps } from "./StandaloneBead";