Neon Aura AR is a browser-based augmented reality experience that uses real-time hand tracking to generate interactive neon visuals and audio effects. It runs directly in the browser using your webcam and no additional software required.
Neon Aura AR uses your webcam to detect hand landmarks in real time and renders interactive effects like glowing fingertips, lightning arcs, particle trails, and audio feedback — all inside a single HTML file using only web technologies.
- Real-time tracking of up to 2 hands simultaneously
- 21 landmark points detected per hand
- Lightning arcs when both hands come close
- Shockwave ripple on pinch gesture
- Neon glowing fingertips with particle trails
- Audio feedback based on hand movement and distance
- Matrix-style animated background
- 5 visual themes — Rainbow, Cyberpunk, Lava, Ocean, Galaxy
- Gesture recognition — Pinch, Open Hand, Fist
| Layer | Technology |
|---|---|
| Hand Tracking | MediaPipe Hands (Google AI) |
| Visual Effects | HTML5 Canvas API |
| Sound Effects | Web Audio API |
| Language | HTML, CSS, JavaScript |
| Deployment | Single HTML file — runs in any browser |
- Webcam stream is captured in the browser
- MediaPipe processes frames and returns 21 hand landmarks per hand
- Gesture logic interprets finger positions (pinch, fist, open hand)
- Canvas API renders neon visuals and particle effects in real time
- Web Audio API generates responsive sound based on hand interactions
Simply open index.html in any modern browser → allow camera access → click "Enter Experience"
- Install the Live Server extension in VS Code
- Right click
index.html→ Open with Live Server - Allow camera access → click "Enter Experience"
- Modern browser (Chrome recommended)
- Webcam access
- Internet connection (for MediaPipe CDN)
| Theme | Vibe |
|---|---|
| Rainbow | Colorful, vibrant |
| Cyberpunk | Red and cyan neon |
| Lava | Warm orange and red |
| Ocean | Cool blue tones |
| Galaxy | Deep purple and violet |
- Real-time tracking of up to 2 hands
- 21 landmark points detected per hand
- Pinch gesture detection (thumb + index)
- Open hand / fist recognition
- Neon glow fingertips with particle trails
- Shockwave effect on pinch
- Lightning interaction between both hands
- Animated matrix-style background
- Multiple themes: Rainbow, Cyberpunk, Lava, Ocean, Galaxy
- Audio feedback based on interaction and hand distance
- Interactive AR demos
- Gesture-based UI experiments
- Creative coding portfolio showcase
- Computer vision learning project
Recommended: Use VS Code Live Server for smoother performance.
- A lightweight web AR project that turns hand gestures into real-time neon visuals and sound, combining computer vision, graphics, and audio in a single-page application.