#Hooks & Contexts

#4 Contexts

#AppContext (contexts/AppContext.tsx)

Site-wide interactive state and effects. Provides:

• loading sequence state
• power / battery / inversion state
• real-time stats (FPS, etc.)
• home page typing effect control
• column hover state

Consumed via useAppContext().

#TransitionContext (contexts/TransitionContext.tsx)

Controls route transition animations. Provides:

• navigateTo(url) — all internal navigation must use this, never router.push() (GOTCHAS #6)
• setBackOverride() — lets detail views and lightbox intercept BACK behavior

Consumed via useTransition().

#LayoutAnchorsContext (contexts/LayoutAnchorsContext.tsx)

Registers active scroll containers. Since the layout uses fixed-height content containers, deep-link scrolling must target the container, not the document viewport.

#SiteAssetsContext (contexts/SiteAssetsContext.tsx)

Provides catalog-resolved site-shell resources (favicon, og:image, avatar). Consumes data from /api/assets/home.

#22 Hooks

#Performance & device

#Blog system

#Routing & navigation

#Detail page

#Typing effect

#Interaction & UI

#Utilities

#Context-to-Hook relationships

AppContext
  └─ usePowerSystem
  └─ useRealtimeStats
  └─ useTypingEffect / useTypingSubtitle
  └─ useColumnHover
  └─ useLoadingSystem
  └─ useMediaQuery

TransitionContext
  └─ useRouteLoadingKind
  └─ useLayoutRouteMode
  └─ useDrawerNavigation

LayoutAnchorsContext
  └─ (scroll containers)

Standalone (no context dependency)
  ├─ useAdaptivePerformance
  ├─ useBlogPostState
  ├─ useDetailHeroParallax / useDetailScrollReveal / useDetailSectionNav / useDetailTitleReveal
  ├─ useCursorTargetRegistry
  ├─ useGalleryLightbox
  ├─ useMobileTesseractCharge
  ├─ useAnimationSequence
  ├─ useStandalonePanelState
  ├─ useSafeTimeouts
  └─ useVisitorLanguageCode