A highly immersive, story-driven 3D web experience built with React Three Fiber, Three.js, and Zustand. In Radial Stream, players act as system technicians navigating the corrupted architecture of "O-NET," attempting to rebuild shattered data fragments by tracing 3D node constellations across varying depths of the system.
- Immersive 3D Navigation: Interactive 3D data clusters mapped in real-time. Physics-based cursor magnetism and dynamic edge generation.
- Deep Narrative Lore: Uncover the cryptic history of the INGRAM MAINFRAME through corrupted data logs and environmental storytelling.
- Procedural Depth Generation: Mathematically scaled difficulty, node density, and audio resonance as you traverse deeper into the system.
- Audio Resonance Engine: Bespoke Web Audio API synthesizer that layers algorithmic dissonance and harmony based on sector depth and interaction.
- Retro-Futuristic Aesthetics: Post-processing stack featuring volumetric bloom, chromatic aberration, and algorithmic glitch effects.
The codebase is built for scalability, strictly separating domains:
src/3d/: WebGL, rendering logic, physical node states (Scene.jsx,DataCluster.jsx,DataPoint.jsx)src/ui/: DOM-based overlays, HUD elements, and menus (Overlay.jsx,BootScreen.jsx,Assistant.jsx)src/audio/: Synthesizer algorithms and the core audio context manager (AudioManager.js)src/core/: Global state management, narrative generation, and configuration (store.js,GameConfig.js,StoryGenerator.js)
- Clone the repository (if applicable) or navigate to the project directory.
- Install dependencies:
(Note:
npm install --legacy-peer-deps
--legacy-peer-depsis required due to React Three Drei and Postprocessing dependency graphs.) - Run the development server:
npm run dev
- Build for production:
npm run build
Global state is handled seamlessly via Zustand (src/core/store.js). Components only subscribe to the specific slices of state they need, entirely eliminating prop-drilling and preventing unnecessary WebGL re-renders.
If you wish to expand the lore, introduce new mechanics, or optimize the WebGL pipeline, please read our CONTRIBUTING.md and the .agent-instructions.md files to understand our design patterns and workflow requirements.