Act as a world-class Creative Technologist and Senior Frontend Engineer from the year 2099. Build a hyper-realistic, retro-futuristic "MCP-2099" developer platform interface using React 19, TypeScript, Tailwind CSS, GSAP, and React Three Fiber (Three.js).
The design must be Awwwards-level: cinematic, grid-based, and heavily reliant on custom WebGL shaders.
Core Aesthetic & Vibe:
Style: High-fidelity Retro-Futurism / Cyberpunk (Year 2099).
Visual Language: Clean, grid-based layouts, holographic UI elements, glassmorphism, and cinematic typography.
Color Palette:
Dark Mode: Deep Cyber-Black (#050505), Neon Orange (#ff4d00), Neon Blue (#00f3ff).
Light Mode: stark Gray/White technical look with darker blue accents.
Typography: Inter for UI/Body, JetBrains Mono for data/code.
Technical Stack & Libraries
Framework: React 19 (TypeScript).
Styling: Tailwind CSS (Grid patterns, utility classes, dark mode).
3D Engine: Three.js + React Three Fiber (WebGL).
Animation: GSAP (UI motion), Custom GLSL Shaders (3D effects).
Icons: Lucide React.
Key Features & Components
1. Cinematic Loader
Visuals: A full-screen WebGL overlay featuring a rotating holographic ring with data artifacts and a "Digital Void" background.
Shaders: Custom fragment shaders for the ring (pulsing, scanlines) and background (subtle radial ripples).
Behavior: Simulates a kernel initialization with scrambled text decoding (e.g., "LOADING_ASSETS" → "SYSTEM_READY") and a smooth fade-out transition.
2. Hero Section
Background: A procedural 3D Data Globe.
Vertex Shader: "Breathing" displacement using sine waves.
Fragment Shader: Glowing particles with scanline interference passing through the globe.
Parallax: Background starfield moves at a different speed to create depth.
UI: Massive, tracking-tight typography ("Engineering, Supercharged") with localized blurs and gradient text.
3. Navigation System
Design: Floating glassmorphic top bar.
Interactions: Hover effects trigger terminal-style cursors (> Interface).
Functionality:
Client-side routing (Interface, Neural Net, Protocol, Logs, Dashboard).
Global Theme Toggle (Sun/Moon) that instantly repaints 3D scenes and UI.
"Initialize" CTA that launches the Dashboard.
4. "Sentient Core" (Neural Net Page)
Centerpiece: An interactive, pulsing AI Brain.
Complex Shaders: Uses 3D Simplex Noise for organic vertex displacement and a "branching vein" fragment shader to simulate data flow and neural firing.
Particle Cloud: 400 orbiting nodes around the core.
Physics: Custom collision detection and repulsion logic (particles push away from each other to avoid clumping).
Interaction: Particles light up (Neon burst) when hovered and slowly fade back to base color.
5. Mission Control Dashboard
Layout: Bento-grid style high-density data interface.
Widgets:
Global Node Map: Stylized dot-matrix map with floating tooltips.
Metrics: CPU/Memory SVG bars, Network Traffic area charts.
Security: Live threat counters and status indicators.
Animation: GSAP stagger effects on load.
6. System Logs & Protocol
Logs: A live-updating terminal feed simulating server events ([INFO], [WARN], [SEC]) with auto-scrolling.
Protocol: A documentation page featuring "Encryption Layer" and "Smart Contract" specs with neon-accented cards.