chore(release): 4.44.2 [skip ci]

## [4.44.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.1...v4.44.2) (2025-10-20)

### Bug Fixes

* **levels:** match top/bottom margins to left padding on kyu detail boxes ([aa0bdcf](aa0bdcf686))

CHANGELOG.md

@@ -1,3 +1,108 @@
+## [4.44.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.1...v4.44.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** match top/bottom margins to left padding on kyu detail boxes ([aa0bdcf](https://github.com/antialias/soroban-abacus-flashcards/commit/aa0bdcf686adcbfd1a145cf67121181d1f1194d9))
+
+## [4.44.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.0...v4.44.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** add fixed dimensions and margins to kyu detail boxes ([05dd0b3](https://github.com/antialias/soroban-abacus-flashcards/commit/05dd0b30d3c397b82b7b7cc93a5ea575f3aada6d))
+
+## [4.44.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.2...v4.44.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** redesign kyu details with larger operators and prominent digits ([6739d59](https://github.com/antialias/soroban-abacus-flashcards/commit/6739d59f2b6189a98570e23e04c20d86d774ccce))
+
+## [4.43.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.1...v4.43.2) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** remove Time and Pass sections from kyu details ([d90b5d5](https://github.com/antialias/soroban-abacus-flashcards/commit/d90b5d55322e75dd28b95376614663a506c829d4))
+
+## [4.43.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.43.0...v4.43.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** use two-column grid for kyu details to prevent clipping ([fa3b73c](https://github.com/antialias/soroban-abacus-flashcards/commit/fa3b73c69169b4694201ffa19ae3f8b5a68dfe32))
+
+## [4.43.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.42.1...v4.43.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add structured kyu exam details with card UI ([6501b07](https://github.com/antialias/soroban-abacus-flashcards/commit/6501b073b100a00982cff1ca3140921e74f31a9c))
+
+## [4.42.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.42.0...v4.42.1) (2025-10-20)
+
+
+### Code Refactoring
+
+* **levels:** store kyu data verbatim, add formatting layer ([53d23f1](https://github.com/antialias/soroban-abacus-flashcards/commit/53d23f19bc06459462afb76ed94d9b99d583a32d))
+
+## [4.42.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.41.0...v4.42.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add kyu level details display with English translations ([c650ffa](https://github.com/antialias/soroban-abacus-flashcards/commit/c650ffa1935fe370d37190b2843c0deecdcce8e7))
+
+## [4.41.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.40.1...v4.41.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** right-align abacus display ([8681b17](https://github.com/antialias/soroban-abacus-flashcards/commit/8681b17340e757cf04d17f884a780a251645bb33))
+
+## [4.40.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.40.0...v4.40.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **levels:** increase animation speed to 10ms for 10th Dan ([6f89d9e](https://github.com/antialias/soroban-abacus-flashcards/commit/6f89d9e274082908fc090a9c0ba310f2cb06f014))
+
+## [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)
 
 

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

@@ -1,12 +1,13 @@
 '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'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
 import { container, stack } from '../../../styled-system/patterns'
+import { kyuLevelDetails } from '@/data/kyuLevelDetails'
 
 // Combine all levels into one array for the slider
 const allLevels = [
@@ -181,11 +182,157 @@ const allLevels = [
   },
 ] as const
 
+// Helper function to map level names to kyuLevelDetails keys
+function getLevelDetailsKey(levelName: string): string | null {
+  // Convert "10th Kyu" → "10-kyu", "3rd Kyu" → "3-kyu", etc.
+  const match = levelName.match(/^(\d+)(?:st|nd|rd|th)\s+Kyu$/)
+  if (match) {
+    return `${match[1]}-kyu`
+  }
+  return null
+}
+
+// Parse and format kyu level details into structured sections with icons
+function parseKyuDetails(rawText: string) {
+  const lines = rawText.split('\n').filter((line) => line.trim() && !line.includes('shuzan.jp'))
+
+  // Always return sections in consistent order: Add/Sub, Multiply, Divide
+  const sections: Array<{
+    type: 'addSub' | 'multiply' | 'divide'
+    icon: string
+    label: string
+    digits: string | null
+    rows: string | null
+    chars: string | null
+    problems: string | null
+  }> = [
+    {
+      type: 'addSub',
+      icon: '➕➖',
+      label: 'Add/Sub',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+    {
+      type: 'multiply',
+      icon: '✖️',
+      label: 'Multiply',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+    {
+      type: 'divide',
+      icon: '➗',
+      label: 'Divide',
+      digits: null,
+      rows: null,
+      chars: null,
+      problems: null,
+    },
+  ]
+
+  for (const line of lines) {
+    if (line.includes('Add/Sub:')) {
+      const match = line.match(/(\d+)-digit.*?(\d+)口.*?(\d+)字/)
+      if (match) {
+        sections[0].digits = match[1]
+        sections[0].rows = match[2]
+        sections[0].chars = match[3]
+      }
+    } else if (line.includes('×:')) {
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
+      if (match) {
+        sections[1].digits = match[1]
+        sections[1].problems = match[2]
+      }
+    } else if (line.includes('÷:')) {
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
+      if (match) {
+        sections[2].digits = match[1]
+        sections[2].problems = match[2]
+      }
+    }
+  }
+
+  return sections
+}
+
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
   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
+    // Pre-1st Dan: 500ms
+    // 1st-10th Dan: interpolate from 500ms to 10ms
+    const getAnimationInterval = () => {
+      if (currentIndex < 11) {
+        // Kyu levels and Pre-1st Dan: constant 500ms
+        return 500
+      }
+      // 1st Dan through 10th Dan: speed up from 500ms to 10ms
+      // Index 11 (1st Dan) → 500ms
+      // Index 20 (10th Dan) → 10ms
+      const danProgress = (currentIndex - 11) / 9 // 0.0 to 1.0
+      return 500 - danProgress * 490 // 500ms down to 10ms
+    }
+
+    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()
@@ -215,17 +362,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 = {
@@ -309,6 +451,8 @@ export default function LevelsPage() {
           <section className={stack({ gap: '8' })}>
             {/* Current Level Display */}
             <div
+              onMouseEnter={() => setIsPaneHovered(true)}
+              onMouseLeave={() => setIsPaneHovered(false)}
               className={css({
                 bg: 'transparent',
                 border: '2px solid',
@@ -341,7 +485,7 @@ export default function LevelsPage() {
                       display: 'flex',
                       alignItems: 'center',
                       pointerEvents: 'none',
-                      px: '90px', // Half of bead width (180px / 2)
+                      px: '0', // Use full width for tick spacing
                     })}
                   >
                     <div
@@ -450,7 +594,7 @@ export default function LevelsPage() {
                       <div
                         className={css({
                           position: 'absolute',
-                          bottom: '-60px',
+                          bottom: '-80px',
                           left: '50%',
                           transform: 'translateX(-50%)',
                           textAlign: 'center',
@@ -512,12 +656,11 @@ export default function LevelsPage() {
                 </div>
               </div>
 
-              {/* Abacus Display */}
+              {/* Abacus Display with Level Details */}
               <div
                 className={css({
                   display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
+                  gap: '4',
                   p: '6',
                   bg: 'rgba(0, 0, 0, 0.3)',
                   rounded: 'lg',
@@ -527,19 +670,149 @@ export default function LevelsPage() {
                   flex: 1,
                 })}
               >
-                <animated.div
-                  style={{
-                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                  }}
+                {/* Level Details (only for Kyu levels) */}
+                {currentLevel.type === 'kyu' &&
+                  (() => {
+                    const detailsKey = getLevelDetailsKey(currentLevel.level)
+                    const rawText = detailsKey
+                      ? kyuLevelDetails[detailsKey as keyof typeof kyuLevelDetails]
+                      : null
+                    const sections = rawText ? parseKyuDetails(rawText) : []
+
+                    // Use consistent sizing across all levels
+                    const sizing = { fontSize: 'md', gap: '3', iconSize: '4xl' }
+
+                    return sections.length > 0 ? (
+                      <div
+                        className={css({
+                          flex: '0 0 auto',
+                          display: 'grid',
+                          gridTemplateColumns: 'repeat(2, 1fr)',
+                          gap: sizing.gap,
+                          pr: '4',
+                          pl: '2',
+                          borderRight: '1px solid',
+                          borderColor: 'gray.600',
+                          maxW: '480px',
+                          alignContent: 'center',
+                          my: '2',
+                        })}
+                      >
+                        {sections.map((section, idx) => {
+                          const hasData = section.digits !== null
+                          const levelColor =
+                            currentLevel.color === 'green'
+                              ? 'green.300'
+                              : currentLevel.color === 'blue'
+                                ? 'blue.300'
+                                : 'violet.300'
+
+                          return (
+                            <div
+                              key={idx}
+                              className={css({
+                                bg: hasData ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.2)',
+                                border: '1px solid',
+                                borderColor: hasData ? 'gray.700' : 'gray.800',
+                                rounded: 'md',
+                                p: '4',
+                                transition: 'all 0.2s',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: '2',
+                                opacity: hasData ? 1 : 0.3,
+                                width: '200px',
+                                height: '180px',
+                                _hover: hasData
+                                  ? {
+                                      borderColor: 'gray.500',
+                                      transform: 'scale(1.05)',
+                                    }
+                                  : {},
+                              })}
+                            >
+                              <span className={css({ fontSize: sizing.iconSize, lineHeight: '1' })}>
+                                {section.icon}
+                              </span>
+                              {hasData && section.digits && (
+                                <>
+                                  <div
+                                    className={css({
+                                      fontSize: '2xl',
+                                      fontWeight: 'bold',
+                                      color: levelColor,
+                                    })}
+                                  >
+                                    {section.digits} digits
+                                  </div>
+                                  {(section.rows || section.chars) && (
+                                    <div
+                                      className={css({
+                                        fontSize: 'sm',
+                                        color: 'gray.400',
+                                        textAlign: 'center',
+                                      })}
+                                    >
+                                      {section.rows && `${section.rows} rows`}
+                                      {section.rows && section.chars && ' • '}
+                                      {section.chars && `${section.chars} chars`}
+                                    </div>
+                                  )}
+                                  {section.problems && (
+                                    <div
+                                      className={css({
+                                        fontSize: 'sm',
+                                        color: 'gray.400',
+                                        textAlign: 'center',
+                                      })}
+                                    >
+                                      {section.problems} problems
+                                    </div>
+                                  )}
+                                </>
+                              )}
+                              <div
+                                className={css({
+                                  fontSize: 'xs',
+                                  color: hasData ? 'gray.500' : 'gray.700',
+                                  textAlign: 'center',
+                                  fontWeight: hasData ? 'normal' : 'bold',
+                                })}
+                              >
+                                {section.label}
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    ) : null
+                  })()}
+
+                {/* Abacus (right-aligned for Kyu, centered for Dan) */}
+                <div
+                  className={css({
+                    display: 'flex',
+                    justifyContent: currentLevel.type === 'kyu' ? 'flex-end' : 'center',
+                    alignItems: 'center',
+                    flex: 1,
+                  })}
                 >
-                  <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>
               </div>
 
               {/* Digit Count */}

apps/web/src/data/kyuLevelDetails.ts

@@ -0,0 +1,123 @@
+/**
+ * Detailed requirements for each Kyu level in the Soroban certification system
+ * Source: shuzan.jp
+ *
+ * Note: Stored verbatim from source. Display formatting/translation happens in the UI layer.
+ */
+
+export const kyuLevelDetails = {
+  '10-kyu': `Add/Sub: 2-digit, 5口, 10字
+
+×: 実+法 = 3 digits (20 problems)
+
+Time: 20 min; Pass ≥ 60/200.
+shuzan.jp`,
+
+  '9-kyu': `Add/Sub: 2-digit, 5口, 10字
+
+×: 実+法 = 3 digits (20)
+
+Time: 20 min; Pass ≥ 120/200. (If only one part clears, it's treated as 10-kyu per federation notes.)
+shuzan.jp`,
+
+  '8-kyu': `Add/Sub: 2-digit, 8口, 16字
+
+×: 実+法 = 4 digits (10)
+
+÷: 法+商 = 3 digits (10)
+
+Time: 20 min; Pass ≥ 120/200.
+shuzan.jp`,
+
+  '7-kyu': `Add/Sub: 2-digit, 10口, 20字
+
+×: 実+法 = 4 digits (10)
+
+÷: 法+商 = 4 digits (10)
+
+Time: 20 min; Pass ≥ 120/200.
+shuzan.jp`,
+
+  '6-kyu': `Add/Sub: 10口, 30字
+
+×: 実+法 = 5 digits (20)
+
+÷: 法+商 = 4 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  '5-kyu': `Add/Sub: 10口, 40字
+
+×: 実+法 = 6 digits (20)
+
+÷: 法+商 = 5 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  '4-kyu': `Add/Sub: 10口, 50字
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 210/300.
+shuzan.jp`,
+
+  'Pre-3-kyu': `Add/Sub: 10口, 50字 ×5題 and 10口, 60字 ×5題 (total 10)
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '3-kyu': `Add/Sub: 10口, 60字
+
+×: 実+法 = 7 digits (20)
+
+÷: 法+商 = 6 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  'Pre-2-kyu': `Add/Sub: 10口, 70字
+
+×: 実+法 = 8 digits (20)
+
+÷: 法+商 = 7 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '2-kyu': `Add/Sub: 10口, 80字
+
+×: 実+法 = 9 digits (20)
+
+÷: 法+商 = 8 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  'Pre-1-kyu': `Add/Sub: 10口, 90字
+
+×: 実+法 = 10 digits (20)
+
+÷: 法+商 = 9 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+
+  '1-kyu': `Add/Sub: 10口, 100字
+
+×: 実+法 = 11 digits (20)
+
+÷: 法+商 = 10 digits (20)
+
+Time: 30 min; Pass ≥ 240/300.
+shuzan.jp`,
+} as const
+
+export type KyuLevel = keyof typeof kyuLevelDetails

package.json

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