An interactive WebGL particle system with real-time hand tracking, featuring a cyberpunk aesthetic with neon particles that respond to hand gestures.
- 12,000 particles with additive blending for a glowing neon effect
- Real-time hand tracking using MediaPipe Hands (supports 2 hands)
- Webcam background with particles overlaid in augmented reality style
- Cyberpunk visual effects: scanlines, vignette, and HUD display
Control what shape the particles form based on extended fingers:
| Fingers | Shape | Color |
|---|---|---|
| 1 | "Hello" | Neon Blue |
| 2 | "Joel" | Neon Yellow |
| 3 | "Mike" | Neon Pink |
| 4 | "Roger" | Neon Green |
| 5 (Open Palm) | Catch Mode | - |
- Pointing/Fist: Scatter particles on contact (XY plane only)
- Open Hand (5 fingers): Activates "Nebula Mode" - particles expand into 3D space with water ripple effects
- Both hands open: Basketball Mode - all particles form a rotating 3D basketball at the left palm with bouncing trajectory animation
- Three.js - 3D rendering and particle system
- MediaPipe Hands - Real-time hand tracking
- Vanilla JavaScript - No build tools required
Simply open index.html in a modern browser (Chrome recommended) and allow camera access.
# Or serve locally
python3 -m http.server 8000
# Then visit http://localhost:8000- Modern browser with WebGL support
- Webcam
- Good lighting for hand detection
MIT