Hand-controlled cosmic particle simulation in the browser — zero installs, pure magic.
This project is a motion-interactive 3D particle system that responds to real-time hand gestures using your webcam.
Open your palm → particles expand into a glowing nebula.
Close your fist → particles implode into a tight energetic core.
All rendered with custom shaders and fully contained in a single HTML file.
Built after attending a hands-on session by GDG × ACM.
👉 https://abilalgorithms.github.io/abil-gesture-calc/
(Allow camera access when prompted)
| Gesture | Effect |
|---|---|
| Open hand | Particle expansion + cool cyan shift |
| Closed fist | Implosion + hot magenta energy |
| Move hand | Drag particle cloud in 3D space |
- Three.js — custom shader particle engine
- MediaPipe Hands — real-time gesture tracking
- WebGL — GPU rendering
- Pure HTML/CSS/JS — zero build tools
- ~8k GPU particles with additive blending
- Breathing + sine displacement motion
- Morph shapes → Sphere / Cube / Torus / Spiral
- Smooth lerp transitions everywhere
- Glassmorphism control panel
- Density & formation controls
- Auto-rotation toggle
- Hand-follow toggle
- Camera fallback states
Single-file architecture: index.html ├─ shaders ├─ particle engine ├─ gesture mapping ├─ UI controls └─ scene orchestration
No bundlers. No installs. No frameworks.
I wanted to explore how human motion can directly sculpt digital matter —
turning gestures into physics-like particle behavior in real time.
This is a step toward:
- gesture-native interfaces
- immersive portfolios
- touchless interaction systems
- spatial web experiences
- Spatial audio reacting to particle energy
- Multi-hand interaction
- Gesture-driven UI navigation
- Portfolio controlled by expressions
- WebXR / AR mode
PS: Might add music & sound + open to ideas that enhance immersion ✨
Abilfazal Tankiwala
BTech CSE • Creative Technologist and AI Enthusiast
GitHub → https://github.com/AbilAlgorithms
LinkedIn → https://www.linkedin.com/in/abilfazaltankiwala/
Star the repo — it helps visibility and motivates future experiments.