Domain Expansion
JJK-inspired hand gesture visualizer. Do the hand signs in front of your webcam and the corresponding cursed technique plays out with particle effects on screen.
Cursed Techniques
Five hand signs, five effects
Blue
4-arm inward spiral. Particles converge on a singularity, gravitational collapse in real-time GLSL.
Red
5 jagged spiral arms exploding outward. Repulsion at maximum, particles scatter with sharp diverging trails.
Hollow Purple
Two collision vortex arms, blue and red, spiraling into each other and annihilating at the center.
Infinite Void
3 concentric rings, a vertical light pillar, all per-frame GLSL. 30K particles dissolve into a starfield.
Malevolent Shrine
Torii gate, ground aura, embers, and audio. Requires both hands. Single-hand gestures are suppressed until lock-in.
How It Works
From webcam to particles
Webcam Feed
Browser grabs your camera. No upload, everything stays local.
MediaPipe Hands
21 landmarks per hand tracked at 30fps — knuckles, tips, wrist, all of it.
Gesture Recognition
Landmark ratios mapped to gestures. 10-frame debounce prevents misfires.
WebGL Rendering
Custom GLSL ShaderMaterial fires. UnrealBloom, 30K particles, additive blending.
Stack
- Three.js
- MediaPipe Hands
- WebGL GLSL Shaders
- UnrealBloom (three/addons)
- Web Audio API
Notes
Gesture recognition uses a debounce system. A gesture needs to hold for 10 consecutive frames before it fires, and there's a 30-frame grace period before switching back to neutral. Prevents accidental triggers.
Malevolent Shrine has two-hand suppression built in: single-hand gestures are blocked while the Sukuna mudra is being formed, so it only fires on an intentional lock-in.
Inspired by SAT0RU by reinesana.