7 months ago
43a230bReplace the 2D force-graph with 3d-force-graph (Three.js). Each node renders as a glowing sphere with star-point + glow meshes, sized by connection count. Category-based Fibonacci-sphere clustering positions related nodes into a tight nebula. Hidden links keep the layout clean. Visual features added in this commit: - Detail panel: slide-in panel showing node metadata, connections, GitHub link, and a BFS blast-radius analyzer - Constellation arcs: curved bezier lines between selected node and its neighbors, with fade-in animation - Ethereal sound design: Web Audio API with impulse-response reverb, detuned oscillator voices, and distinct sounds for select/close/ constellation/search actions - Starfield: 20k+ background stars across 3 depth layers plus nebula fog spheres for atmosphere - UnrealBloomPass: post-processing glow for the star aesthetic - Cmd+K search palette: keyboard-driven fuzzy search across all nodes with arrow-key navigation - Category legend: clickable color-coded legend for filtering by type - Per-frame animation: twinkle oscillation, hover/selection emphasis, blast-radius color mapping, and label sprite tracking - URL hash deep links: shareable #node=path links with auto-fly - STARBASE intro splash: Geist Pixel title with dissolve transitions The 3D approach is optimal because codebase graphs are inherently spatial — 3D lets clusters separate naturally without the overlap problems that plague 2D layouts at scale. Category-based clustering with Fibonacci-sphere placement ensures even distribution without manual tuning. Also updates data.js category format from RGB arrays to hex strings with labels for consistency with the server-generated graph format.
Parent9e80dd7