Design Structure

Categorized Architecture & Features

3D Environment
Three.js WebGL canvas rendering the interactive cosmic space.
[ MAP ]
Interactive Planets
Career milestones visualized as glowing planetary bodies with orbit lines.
SphereGeometry
[ FX ]
Space Background
Thousands of scattered stars and particle nebulas using additive blending.
PointsMaterial
[ CORE ]
Core Lighting
A pulsating central star casting dynamic illumination across the entire system.
SpriteMaterial
User Interaction
Translating user clicks and movements into 3D scene events.
[ LOGIC ]
Click Detection
Identifying user selection on planets or random asteroids in 3D space.
Raycaster
[ HUD ]
3D to 2D Labels
Projecting text and UI elements accurately onto floating 3D coordinates.
Screen Projection
[ UX ]
Camera Movement
Smooth, dynamic camera zooming and repositioning upon object focus.
Custom Easing
AI Intelligence
Gemini API integration for real-time text analysis and generation.
[ ANALYSIS ]
Parallel Data Fetch
Fetching world trends and personal profile context simultaneously on click.
Dual API Fetch
[ CREATE ]
Dynamic Generation
Creating new planet nodes in real-time based on the user's chat input.
Node Creation
[ EVENT ]
Random Events
Spawning random asteroids that reveal interesting industry facts when clicked.
Interval Spawn
Interface & HUD
Overlay layers displaying real-time statistics and user controls.
[ METRIC ]
Life Progress Bar
A visual gauge calculating lived days vs expected lifespan, updating every frame.
rAF Precision
[ TIME ]
Real-time Timers
Running milliseconds counter tracking exact session time and survival duration.
performance.now()
Three.js r128
Gemini 2.5 Flash API
WebGL / Custom Shaders
Vanilla JS (Zero-dependency)
Single HTML Deployment