chore(release): 4.36.0 [skip ci]

## [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](07c783a794))

### Bug Fixes

* **levels:** add smooth CSS transitions for slider thumb movement ([ca8cef1](ca8cef1c36))

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [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)
 
 

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

@@ -193,7 +193,7 @@ export default function LevelsPage() {
   // Animate scale factor with React Spring for smooth transitions
   const animatedProps = useSpring({
     scaleFactor,
-    config: { tension: 400, friction: 40 },
+    config: { tension: 350, friction: 45 },
   })
 
   // Animate emoji with proper cross-fade (old fades out, new fades in)
@@ -202,7 +202,7 @@ export default function LevelsPage() {
     from: { opacity: 0 },
     enter: { opacity: 1 },
     leave: { opacity: 0 },
-    config: { duration: 80 },
+    config: { duration: 120 },
   })
 
   // Generate an interesting non-zero number to display on the abacus
@@ -319,12 +319,6 @@ export default function LevelsPage() {
             >
               {/* Abacus-themed Radix Slider */}
               <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' })}>
-                    Drag or click the beads to explore all levels
-                  </p>
-                </div>
-
                 <div className={css({ position: 'relative', py: '12' })}>
                   {/* Emoji tick marks */}
                   <div
@@ -351,10 +345,14 @@ export default function LevelsPage() {
                       {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}
@@ -402,7 +400,7 @@ export default function LevelsPage() {
                         h: '128px',
                         bg: 'transparent',
                         cursor: 'grab',
-                        transition: 'all 0.1s ease-out',
+                        transition: 'transform 0.15s ease-out, left 0.3s ease-out',
                         zIndex: 10,
                         _hover: { transform: 'scale(1.15)' },
                         _focus: {
@@ -499,49 +497,6 @@ export default function LevelsPage() {
                   <span>1st Kyu</span>
                   <span>10th Dan</span>
                 </div>
-
-                {/* Level Text - integrated with slider */}
-                <div
-                  className={css({
-                    textAlign: 'center',
-                    mt: '4',
-                    mb: '2',
-                  })}
-                >
-                  <h2
-                    className={css({
-                      fontSize: { base: 'xl', md: '2xl' },
-                      fontWeight: 'bold',
-                      color:
-                        currentLevel.color === 'green'
-                          ? 'green.400'
-                          : currentLevel.color === 'blue'
-                            ? 'blue.400'
-                            : currentLevel.color === 'violet'
-                              ? 'violet.400'
-                              : 'amber.400',
-                      mb: '1',
-                    })}
-                  >
-                    {currentLevel.level}
-                  </h2>
-                  {'name' in currentLevel && (
-                    <div
-                      className={css({
-                        fontSize: 'sm',
-                        color: 'gray.400',
-                        mb: '1',
-                      })}
-                    >
-                      {currentLevel.name}
-                    </div>
-                  )}
-                  {'minScore' in currentLevel && (
-                    <div className={css({ fontSize: 'xs', color: 'gray.500' })}>
-                      Minimum Score: {currentLevel.minScore} points
-                    </div>
-                  )}
-                </div>
               </div>
 
               {/* Abacus Display */}

package.json

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