fix: use absolute positioning for hero abacus to eliminate scroll lag

Replace laggy JavaScript scroll tracking with proper CSS positioning:

Before:
- Used position: fixed with JavaScript scroll listener
- Calculated top position dynamically: calc(60vh - ${scrollY}px)
- Caused noticeable lag on mobile and slower browsers

After:
- Hero mode: position: absolute (scrolls naturally with document)
- Button mode: position: fixed (stays in viewport at bottom-right)
- Open mode: position: fixed (stays in viewport at center)
- Zero JavaScript scroll tracking needed

Result: Buttery smooth scrolling on all devices with zero lag.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/components/MyAbacus.tsx

@@ -31,21 +31,6 @@ export function MyAbacus() {
   const isHeroVisible = homeHeroContext?.isHeroVisible ?? false
   const isHeroMode = isOnHomePage && isHeroVisible && !isOpen
 
-  // Track scroll position for hero mode
-  const [scrollY, setScrollY] = useState(0)
-
-  useEffect(() => {
-    if (!isHeroMode) return
-
-    const handleScroll = () => {
-      setScrollY(window.scrollY)
-    }
-
-    handleScroll() // Initial position
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    return () => window.removeEventListener('scroll', handleScroll)
-  }, [isHeroMode])
-
   // Close on Escape key
   useEffect(() => {
     if (!isOpen) return
@@ -162,36 +147,28 @@ export function MyAbacus() {
         data-component="my-abacus"
         data-mode={isOpen ? 'open' : isHeroMode ? 'hero' : 'button'}
         onClick={isOpen || isHeroMode ? undefined : toggle}
-        style={
-          isHeroMode
-            ? {
-                // Hero mode: position accounts for scroll to flow with page (subtract scroll to move up with content)
-                // Positioned lower (60vh instead of 50vh) to avoid covering subtitle
-                top: `calc(60vh - ${scrollY}px)`,
-              }
-            : undefined
-        }
         className={css({
-          position: 'fixed',
+          position: isHeroMode ? 'absolute' : 'fixed',
           zIndex: Z_INDEX.MY_ABACUS,
           cursor: isOpen || isHeroMode ? 'default' : 'pointer',
-          transition: isHeroMode ? 'none' : 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
-          // Three modes: hero (inline with content), button (bottom-right), open (center)
+          transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
+          // Three modes: hero (absolute - scrolls with document), button (fixed), open (fixed)
           ...(isOpen
             ? {
-                // Open mode: center of screen
+                // Open mode: fixed to center of viewport
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
               }
             : isHeroMode
               ? {
-                  // Hero mode: centered horizontally, top handled by inline style
+                  // Hero mode: absolute positioning - scrolls naturally with document
+                  top: '60vh',
                   left: '50%',
                   transform: 'translate(-50%, -50%)',
                 }
               : {
-                  // Button mode: bottom-right corner
+                  // Button mode: fixed to bottom-right corner
                   bottom: { base: '4', md: '6' },
                   right: { base: '4', md: '6' },
                   transform: 'translate(0, 0)',

packages/abacus-react/.claude/settings.local.json

@@ -9,7 +9,9 @@
       "Bash(git add:*)",
       "Bash(git rm:*)",
       "Bash(git commit:*)",
-      "Bash(npm run build:*)"
+      "Bash(npm run build:*)",
+      "Bash(git reset:*)",
+      "Bash(cat:*)"
     ]
   },
   "enableAllProjectMcpServers": true,