A next-generation Augmented Reality interface built with Next.js 16, Three.js, and MediaPipe. This project serves as a technical showcase and experiment powered by the coding capabilities of Gemini 3 Pro.

This entire codebase was architected and implemented with the assistance of Gemini 3 Pro. The goal was to push the boundaries of AI-assisted web development, creating a fully functional, immersive AR experience that runs entirely in the browser without heavy external dependencies.

• Advanced Gesture Control: Control the interface naturally using your hands.
  • Swipe (Open Palm): Switch between holographic modules (Arc Reactor, Global Net, Solar Array).
  • Grab (Fist): Rotate 3D models in real-time.
  • Pinch: Scale holograms with precision.
• Biometric Face HUD: Real-time face tracking with a "Target Locked" tactical visor overlay.
• Immersive 3D Holograms: Three distinct interactive scenes rendered with React Three Fiber.
• Dynamic Audio Synthesis: Custom sound engine using the Web Audio API (no external assets).
• Performance Optimized: Built on Next.js 16 with Turbopack and Framer Motion springs for smooth 60fps performance.

• Framework: Next.js 16 (App Router)
• Styling: Tailwind CSS
• 3D Graphics: Three.js / React Three Fiber / Drei
• Computer Vision: MediaPipe (Hands & Face Mesh)
• Animations: Framer Motion
• State Management: Zustand

1. Clone the repository

   git clone https://github.com/suryanshchourasia/jarvis-hud.git
   cd jarvis-hud

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000. Allow camera access when prompted.

• A device with a webcam.
• A modern browser (Chrome/Edge/Safari/Firefox) with WebGL support.
• Good lighting for optimal hand/face tracking.

• X (Twitter): @suryanshchourasia
• LinkedIn: Suryansh Chourasia
• GitHub: @suryanshchourasia

Generated and refined with Gemini 3 Pro.