chore(release): 4.61.2 [skip ci]

## [4.61.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.1...v4.61.2) (2025-10-21)

### Bug Fixes

* **flashcards:** use explicit per-property configs to fix decay physics ([f32480a](f32480a0f9))

CHANGELOG.md

@@ -1,3 +1,93 @@
+## [4.61.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.1...v4.61.2) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** use explicit per-property configs to fix decay physics ([f32480a](https://github.com/antialias/soroban-abacus-flashcards/commit/f32480a0f9153285341e5a28078840abc0590873))
+
+## [4.61.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.0...v4.61.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** fix position snap-back by using api.set before decay ([30e16c8](https://github.com/antialias/soroban-abacus-flashcards/commit/30e16c8e5ac3bb25f2d54cf715dc6fb45adc4fcc))
+
+## [4.61.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.60.0...v4.61.0) (2025-10-21)
+
+
+### Features
+
+* **flashcards:** enable unbounded drag and position persistence ([ad1ad69](https://github.com/antialias/soroban-abacus-flashcards/commit/ad1ad690f014257b5a3c3f599e794205a11d286f))
+
+## [4.60.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.59.1...v4.60.0) (2025-10-21)
+
+
+### Features
+
+* **homepage:** significantly increase mobile hero abacus size ([424f41d](https://github.com/antialias/soroban-abacus-flashcards/commit/424f41d4bfc1ddea068f8c110b495ebd5c0bb455))
+
+## [4.59.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.59.0...v4.59.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** adjust hero abacus scale for optimal sizing across devices ([86dee31](https://github.com/antialias/soroban-abacus-flashcards/commit/86dee31c9a51ca0712f1b4181a4899d25374d403))
+* **homepage:** reduce mobile abacus scale to prevent scroll hint overlap ([b8235be](https://github.com/antialias/soroban-abacus-flashcards/commit/b8235be612c3f1dbd0da2b6cd1a935001b7dac9b))
+
+## [4.59.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.2...v4.59.0) (2025-10-21)
+
+
+### Features
+
+* **homepage:** increase hero abacus size for better visibility ([7666b0a](https://github.com/antialias/soroban-abacus-flashcards/commit/7666b0aea949f2432a4d0f4648c1a366af3ea6d2))
+
+## [4.58.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.1...v4.58.2) (2025-10-21)
+
+
+### Code Refactoring
+
+* **navbar:** prevent subtitle wrap and remove abacus emoji ([a58f7b7](https://github.com/antialias/soroban-abacus-flashcards/commit/a58f7b78b0020c85da523c36fdf6d70ad069736a))
+
+## [4.58.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.0...v4.58.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **navbar:** apply glassmorphism to transparent mode, not scrolled mode ([8893675](https://github.com/antialias/soroban-abacus-flashcards/commit/8893675b36b1c1534c6fe7e57fa7e0cc55f198d6))
+
+## [4.58.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.10...v4.58.0) (2025-10-21)
+
+
+### Features
+
+* **navbar:** add glassmorphism effect to nav links when scrolled ([89b9072](https://github.com/antialias/soroban-abacus-flashcards/commit/89b90723b7a3fc9ed12da3ba8718fccb6ce0760f))
+
+## [4.57.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.9...v4.57.10) (2025-10-21)
+
+
+### Bug Fixes
+
+* **navbar:** remove border artifact and add 10px bottom fade ([d5f60ce](https://github.com/antialias/soroban-abacus-flashcards/commit/d5f60ce9d2fbc2a870b3bb96f5365a0e04e0afc4))
+
+
+### Styles
+
+* **navbar:** improve theming to match homepage dark aesthetic ([284fc90](https://github.com/antialias/soroban-abacus-flashcards/commit/284fc90a53f5f4868a3e41421760ebc813be12b5))
+
+## [4.57.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.8...v4.57.9) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** add overflow hidden to Your Journey section ([415a1fb](https://github.com/antialias/soroban-abacus-flashcards/commit/415a1fb1faa263c9d69b4e781ce22da235ca2b66))
+
+## [4.57.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.7...v4.57.8) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** adjust responsive breakpoints to prevent skill card clipping ([62ff067](https://github.com/antialias/soroban-abacus-flashcards/commit/62ff067bb956b17a9b3569eadc2a32abd24c27b8))
+
 ## [4.57.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.6...v4.57.7) (2025-10-21)
 
 

apps/web/src/app/page.tsx

@@ -149,24 +149,24 @@ export default function HomePage() {
                 border: '1px solid',
                 borderColor: 'gray.700',
                 shadow: 'lg',
-                minW: '1400px',
+                minW: { base: '100%', xl: '1400px' },
                 mx: 'auto',
               })}
             >
               <div
                 className={css({
                   display: 'flex',
-                  flexDirection: { base: 'column', md: 'row' },
+                  flexDirection: { base: 'column', xl: 'row' },
                   gap: '8',
-                  alignItems: { base: 'center', md: 'flex-start' },
+                  alignItems: { base: 'center', xl: 'flex-start' },
                 })}
               >
                 {/* Tutorial on the left */}
                 <div
                   className={css({
                     flex: '1',
-                    minW: { base: '100%', md: '500px' },
-                    maxW: { base: '100%', md: '500px' },
+                    minW: { base: '100%', xl: '500px' },
+                    maxW: { base: '100%', xl: '500px' },
                   })}
                 >
                   <TutorialPlayer
@@ -397,7 +397,7 @@ export default function HomePage() {
             </section>
 
             {/* Progression Visualization */}
-            <section className={stack({ gap: '6', mb: '16' })}>
+            <section className={stack({ gap: '6', mb: '16', overflow: 'hidden' })}>
               <div className={css({ textAlign: 'center' })}>
                 <h2
                   className={css({

apps/web/src/components/AppNavBar.tsx

@@ -576,10 +576,11 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
     <Tooltip.Provider delayDuration={200}>
       <header
         className={css({
-          bg: isTransparent ? 'transparent' : 'white',
-          shadow: isTransparent ? 'none' : 'sm',
+          bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
+          backdropFilter: isTransparent ? 'none' : 'blur(12px)',
+          shadow: isTransparent ? 'none' : 'lg',
           borderBottom: isTransparent ? 'none' : '1px solid',
-          borderColor: isTransparent ? 'transparent' : 'gray.200',
+          borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.2)',
           position: 'fixed',
           top: 0,
           left: 0,
@@ -599,7 +600,7 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                   flexDirection: 'column',
                   gap: '0',
                   textDecoration: 'none',
-                  _hover: { '& > .brand-name': { color: 'brand.900' } },
+                  _hover: { '& > .brand-name': { color: 'rgba(196, 181, 253, 1)' } },
                   opacity: 0,
                   animation: 'fadeIn 0.3s ease-out forwards',
                 })}
@@ -608,10 +609,10 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                   className={css({
                     fontSize: 'xl',
                     fontWeight: 'bold',
-                    color: 'brand.800',
+                    color: 'rgba(255, 255, 255, 0.95)',
                   })}
                 >
-                  🧮 Abaci One
+                  Abaci One
                 </span>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
@@ -619,10 +620,11 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                       className={css({
                         fontSize: 'xs',
                         fontWeight: 'medium',
-                        color: 'brand.600',
+                        color: 'rgba(196, 181, 253, 0.8)',
                         fontStyle: 'italic',
                         cursor: 'help',
-                        _hover: { color: 'brand.700' },
+                        whiteSpace: 'nowrap',
+                        _hover: { color: 'rgba(196, 181, 253, 1)' },
                       })}
                     >
                       {subtitle.text}
@@ -717,6 +719,9 @@ function NavLink({
   return (
     <Link
       href={href}
+      style={{
+        backdropFilter: isTransparent ? 'blur(8px)' : 'none',
+      }}
       className={css({
         px: { base: '4', md: '3' },
         py: { base: '3', md: '2' },
@@ -729,24 +734,33 @@ function NavLink({
             ? 'white'
             : 'rgba(255, 255, 255, 0.8)'
           : isActive
-            ? 'brand.700'
-            : 'gray.600',
+            ? 'rgba(196, 181, 253, 1)'
+            : 'rgba(209, 213, 219, 0.9)',
         bg: isTransparent
           ? isActive
-            ? 'rgba(255, 255, 255, 0.15)'
-            : 'transparent'
+            ? 'rgba(255, 255, 255, 0.2)'
+            : 'rgba(255, 255, 255, 0.08)'
           : isActive
-            ? 'brand.50'
+            ? 'rgba(139, 92, 246, 0.2)'
             : 'transparent',
+        border: isTransparent ? '1px solid' : 'none',
+        borderColor: isTransparent
+          ? isActive
+            ? 'rgba(255, 255, 255, 0.3)'
+            : 'rgba(255, 255, 255, 0.15)'
+          : 'transparent',
         rounded: 'lg',
         transition: 'all',
         textDecoration: 'none',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        boxShadow: isTransparent ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none',
         _hover: {
-          color: isTransparent ? 'white' : isActive ? 'brand.800' : 'gray.900',
-          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : isActive ? 'brand.100' : 'gray.50',
+          color: isTransparent ? 'white' : 'rgba(196, 181, 253, 1)',
+          bg: isTransparent ? 'rgba(255, 255, 255, 0.25)' : 'rgba(139, 92, 246, 0.25)',
+          borderColor: isTransparent ? 'rgba(255, 255, 255, 0.4)' : 'transparent',
+          boxShadow: isTransparent ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
         },
       })}
     >

apps/web/src/components/HeroAbacus.tsx

@@ -131,7 +131,7 @@ export function HeroAbacus() {
       >
         <div
           className={css({
-            transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
+            transform: { base: 'scale(3.5)', md: 'scale(3.5)', lg: 'scale(4.25)' },
             transformOrigin: 'center center',
             transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
           })}

apps/web/src/components/InteractiveFlashcards.tsx

@@ -77,7 +77,7 @@ export function InteractiveFlashcards() {
         maxW: '1200px',
         mx: 'auto',
         height: { base: '400px', md: '500px' },
-        overflow: 'hidden',
+        overflow: 'visible',
         bg: 'rgba(0, 0, 0, 0.3)',
         rounded: 'xl',
         border: '1px solid rgba(255, 255, 255, 0.1)',
@@ -196,6 +196,16 @@ function DraggableCard({ card }: DraggableCardProps) {
         // On release, reset transform origin to center
         setTransformOrigin('center center')
 
+        // Update current position to where the card was dropped
+        currentPositionRef.current.x = currentPositionRef.current.x + mx
+        currentPositionRef.current.y = currentPositionRef.current.y + my
+
+        // First, snap the spring to the dropped position immediately
+        api.set({
+          x: currentPositionRef.current.x,
+          y: currentPositionRef.current.y,
+        })
+
         // On release, apply momentum with decay physics
         const throwVelocityX = lastVelocityRef.current.vx * 1000
         const throwVelocityY = lastVelocityRef.current.vy * 1000
@@ -203,22 +213,26 @@ function DraggableCard({ card }: DraggableCardProps) {
         // Calculate final rotation based on throw direction
         const throwAngle = Math.atan2(throwVelocityY, throwVelocityX) * (180 / Math.PI)
 
+        // Start position decay and rotation/scale animations
         api.start({
           x: {
-            from: currentPositionRef.current.x + mx,
             velocity: throwVelocityX,
-            decay: true,
+            config: { decay: true },
           },
           y: {
-            from: currentPositionRef.current.y + my,
             velocity: throwVelocityY,
-            decay: true,
+            config: { decay: true },
+          },
+          scale: {
+            value: 1,
+            config: config.wobbly,
+          },
+          rotation: {
+            value: throwAngle + 90, // Card aligns with throw direction
+            config: config.wobbly,
           },
-          scale: 1,
-          rotation: throwAngle + 90, // Card aligns with throw direction
-          config: config.wobbly,
           onChange: (result) => {
-            // Update current position as card settles
+            // Continue updating position as card settles with momentum
             if (result.value.x !== undefined) {
               currentPositionRef.current.x = result.value.x
             }

package.json

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