AirDrive Racing is a futuristic endless 3D highway racer that runs entirely in a modern browser. Drive a procedural neon sports car using live webcam hand gestures, a keyboard, or both—no physical controller or backend required.
Camera frames are processed locally with MediaPipe. They are never recorded, saved, or uploaded.
- Real-time two-hand steering using a virtual steering-wheel pose
- Push/pull hand-depth controls for acceleration and braking
- Open-palm nitro and fist-to-drift gesture recognition
- Animated guide demonstrating every hand movement
- Keyboard, hybrid, and touch fallback controls
- Procedural Three.js highway, city, traffic, and collectibles
- Collisions, durability, near misses, coins, drifting, nitro, and scoring
- Calibration flow with mirrored webcam and landmark overlay
- Gesture-mode safety pause when hands disappear
- Responsive HUD, quality controls, reduced motion, and local high scores
- No login, database, backend, or paid API
- Three.js for real-time 3D rendering
- MediaPipe Tasks Vision for hand landmarks
- React 19 and TypeScript
- Vinext and Vite
- Web Audio API
- MediaDevices API
- Node.js 22.13 or newer
- A current Chrome, Edge, or other Chromium-based desktop browser
- WebGL support
- A webcam for gesture mode
- HTTPS or
localhostfor camera access
Keyboard mode works without a webcam.
git clone https://github.com/rabiyajeh/AirDrive-Racing.git
cd AirDrive-Racing
npm install
npm run devOpen the local address printed in the terminal, usually http://localhost:3000.
npm run build
npm start| Action | Hand gesture | Keyboard |
|---|---|---|
| Steer | Hold both palms like a wheel and tilt them together | A / D or ← / → |
| Accelerate | Push both hands away from the camera | W or ↑ |
| Brake | Pull both hands toward the camera | S or ↓ |
| Nitro | Raise and briefly hold one open palm | Shift |
| Drift | Make a fist while steering sharply | Space |
| Pause | Hands absent for two seconds in gesture-only mode | Escape |
| Recalibrate | Calibration screen | C |
| Toggle camera preview | Settings | V |
Touch steering buttons appear on smaller screens.
- Select Enable Camera & Play.
- Approve the browser camera prompt.
- Sit roughly an arm's length from the camera.
- Keep your upper body and both hands inside the frame.
- Follow the prompts for steering, depth, open-palm, and fist poses.
- Keep a light source in front of you and avoid a bright window behind you.
Open How to Play to see looping demonstrations of every hand movement.
- Confirm camera permission is allowed for
localhost. - Close other applications that may be using the webcam.
- Keep both hands and all fingertips visible.
- Use even front lighting and a plain background when possible.
- Check the network connection if the MediaPipe model cannot load.
- Press
Cto repeat calibration. - Use keyboard or hybrid mode when camera tracking is unavailable.
Travel as far as possible while avoiding traffic and collecting glowing pickups. Distance, speed, survival, coins, near misses, and drifts increase the score. Nitro produces a high-speed burst; drifting awards bonus points and restores nitro.
The car begins with three durability points. Collisions remove durability and speed, and reaching zero ends the run. Traffic and pickups are recycled to keep the endless road performant.
Camera permission is requested only after the player selects the camera option. Frames remain in the browser and are passed directly to MediaPipe for local landmark inference. The project contains no recording, upload, analytics, authentication, or server-storage code.
Only non-sensitive preferences, calibration state, and the high score are stored in Local Storage. MediaPipe runtime and model files are downloaded from their official hosted locations when gesture mode starts.
app/
game.tsx 3D engine, gameplay, gestures, input, and UI
globals.css Visual design, HUD, responsiveness, and animations
layout.tsx Metadata and root layout
page.tsx Client entry point
public/ Static browser assets
worker/ Cloudflare-compatible production entry point
Rendering uses requestAnimationFrame; hand detection runs separately at approximately 30 FPS. Traffic and collectibles are reused instead of recreated each frame. Low, medium, and high quality settings support different hardware.
npm run dev # Start local development
npm run build # Create a production build
npm start # Run the production build
npm test # Build and run the render test
npm run lint # Run ESLintThis repository is provided for learning, experimentation, and further development. Add a license file before redistributing it as a packaged commercial product.