Neon Matrix Hand Tracker

A stunning, real-time minimalist hand tracking visualization built specifically for the modern web. Utilizing MediaPipe and Next.js, this application captures hand joints in 3D space through your webcam and bridges multiple hands using precise, hair-thin neon vectors.

Features

• Real-Time Client Tracking: Zero server latency. The entire inference model (@mediapipe/hands) runs in your browser via WebAssembly.
• Neon Light Bridge: When two hands enter the frame, the engine calculates sub-pixel midpoints between all 21 natural hand joints to generate over 40 precise connection strings that bridge across your hands perfectly in real-time.
• Pure Canvas Optimization: Runs highly-optimized asynchronous frame rendering decoupled from the React lifecycle to guarantee 60fps performance without frame freezing.

Tech Stack

• Framework: Next.js (App Router format)
• Computer Vision: MediaPipe Hands / @mediapipe/camera_utils
• Styling: Tailwind CSS
• Graphics: HTML5 <canvas> Context2D with dynamic composite screen lighting

Running the Project

Prerequisites

Node.js 18+ explicitly required.

Development Mode

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open http://localhost:3000 with your browser.

Production Build

To test or deploy the optimized production version of the web app:

npm run build
npm start

Application Architecture

The core of the application has been strictly splintered into production-ready modules:

• src/components/NeonHandTracker.tsx: The primary mounting component orchestrating the MediaPipe camera hooks and the high-speed 60fps animation loop.
• src/components/TrackerOverlays.tsx: Renders the loading states, error states, and UX layers.
• src/utils/canvasUtils.ts: Pure geometric rendering functions computing midpoints and generating the multi-layered neon bridges.
• src/hooks/useHandTracking.ts: Asynchronous WebAssembly hook establishing the Camera instance and parsing the 21 multiHandLandmarks.

neon-noodles