chore(release): 4.48.1 [skip ci]

## [4.48.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.0...v4.48.1) (2025-10-20)

### Bug Fixes

* **hero:** prevent SSR hydration mismatch for subtitle ([1bfde8f](1bfde8fb25))

CHANGELOG.md

@@ -1,3 +1,81 @@
+## [4.48.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.0...v4.48.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **hero:** prevent SSR hydration mismatch for subtitle ([1bfde8f](https://github.com/antialias/soroban-abacus-flashcards/commit/1bfde8fb251b227ccd2528bfe1c47acffd79fa49))
+
+## [4.48.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.47.2...v4.48.0) (2025-10-20)
+
+
+### Features
+
+* **hero:** persist random subtitle per-session ([318f946](https://github.com/antialias/soroban-abacus-flashcards/commit/318f9469a0805c200c55ce4024a95fd7b8dbe6a2))
+
+## [4.47.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.47.1...v4.47.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **nav:** prevent thrashing by using fixed position always ([eff44b3](https://github.com/antialias/soroban-abacus-flashcards/commit/eff44b3ad1ea0535c6965ad58012f9275cb143ec))
+* **nav:** remove unnecessary borders from transparent nav ([8c2ddca](https://github.com/antialias/soroban-abacus-flashcards/commit/8c2ddca28dbdd7743227eed4d19a9a8f662a72b5))
+
+## [4.47.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.47.0...v4.47.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **hero:** prevent nav thrashing with hysteresis ([71b1b93](https://github.com/antialias/soroban-abacus-flashcards/commit/71b1b933b598c0a6a8aef1bc9f8c598c1871b2eb))
+
+## [4.47.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.2...v4.47.0) (2025-10-20)
+
+
+### Features
+
+* **nav:** add transparent nav bar with borders when hero visible ([463841e](https://github.com/antialias/soroban-abacus-flashcards/commit/463841e1910f4ddb9af662f036e4efb867836a83))
+
+
+### Bug Fixes
+
+* **hero:** use Number.isNaN instead of global isNaN ([c229faf](https://github.com/antialias/soroban-abacus-flashcards/commit/c229faffac525f3eebeb12155cb5ca4dff744472))
+
+
+### Styles
+
+* **hero-abacus:** add purple bead colors for dark theme ([721dfe4](https://github.com/antialias/soroban-abacus-flashcards/commit/721dfe426db4fe259f6cdeac587d008339df769b))
+* **hero:** adjust spacing between title, subtitle, and abacus ([3a3706c](https://github.com/antialias/soroban-abacus-flashcards/commit/3a3706cc6fb694c7762f065f4ab4996bb8608dc4))
+
+## [4.46.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.1...v4.46.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **types:** properly type HomeHeroContext in AppNavBar ([f9a7cb7](https://github.com/antialias/soroban-abacus-flashcards/commit/f9a7cb7f05dfddf291d89212a77ba1c11c00c9c7))
+
+## [4.46.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.0...v4.46.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **hero-abacus:** restructure layout to prevent visual overlap ([02b6c70](https://github.com/antialias/soroban-abacus-flashcards/commit/02b6c70b7a52f7de2954e5e0efddbed64d419d6c))
+
+## [4.46.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.45.0...v4.46.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add full-page hero abacus with scroll-based nav transition ([d8ec642](https://github.com/antialias/soroban-abacus-flashcards/commit/d8ec64280ec0c2f44f2fd9c72a93a882481f650b))
+
+
+### Bug Fixes
+
+* **homepage:** improve hero abacus sizing and layout ([230f1dc](https://github.com/antialias/soroban-abacus-flashcards/commit/230f1dcd866e5b3625e19f7400f5eae478fe7d0c))
+
+
+### Styles
+
+* **hero-abacus:** apply dark theme to match homepage styling ([e0b6a2e](https://github.com/antialias/soroban-abacus-flashcards/commit/e0b6a2e88b3ebbaae41ed54f23f9e514604d2262))
+
 ## [4.45.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.44.3...v4.45.0) (2025-10-20)
 
 

apps/web/src/components/AppNavBar.tsx

@@ -4,7 +4,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import React, { useMemo, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 import { css } from '../../styled-system/css'
 import { container, hstack } from '../../styled-system/patterns'
 import { Z_INDEX } from '../constants/zIndex'
@@ -12,6 +12,30 @@ import { useFullscreen } from '../contexts/FullscreenContext'
 import { getRandomSubtitle } from '../data/abaciOneSubtitles'
 import { AbacusDisplayDropdown } from './AbacusDisplayDropdown'
 
+// Import HomeHeroContext for optional usage
+import type { Subtitle } from '../data/abaciOneSubtitles'
+
+type HomeHeroContextValue = {
+  subtitle: Subtitle
+  isHeroVisible: boolean
+} | null
+
+// HomeHeroContext - imported dynamically to avoid circular deps
+let HomeHeroContextModule: any = null
+try {
+  HomeHeroContextModule = require('../contexts/HomeHeroContext')
+} catch {
+  // Context not available
+}
+
+const HomeHeroContext: React.Context<HomeHeroContextValue> =
+  HomeHeroContextModule?.HomeHeroContext || React.createContext<HomeHeroContextValue>(null)
+
+// Use HomeHeroContext without requiring it
+function useOptionalHomeHero(): HomeHeroContextValue {
+  return useContext(HomeHeroContext)
+}
+
 interface AppNavBarProps {
   variant?: 'full' | 'minimal'
   navSlot?: React.ReactNode
@@ -516,8 +540,16 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
   const isArcadePage = pathname?.startsWith('/arcade')
   const { isFullscreen, toggleFullscreen, exitFullscreen } = useFullscreen()
 
+  // Try to get home hero context (if on homepage)
+  const homeHero = useOptionalHomeHero()
+
   // Select a random subtitle once on mount (performance: won't change on re-renders)
-  const subtitle = useMemo(() => getRandomSubtitle(), [])
+  // Use homeHero subtitle if available, otherwise generate one
+  const fallbackSubtitle = useMemo(() => getRandomSubtitle(), [])
+  const subtitle = homeHero?.subtitle || fallbackSubtitle
+
+  // Show branding unless we're on homepage with visible hero
+  const showBranding = !homeHero || !homeHero.isHeroVisible
 
   // Auto-detect variant based on context
   const actualVariant = variant === 'full' && (isGamePage || isArcadePage) ? 'minimal' : variant
@@ -537,94 +569,106 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
     )
   }
 
+  // Check if we should use transparent styling (when hero is visible)
+  const isTransparent = homeHero?.isHeroVisible
+
   return (
     <Tooltip.Provider delayDuration={200}>
       <header
         className={css({
-          bg: 'white',
-          shadow: 'sm',
-          borderBottom: '1px solid',
-          borderColor: 'gray.200',
-          position: 'sticky',
+          bg: isTransparent ? 'transparent' : 'white',
+          shadow: isTransparent ? 'none' : 'sm',
+          borderBottom: isTransparent ? 'none' : '1px solid',
+          borderColor: isTransparent ? 'transparent' : 'gray.200',
+          position: 'fixed',
           top: 0,
+          left: 0,
+          right: 0,
           zIndex: 30,
+          transition: 'all 0.3s ease',
         })}
       >
         <div className={container({ maxW: '7xl', px: '4', py: '3' })}>
           <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
-            {/* Logo */}
-            <Link
-              href="/"
-              className={css({
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0',
-                textDecoration: 'none',
-                _hover: { '& > .brand-name': { color: 'brand.900' } },
-              })}
-            >
-              <span
+            {/* Logo - conditionally shown based on hero visibility */}
+            {showBranding ? (
+              <Link
+                href="/"
                 className={css({
-                  fontSize: 'xl',
-                  fontWeight: 'bold',
-                  color: 'brand.800',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0',
+                  textDecoration: 'none',
+                  _hover: { '& > .brand-name': { color: 'brand.900' } },
+                  opacity: 0,
+                  animation: 'fadeIn 0.3s ease-out forwards',
                 })}
               >
-                🧮 Abaci One
-              </span>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <span
-                    className={css({
-                      fontSize: 'xs',
-                      fontWeight: 'medium',
-                      color: 'brand.600',
-                      fontStyle: 'italic',
-                      cursor: 'help',
-                      _hover: { color: 'brand.700' },
-                    })}
-                  >
-                    {subtitle.text}
-                  </span>
-                </Tooltip.Trigger>
-                <Tooltip.Portal>
-                  <Tooltip.Content
-                    side="bottom"
-                    align="start"
-                    sideOffset={4}
-                    className={css({
-                      bg: 'gray.900',
-                      color: 'white',
-                      px: '3',
-                      py: '2',
-                      rounded: 'md',
-                      fontSize: 'sm',
-                      maxW: '250px',
-                      shadow: 'lg',
-                      zIndex: 50,
-                    })}
-                  >
-                    {subtitle.description}
-                    <Tooltip.Arrow
+                <span
+                  className={css({
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'brand.800',
+                  })}
+                >
+                  🧮 Abaci One
+                </span>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <span
                       className={css({
-                        fill: 'gray.900',
+                        fontSize: 'xs',
+                        fontWeight: 'medium',
+                        color: 'brand.600',
+                        fontStyle: 'italic',
+                        cursor: 'help',
+                        _hover: { color: 'brand.700' },
                       })}
-                    />
-                  </Tooltip.Content>
-                </Tooltip.Portal>
-              </Tooltip.Root>
-            </Link>
+                    >
+                      {subtitle.text}
+                    </span>
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content
+                      side="bottom"
+                      align="start"
+                      sideOffset={4}
+                      className={css({
+                        bg: 'gray.900',
+                        color: 'white',
+                        px: '3',
+                        py: '2',
+                        rounded: 'md',
+                        fontSize: 'sm',
+                        maxW: '250px',
+                        shadow: 'lg',
+                        zIndex: 50,
+                      })}
+                    >
+                      {subtitle.description}
+                      <Tooltip.Arrow
+                        className={css({
+                          fill: 'gray.900',
+                        })}
+                      />
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+              </Link>
+            ) : (
+              <div />
+            )}
 
             <div className={hstack({ gap: '6', alignItems: 'center' })}>
               {/* Navigation Links */}
               <nav className={hstack({ gap: '4' })}>
-                <NavLink href="/create" currentPath={pathname}>
+                <NavLink href="/create" currentPath={pathname} isTransparent={isTransparent}>
                   Create
                 </NavLink>
-                <NavLink href="/guide" currentPath={pathname}>
+                <NavLink href="/guide" currentPath={pathname} isTransparent={isTransparent}>
                   Guide
                 </NavLink>
-                <NavLink href="/games" currentPath={pathname}>
+                <NavLink href="/games" currentPath={pathname} isTransparent={isTransparent}>
                   Games
                 </NavLink>
               </nav>
@@ -635,6 +679,24 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
           </div>
         </div>
       </header>
+
+      {/* Keyframes for fade-in animation */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes fadeIn {
+              from {
+                opacity: 0;
+                transform: translateY(-5px);
+              }
+              to {
+                opacity: 1;
+                transform: translateY(0);
+              }
+            }
+          `,
+        }}
+      />
     </Tooltip.Provider>
   )
 }
@@ -643,10 +705,12 @@ function NavLink({
   href,
   currentPath,
   children,
+  isTransparent,
 }: {
   href: string
   currentPath: string | null
   children: React.ReactNode
+  isTransparent?: boolean
 }) {
   const isActive = currentPath === href || (href !== '/' && currentPath?.startsWith(href))
 
@@ -660,8 +724,20 @@ function NavLink({
         minW: { base: '44px', md: 'auto' },
         fontSize: 'sm',
         fontWeight: 'medium',
-        color: isActive ? 'brand.700' : 'gray.600',
-        bg: isActive ? 'brand.50' : 'transparent',
+        color: isTransparent
+          ? isActive
+            ? 'white'
+            : 'rgba(255, 255, 255, 0.8)'
+          : isActive
+            ? 'brand.700'
+            : 'gray.600',
+        bg: isTransparent
+          ? isActive
+            ? 'rgba(255, 255, 255, 0.15)'
+            : 'transparent'
+          : isActive
+            ? 'brand.50'
+            : 'transparent',
         rounded: 'lg',
         transition: 'all',
         textDecoration: 'none',
@@ -669,8 +745,8 @@ function NavLink({
         alignItems: 'center',
         justifyContent: 'center',
         _hover: {
-          color: isActive ? 'brand.800' : 'gray.900',
-          bg: isActive ? 'brand.100' : 'gray.50',
+          color: isTransparent ? 'white' : isActive ? 'brand.800' : 'gray.900',
+          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : isActive ? 'brand.100' : 'gray.50',
         },
       })}
     >

apps/web/src/components/HeroAbacus.tsx

@@ -0,0 +1,190 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { css } from '../../styled-system/css'
+import { useHomeHero } from '../contexts/HomeHeroContext'
+
+export function HeroAbacus() {
+  const {
+    subtitle,
+    abacusValue,
+    setAbacusValue,
+    setIsHeroVisible,
+    isAbacusLoaded,
+    isSubtitleLoaded,
+  } = useHomeHero()
+  const appConfig = useAbacusConfig()
+  const heroRef = useRef<HTMLDivElement>(null)
+
+  // Styling for structural elements (solid, no translucency)
+  const structuralStyles = {
+    columnPosts: {
+      fill: 'rgb(255, 255, 255)',
+      stroke: 'rgb(200, 200, 200)',
+      strokeWidth: 2,
+    },
+    reckoningBar: {
+      fill: 'rgb(255, 255, 255)',
+      stroke: 'rgb(200, 200, 200)',
+      strokeWidth: 3,
+    },
+  }
+
+  // Detect when hero scrolls out of view
+  useEffect(() => {
+    if (!heroRef.current) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // Hero is visible if more than 20% is in viewport
+        setIsHeroVisible(entry.intersectionRatio > 0.2)
+      },
+      {
+        threshold: [0, 0.2, 0.5, 1],
+      }
+    )
+
+    observer.observe(heroRef.current)
+
+    return () => observer.disconnect()
+  }, [setIsHeroVisible])
+
+  return (
+    <div
+      ref={heroRef}
+      className={css({
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background:
+          'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(88, 28, 135, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
+        position: 'relative',
+        overflow: 'hidden',
+        px: '4',
+        py: '12',
+      })}
+    >
+      {/* Background pattern */}
+      <div
+        className={css({
+          position: 'absolute',
+          inset: 0,
+          opacity: 0.1,
+          backgroundImage:
+            'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+          backgroundSize: '40px 40px',
+        })}
+      />
+
+      {/* Title and Subtitle Section - DIRECT CHILD */}
+      <div
+        className={css({
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
+          zIndex: 10,
+        })}
+      >
+        <h1
+          className={css({
+            fontSize: { base: '4xl', md: '6xl', lg: '7xl' },
+            fontWeight: 'bold',
+            background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+            backgroundClip: 'text',
+            color: 'transparent',
+          })}
+        >
+          Abaci One
+        </h1>
+        <p
+          className={css({
+            fontSize: { base: 'xl', md: '2xl' },
+            fontWeight: 'medium',
+            color: 'purple.300',
+            fontStyle: 'italic',
+            marginBottom: '8',
+            opacity: isSubtitleLoaded ? 1 : 0,
+            transition: 'opacity 0.5s ease-in-out',
+          })}
+        >
+          {subtitle.text}
+        </p>
+      </div>
+
+      {/* Large Interactive Abacus - DIRECT CHILD */}
+      <div
+        className={css({
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flex: '1',
+          width: '100%',
+          zIndex: 10,
+          opacity: isAbacusLoaded ? 1 : 0,
+          transition: 'opacity 0.5s ease-in-out',
+        })}
+      >
+        <div
+          className={css({
+            transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
+            transformOrigin: 'center center',
+            transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+          })}
+        >
+          <AbacusReact
+            value={abacusValue}
+            columns={4}
+            beadShape={appConfig.beadShape}
+            showNumbers={true}
+            interactive={true}
+            animated={true}
+            customStyles={structuralStyles}
+            onValueChange={setAbacusValue}
+          />
+        </div>
+      </div>
+
+      {/* Subtle hint to scroll - DIRECT CHILD */}
+      <div
+        className={css({
+          position: 'relative',
+          fontSize: 'sm',
+          color: 'gray.400',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
+          animation: 'bounce 2s ease-in-out infinite',
+          zIndex: 10,
+        })}
+      >
+        <span>Scroll to explore</span>
+        <span>↓</span>
+      </div>
+
+      {/* Keyframes for bounce animation */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes bounce {
+              0%, 100% {
+                transform: translateY(0);
+                opacity: 0.7;
+              }
+              50% {
+                transform: translateY(-10px);
+                opacity: 1;
+              }
+            }
+          `,
+        }}
+      />
+    </div>
+  )
+}

apps/web/src/contexts/HomeHeroContext.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import type React from 'react'
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import type { Subtitle } from '../data/abaciOneSubtitles'
+import { subtitles } from '../data/abaciOneSubtitles'
+
+interface HomeHeroContextValue {
+  subtitle: Subtitle
+  abacusValue: number
+  setAbacusValue: (value: number) => void
+  isHeroVisible: boolean
+  setIsHeroVisible: (visible: boolean) => void
+  isAbacusLoaded: boolean
+  isSubtitleLoaded: boolean
+}
+
+const HomeHeroContext = createContext<HomeHeroContextValue | null>(null)
+
+export { HomeHeroContext }
+
+export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
+  // Use first subtitle for SSR, then select random one on client mount
+  const [subtitle, setSubtitle] = useState<Subtitle>(subtitles[0])
+  const [isSubtitleLoaded, setIsSubtitleLoaded] = useState(false)
+
+  // Select random subtitle only on client side, persist per-session
+  useEffect(() => {
+    // Check if we have a stored subtitle index for this session
+    const storedIndex = sessionStorage.getItem('heroSubtitleIndex')
+
+    if (storedIndex !== null) {
+      // Use the stored subtitle index
+      const index = parseInt(storedIndex, 10)
+      if (!Number.isNaN(index) && index >= 0 && index < subtitles.length) {
+        setSubtitle(subtitles[index])
+        setIsSubtitleLoaded(true)
+        return
+      }
+    }
+
+    // Generate a new random index and store it
+    const randomIndex = Math.floor(Math.random() * subtitles.length)
+    sessionStorage.setItem('heroSubtitleIndex', randomIndex.toString())
+    setSubtitle(subtitles[randomIndex])
+    setIsSubtitleLoaded(true)
+  }, [])
+
+  // Shared abacus value - always start at 0 for SSR/hydration consistency
+  const [abacusValue, setAbacusValue] = useState(0)
+  const [isAbacusLoaded, setIsAbacusLoaded] = useState(false)
+  const isLoadingFromStorage = useRef(false)
+
+  // Load from sessionStorage after mount (client-only, no hydration mismatch)
+  useEffect(() => {
+    console.log('[HeroAbacus] Loading from sessionStorage...')
+    isLoadingFromStorage.current = true // Block saves during load
+
+    const saved = sessionStorage.getItem('heroAbacusValue')
+    console.log('[HeroAbacus] Saved value from storage:', saved)
+
+    if (saved) {
+      const parsedValue = parseInt(saved, 10)
+      console.log('[HeroAbacus] Parsed value:', parsedValue)
+      if (!Number.isNaN(parsedValue)) {
+        console.log('[HeroAbacus] Setting abacus value to:', parsedValue)
+        setAbacusValue(parsedValue)
+      }
+    } else {
+      console.log('[HeroAbacus] No saved value found, staying at 0')
+    }
+
+    // Use setTimeout to ensure the value has been set before we allow saves
+    setTimeout(() => {
+      isLoadingFromStorage.current = false
+      setIsAbacusLoaded(true)
+      console.log('[HeroAbacus] Load complete, allowing saves now and fading in')
+    }, 0)
+  }, [])
+
+  // Persist value to sessionStorage when it changes (but skip during load)
+  useEffect(() => {
+    console.log(
+      '[HeroAbacus] Save effect triggered. Value:',
+      abacusValue,
+      'isLoadingFromStorage:',
+      isLoadingFromStorage.current
+    )
+
+    if (!isLoadingFromStorage.current) {
+      console.log('[HeroAbacus] Saving to sessionStorage:', abacusValue)
+      sessionStorage.setItem('heroAbacusValue', abacusValue.toString())
+      console.log(
+        '[HeroAbacus] Saved successfully. Storage now contains:',
+        sessionStorage.getItem('heroAbacusValue')
+      )
+    } else {
+      console.log('[HeroAbacus] Skipping save (currently loading from storage)')
+    }
+  }, [abacusValue])
+
+  // Track hero visibility for nav branding
+  const [isHeroVisible, setIsHeroVisible] = useState(true)
+
+  const value = useMemo(
+    () => ({
+      subtitle,
+      abacusValue,
+      setAbacusValue,
+      isHeroVisible,
+      setIsHeroVisible,
+      isAbacusLoaded,
+      isSubtitleLoaded,
+    }),
+    [subtitle, abacusValue, isHeroVisible, isAbacusLoaded, isSubtitleLoaded]
+  )
+
+  return <HomeHeroContext.Provider value={value}>{children}</HomeHeroContext.Provider>
+}
+
+export function useHomeHero() {
+  const context = useContext(HomeHeroContext)
+  if (!context) {
+    throw new Error('useHomeHero must be used within HomeHeroProvider')
+  }
+  return context
+}

package.json

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