#Component Architecture

Realm's components live under components/ across 10 subdirectories, totaling roughly 50 files. This page lists every component and its actual purpose.

#layout/ — Layout shell

#effects/ — WebGL and visual effects

#interactive/ — Interactive widgets

#sections/ — Content section components

#detail/ — Detail page views

#blog/ — Blog system

#cards/ — Cards

#mdx/ — MDX rendering components

#shared/ — Shared UI components

#telemetry/ — Telemetry

#Component hierarchy

_app.tsx
  └─ NextIntlClientProvider
       └─ SiteAssetsProvider
            └─ AppProvider
                 └─ TransitionProvider
                      └─ MainLayout
                           ├─ LeftPanel
                           ├─ GlobalHud
                           ├─ [dynamic] TesseractExperience / RainMorimeEffect / CustomCursor
                           ├─ HomeLoadingScreen
                           ├─ RouteLoadingOverlay
                           └─ [page content]
                                ├─ NavigationColumns (home)
                                ├─ SectionPageLayout (section pages)
                                │   └─ AboutSection / BlogSection / ...
                                └─ DetailView (detail pages)
                                     └─ BlogDetailScaffold
                                          ├─ BlogStateShell
                                          └─ ProtectedPostGate

#Key constraints

• Three.js components (TesseractExperience, RainMorimeEffect) are all dynamically imported with ssr: false; once webglReady, they never unmount to avoid GPU context churn (GOTCHAS #20)
• CustomCursor hover state must go through the reset helper, never directly mutate internal refs (GOTCHAS #12)
• ActivationLever must be a semantic <button>, not a <div> (GOTCHAS #15)
• AnimatedTitleChars defaults to uppercase; blog titles must pass uppercase={false} (GOTCHAS #17)
• navigateTo() is the only supported internal navigation method; router.push() skips transition animations (GOTCHAS #6)