Turn your webcam into a jujutsu hand-sign scanner.
Play a Galaga-inspired arcade shooter where the keyboard pilots your ship and your hands unlock cursed techniques.
https://hindolch.github.io/The-drifter/
DEMO.mp4
DEMO2.mp4
Uncover your webcam, back away from the monitor, and prepare to sweat.
The Drifter feeds your video stream into an optimized computer vision pipeline that attempts to recognize your hand signs and convert them into reality-bending battlefield abilities.
Is the tracking perfect? Mostly :)
Two glorious modules sit side-by-side:
🟦 Arcade Cabinet (Left) A pixel-art battlefield where rogue software entities attempt to delete your existence.
🟪 Player Cam (Right) A neon-framed vision system watching your fingers and waiting for the next Domain Expansion.
Zero servers.
Zero cloud processing.
The Drifter combines traditional arcade controls with real-time gesture recognition.
The keyboard handles movement.
The Domains answer only to hand signs.
| Input | Technique | Effect |
|---|---|---|
| WASD / Arrow Keys | Navigation | Pilot your ship through incoming enemy formations. |
| Auto Targeting | Primary Fire | The ship automatically attacks enemies entering its firing lane. |
| 🤞 Crossed Fingers | Infinite Void | Slows hostile entities, giving you precious time to react and reposition. |
| ✌️ Peace Sign | Mirror Domain | Enemy attacks are reflected against themselves. On the mirrored side of the battlefield, hostile projectiles become self-destructive. |
| ✊ Fist | Catastrophic Domain | Reality destabilizes. Speeds, behavior patterns, and combat flow become unpredictable as chaos consumes the battlefield. |
Every hostile variable destroyed releases fragments of raw Cursed Energy.
These fragments automatically charge the meter displayed at the top of the cabinet.
| Energy Level | Unlock |
|---|---|
| 0% | Standard Combat |
| 50% | Domain Techniques Available |
| 100% | [DOMAIN READY] |
Once the meter reaches maximum capacity, perform any recognized gesture in front of the Player Cam to invoke the corresponding Domain.
Activating a Domain consumes the stored energy.
The rogue variables hunting you refuse to obey predictable logic.
Tiny, aggressive green entities.
- Fast movement
- Zig-zag trajectories
- Direct collision attempts
Larger red combat units.
- Slower movement
- Long-range attacks
- Predictive firing patterns targeting your previous position
Every cleared battlefield compiles a more dangerous version of itself.
- Standard formations
- Low enemy velocity
- Increased movement speed
- Additional enemy spawns
- Elevated projectile density
- Randomized behavior patterns
- Increased battlefield chaos
- 🎥 Real-time hand gesture recognition using MediaPipe
- 🎮 Hybrid keyboard + computer vision gameplay
- 🌀 Three unique Domain Expansions
- 👾 Progressive enemy wave system
- 🏆 Local high-score tracking
- 🎵 Dynamic browser audio system
- 🕹️ Retro pixel-art inspired UI
- ⚡ Fully client-side execution
- 🌐 GitHub Pages deployment
| Layer | Technology |
|---|---|
| Language | TypeScript |
| Build Tool | Vite |
| Rendering | HTML5 Canvas |
| Computer Vision | MediaPipe Tasks Vision |
| Audio | Web Audio API |
| Deployment | GitHub Pages |
| Version Control | Git & GitHub |
If you want to tweak gesture thresholds, create new Domains, or accidentally invent stronger enemies:
# Install dependencies
npm install
# Launch development environment
npm run dev
# Create production build
npm run build
# Preview production build locally
npm run preview- Core arcade gameplay
- Hand gesture recognition
- Infinite Void
- Mirror Domain
- Catastrophic Domain
- High score system
- Audio system
- GitHub Pages deployment
- Additional Domains
- More faster game speed
- More gesture recognition techniques
- Boss encounters
- Advanced visual effects
- Domain-specific shaders
- Mobile support
- Online leaderboards
Ideas, bug reports, pull requests, cursed techniques, and more fictional add-ons be it domain concepts or others are always welcomed.
Fork the repository, experiment recklessly, and submit a PR.
MIT