Upload folder using huggingface_hub

.claude/handoff.md

@@ -0,0 +1,94 @@
+# Hyperspace Jam — Session Handoff (2026-03-23)
+
+## STATUS: Working, needs per-finger sound refinement
+
+Core app is stable: hand tracking, pad drone, sub-bass, drums, psychedelic visuals all work.
+Per-finger sounds exist in code but need testing/tuning after the rampTo crash fix.
+
+## Links
+- **HF Space**: https://huggingface.co/spaces/Solshine/hyperspace-jam
+- **Direct URL**: https://solshine-hyperspace-jam.static.hf.space/index.html
+- **GitHub**: https://github.com/SolshineCode/hyperspace-jam-v2
+
+## Deploy Command
+```bash
+cd /c/Users/caleb/hyperspace-jam-v2-clean
+cp /c/Users/caleb/hyperspace-jam-v2/*.js /c/Users/caleb/hyperspace-jam-v2/*.html /c/Users/caleb/hyperspace-jam-v2/*.css .
+python -c "from huggingface_hub import HfApi; HfApi().upload_folder(folder_path='.', repo_id='Solshine/hyperspace-jam', repo_type='space', ignore_patterns=['.git*'])"
+```
+
+## What Works
+- Webcam + MediaPipe hand tracking (2 hands) in HF Spaces
+- Pad drone with harmony voice (root + detuned 5th), smooth pitch glide
+- Sub-bass layer with wobble LFO (hand spread = wobble speed)
+- Hand height (Y) → pitch across 5 octaves (C1 sub-bass to F5)
+- Thumb-index pinch → volume (normalized by palm size, works at any distance)
+- Proximity to camera → lowpass filter sweep + reverb/delay wet
+- Fist gesture → cycle pad presets (Hypnotic Sub / Acid Growl / Trance Wash)
+- Spacebar PANIC → kills all sound + 1 second mute window
+- Hand 2 drums via DrumManager (index=kick, middle=snare, ring=hihat, pinky=clap)
+- Psychedelic hue-rotating webcam filter (fast, saturated)
+- SVG turbulence displacement (organic per-pixel warping)
+- Smoke/wave CSS distortion
+- Poincaré hyperbolic shader background (audio-reactive, breathing)
+- Mandala geometry (pentagram, rays, rings between fingers)
+- Shape pinch detection + tessellation shader
+- Per-finger labels on both hands
+- Controls hint panel (frosted glass, bottom center)
+- Pre-allocated geometry pools (ShapeManager + MandalaVisualizer) for stability
+
+## PRIORITY 1: Per-Finger Sound Refinement
+
+### The root cause we found
+A `Tone.js rampTo()` with near-zero values threw `RangeError` EVERY FRAME, which crashed `_updateHands()`, which killed ALL tracking AND sound. Fixed by removing the offending rampTo and wrapping in try/catch.
+
+### Current finger synth architecture (MusicManager.js)
+**Hand 1 (synth hand) finger synths — all pre-allocated in start():**
+- INDEX: MonoSynth "Acid Squelch" (sawtooth + filter sweep) → connected to delay
+- MIDDLE: FMSynth "Laser Zap" (modulationIndex=25, square+sawtooth) → delay
+- RING: MetalSynth "Crystal Chime" (resonance=3000, 1.5 octaves) → delay
+- PINKY: MembraneSynth "Sub Drop" (pitchDecay=0.3, 6 octaves) → limiter
+
+**Hand 2 (drum hand) finger synths — pre-allocated in start():**
+- INDEX: MembraneSynth kick (8 octaves) → limiter
+- MIDDLE: NoiseSynth "Riser" through AutoFilter → delay
+- RING: NoiseSynth "Stutter" (rapid 4x bursts) → limiter
+- PINKY: NoiseSynth "Crash" into dedicated Reverb(decay=8) → limiter
+
+### What needs work next session
+1. **Test with the crash fix** — the rampTo fix may have unblocked everything
+2. **Verify finger extension values** — add console.log in updateGesture to see actual ext values
+3. **The curl→extend threshold (0.25→0.35)** may need adjustment based on actual data
+4. **Consider going back to the arpeggiator pattern** as the user liked — add finger sounds ON TOP of the arp, not replacing it
+5. **The original arpeggiator's finger detection worked** because it used game.js's `_getFingerStates()` which is proven. Our custom extension calculation may be wrong.
+
+### Key insight from user
+"The arpeggiator worked so well though" — the working arpeggiator-based version had reliable hand detection because it didn't have per-frame errors crashing the update loop. With the crash fixed, the current version should track properly. But if finger detection is still unreliable, consider using `_getFingerStates()` (boolean up/down, proven to work) instead of continuous extension values.
+
+## Key Files
+| File | Purpose | Status |
+|------|---------|--------|
+| game.js | Main orchestrator (TRANSPILED ~1500 lines) | Many surgical edits, fragile |
+| MusicManager.js | 10-finger psybass EDM engine | Crash fixed, needs testing |
+| DrumManager.js | Drum sequencer | Stable, unchanged |
+| WaveformVisualizer.js | Poincaré shader + breathing | Working |
+| MandalaVisualizer.js | Sacred geometry | Pre-allocated pools, stable |
+| ShapeManager.js | Pinch shapes + tessellation | Pre-allocated pools, stable |
+| ShapeTessellationShader.js | GLSL for shape interiors | `ctr` fix applied |
+| DisplacementFilter.js | SVG turbulence + smoke waves | Working |
+| index.html | UI + controls hint | Updated labels |
+| styles.css | Dark kiosk styling | Working |
+
+## Effects Chain
+```
+Pad + Harmony → Filter → Chorus → Reverb → Limiter → Destination
+Finger synths → Delay → Reverb → Limiter → Destination
+Sub-bass → Limiter → Destination (direct, no effects)
+Percussion → Limiter → Destination (direct, punchy)
+Reverb → Analyser (for visualization)
+```
+
+## Remaining Phase 3 Features
+- Phase 3.6: Multiplayer jam session (numHands: 4, treble+bass split)
+- Dynamic shape internal tessellation (ShapeTessellationShader exists but untested)
+- Attract mode logic (30s timer)

.claude/vision-reference.md

@@ -0,0 +1,111 @@
+# Hyperspace Jam — Vision Reference: Dynamic Geometric Shapes with Internal Hyperbolic Tessellation
+
+## Source
+Instagram reel: https://www.instagram.com/reel/DTYN4uwCtuG/
+Described by video analysis agent 2026-03-22.
+
+## Core Interaction Model
+
+### Dynamic Anchor Points
+- **Pinch gesture** (thumb + index touching) = single anchor point
+- **2 anchors** = line (two parallel lines connecting points)
+- **3 anchors** = triangle
+- **4 anchors** = quadrilateral
+- System smoothly transitions between states as anchors are added/removed
+
+### Anchor Sources
+- Thumb tip (landmark 4)
+- Index tip (landmark 8)
+- Middle tip (landmark 12)
+- Pinch = thumb+index merged into one point
+- Both hands can contribute anchors simultaneously
+
+### Shape Rendering (Layer 1: Wireframe)
+- **Nodes**: Small hollow white squares with solid white dot center
+- **Edges**: Crisp solid white lines connecting nodes
+- **Z-depth**: Line thickness and node size scale inversely with distance from camera
+  - Close to camera = thick lines, large nodes
+  - Far from camera = thin lines, small nodes
+- No physics/gravity — pure tension between tracked points
+
+## Internal Visualization (Layer 2: Hyperbolic Geometry)
+
+### When a closed shape forms (held > ~0.2s):
+- Internal space fills with **Poincaré disk tessellation**
+- Central focal point inside the shape
+- Tessellating shapes get smaller and denser toward edges (hyperbolic compression)
+- Pattern dynamically re-tessellates as shape morphs with finger movement
+
+### Shape-specific tessellations:
+- **Line**: 1D hyperbolic waves and interference rings between parallel lines
+- **Triangle**: Triangle-based Poincaré tessellation with central singularity
+- **Quadrilateral**: Quad-based tiling (e.g., {4,5} non-Euclidean tiling)
+
+### Dynamic behavior:
+- Pattern scales and re-tessellates in real-time as fingers move
+- Stretching fingers = tessellation scales, colors intensify
+- Collapsing shape = reverse singularity wink-out effect
+
+## Psychedelic Coloring (Layer 3: DMT-Chrome)
+
+### Color palette:
+- Deep blues, electric purples, neon pinks, vibrant greens
+- Iridescent shifting between colors (not static)
+- Colors flow along curved non-Euclidean geometry toward focal point
+
+### Effects:
+- Biological pulsation rhythm (edges flare brighter at peaks)
+- Fractal particles drift from nodes during transitions
+- Maximum stretch = most intense iridescence
+- Close to camera = overwhelming magenta/turquoise flares
+
+## Audio Hooks
+- Shape proximity to camera → distortion/low-pass filter
+- Close = distorted/filtered, far = clear
+- Pattern complexity peak synced with audio distortion peak
+- Pulsation rhythm could sync with beat
+
+## Multiplayer Jam Session (3+ hands detected)
+
+### Core Concept
+When MediaPipe detects more than 2 hands, the system enters **multiplayer jam mode**. Each player pair gets distinct musical roles that complement each other — not just duplicates.
+
+### Player Role Assignment
+- **Player 1 (hands 0-1)**: Treble / Lead — higher octave range (C3-C6), brighter synth presets, faster arpeggio patterns
+- **Player 2 (hands 2-3)**: Bass / Foundation — lower octave range (C1-C3), deeper presets (Acid Bass, sub-sine), slower patterns, heavier reverb
+- Could also split as: melodic vs rhythmic, or arp vs pad
+
+### Musical Separation Strategy
+- Each player pair routes through its own PolySynth instance with distinct preset
+- Separate effects chains (Player 1: bright delay, Player 2: deep reverb)
+- Octave offset so they naturally harmonize rather than clash
+- Same scale (C Minor Pentatonic) but different registers = instant musical compatibility
+- BPM is shared — both players lock to the same Transport clock
+
+### Visual Differentiation
+- Player 1 mandala/geometry: cyan + magenta palette
+- Player 2 mandala/geometry: gold + green palette
+- Internal Poincaré tessellations use different {P,Q} tilings per player
+- Inter-player geometry: lines connecting across players' hands create larger mandala structures
+
+### Detection Logic
+- MediaPipe HandLandmarker already supports `numHands: 4`
+- Hands 0-1 = Player 1, Hands 2-3 = Player 2
+- If only 2 hands detected, single-player mode (current behavior)
+- If 3-4 hands detected, split into two players automatically
+- UI indicator shows "JAM SESSION" when multiplayer is active
+
+### Scaling Considerations
+- 4 hands = 84 landmarks at 30fps — still performant
+- Two separate PolySynth instances may need careful volume balancing
+- Master bus limiter (-2dB) protects speakers regardless of player count
+
+## Implementation Priority for Hyperspace Jam
+1. Pinch detection → merge thumb+index into single anchor
+2. Dynamic shape state (line → triangle → quad) based on active anchors
+3. Internal Poincaré tessellation shader filling the shape geometry
+4. DMT-chrome iridescent color flow
+5. Z-depth line thickness + node size scaling
+6. Audio filter modulation from shape proximity
+7. Pulsation and particle effects
+8. **Multiplayer jam session** — detect 3-4 hands, split into treble+bass roles

MusicManager.js

@@ -1,20 +1,17 @@
 import * as Tone from 'https://esm.sh/tone';
 
-// Gesture-Driven Music Engine for Hyperspace Jam
-// Every finger on both hands produces a unique, radically different sound
+// Psychedelic EDM Synth Engine — Comprehensive Hand-Distance Control
+// Every finger's distance from palm continuously drives dramatic synth parameters
 export class MusicManager {
     constructor() {
-        // Synths
-        this.padSynths = new Map();      // handId -> { synth, harmonySynth, currentRoot }
-        this.activePatterns = this.padSynths; // backward compat — game.js checks .activePatterns.has(i)
+        this.padSynths = new Map();
+        this.activePatterns = this.padSynths;
 
-        // Effects
         this.reverb = null;
         this.delay = null;
         this.chorus = null;
         this.analyser = null;
 
-        // State tracking
         this.isStarted = false;
         this.handVolumes = new Map();
         this.fingerCooldowns = new Map();
@@ -24,191 +21,162 @@ export class MusicManager {
         this.PERC_COOLDOWN_MS = 150;
         this.HAND_VELOCITY_THRESHOLD = 0.15;
 
-        // Finger -> semitone interval mapping for synth hand melodic triggers
         this.fingerIntervals = {
-            index: 0,    // root
-            middle: 3,   // minor third
-            ring: 7,     // perfect fifth
-            pinky: 10    // minor seventh
+            index: 0, middle: 3, ring: 7, pinky: 10
         };
 
-        // Extended C Minor Pentatonic scale
+        // Extended C Minor Pentatonic
         this.scale = [
-            'C1', 'Eb1', 'G1', 'Bb1',
-            'C2', 'Eb2', 'F2', 'G2', 'Bb2',
-            'C3', 'Eb3', 'F3', 'G3', 'Bb3',
-            'C4', 'Eb4', 'F4', 'G4', 'Bb4',
-            'C5', 'Eb5', 'F5'
+            'C1','Eb1','G1','Bb1','C2','Eb2','F2','G2','Bb2',
+            'C3','Eb3','F3','G3','Bb3','C4','Eb4','F4','G4','Bb4','C5','Eb5','F5'
         ];
 
-        // Pad timbre presets
         this.padPresets = [
-            {
-                name: 'Hypnotic Sub',
-                oscillator: { type: 'sine' },
-                envelope: { attack: 0.4, decay: 0.5, sustain: 0.6, release: 0.5 }
-            },
-            {
-                name: 'Acid Growl',
-                oscillator: { type: 'sawtooth' },
-                envelope: { attack: 0.1, decay: 0.3, sustain: 0.5, release: 0.4 }
-            },
-            {
-                name: 'Trance Wash',
-                oscillator: { type: 'triangle' },
-                envelope: { attack: 0.5, decay: 0.6, sustain: 0.55, release: 0.6 }
-            }
+            { name: 'Hypnotic Sub', oscillator: { type: 'sine' }, envelope: { attack: 0.4, decay: 0.5, sustain: 0.6, release: 0.5 } },
+            { name: 'Acid Growl', oscillator: { type: 'sawtooth' }, envelope: { attack: 0.1, decay: 0.3, sustain: 0.5, release: 0.4 } },
+            { name: 'Trance Wash', oscillator: { type: 'triangle' }, envelope: { attack: 0.5, decay: 0.6, sustain: 0.55, release: 0.6 } },
+            { name: 'PWM Swirl', oscillator: { type: 'pwm', modulationFrequency: 0.5 }, envelope: { attack: 0.3, decay: 0.4, sustain: 0.7, release: 0.6 } },
+            { name: 'Fat Square', oscillator: { type: 'fatsquare', spread: 30 }, envelope: { attack: 0.2, decay: 0.3, sustain: 0.6, release: 0.5 } }
         ];
         this.currentSynthIndex = 0;
 
-        // Previous extension tracking for both hands
         this._prevExtensions = {};
-        this._prevDrumExtensions = { index: 0, middle: 0, ring: 0, pinky: 0 };
-        this._drumFingerCooldowns = { index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._prevDrumExtensions = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._drumFingerCooldowns = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
+
+        // Smoothed finger distances for continuous control (prevents jitter)
+        this._smoothDist = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._smoothDrumDist = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._SMOOTH_ALPHA = 0.25; // smoothing factor
     }
 
     async start() {
         if (this.isStarted) return;
-
         await Tone.start();
 
-        // === EFFECTS CHAIN ===
-
-        // Master limiter
+        // === MASTER EFFECTS CHAIN ===
         this.limiter = new Tone.Limiter(-3).toDestination();
 
-        // Dark cavernous reverb
-        this.reverb = new Tone.Reverb({
-            decay: 6,
-            preDelay: 0.03,
-            wet: 0.35
-        }).connect(this.limiter);
+        // Dark reverb
+        this.reverb = new Tone.Reverb({ decay: 6, preDelay: 0.03, wet: 0.35 }).connect(this.limiter);
+
+        // Ping-pong delay
+        this.delay = new Tone.PingPongDelay({ delayTime: '8n.', feedback: 0.35, wet: 0.2 }).connect(this.reverb);
 
-        // Ping-pong delay for finger synths
-        this.delay = new Tone.PingPongDelay({
-            delayTime: '8n.',
-            feedback: 0.35,
-            wet: 0.2
-        }).connect(this.reverb);
-
-        // Chorus for pad width (no Phaser — CPU savings)
-        this.chorus = new Tone.Chorus({
-            frequency: 2,
-            delayTime: 4,
-            depth: 0.7
-        }).connect(this.reverb);
+        // Chorus
+        this.chorus = new Tone.Chorus({ frequency: 2, delayTime: 4, depth: 0.7 }).connect(this.reverb);
         this.chorus.start();
 
-        // Lowpass filter for proximity control (pad chain)
+        // Master proximity filter
         this.filter = new Tone.Filter(16000, 'lowpass').connect(this.chorus);
 
-        // Analyser for visualization — taps reverb output
+        // Analyser for visualization
         this.analyser = new Tone.Analyser('waveform', 1024);
         this.reverb.connect(this.analyser);
 
-        // === HAND 1 FINGER SYNTHS (Synth Hand — i===0) ===
+        // NOTE: Thumb + Index are volume control (pinch) — no continuous effects on them
 
+        // === INDEX: Acid Squelch — continuously pitched, filter sweeps with distance ===
         this.fingerSynths = {};
-
-        // INDEX: "Acid Squelch" — MonoSynth with sawtooth + filter sweep
         this.fingerSynths.index = new Tone.MonoSynth({
             oscillator: { type: 'sawtooth' },
-            filter: {
-                Q: 8,
-                type: 'lowpass',
-                rolloff: -24
-            },
-            envelope: { attack: 0.005, decay: 0.2, sustain: 0.1, release: 0.3 },
+            filter: { Q: 8, type: 'lowpass', rolloff: -24 },
+            envelope: { attack: 0.005, decay: 0.2, sustain: 0.3, release: 0.3 },
             filterEnvelope: {
-                attack: 0.001,
-                decay: 0.15,
-                sustain: 0.05,
-                release: 0.2,
-                baseFrequency: 200,
-                octaves: 4,
-                exponent: 2
+                attack: 0.001, decay: 0.15, sustain: 0.1, release: 0.2,
+                baseFrequency: 200, octaves: 4, exponent: 2
             }
         }).connect(this.delay);
         this.fingerSynths.index.volume.value = -4;
 
-        // MIDDLE: "Laser Zap" — FMSynth with extreme modulation, fast pitch sweep
+        // === MIDDLE: FM Chaos — distance controls modulation index (clean → insane) ===
         this.fingerSynths.middle = new Tone.FMSynth({
-            harmonicity: 8,
-            modulationIndex: 25,
+            harmonicity: 3,
+            modulationIndex: 1,
             oscillator: { type: 'square' },
-            envelope: { attack: 0.001, decay: 0.15, sustain: 0, release: 0.1 },
+            envelope: { attack: 0.01, decay: 0.3, sustain: 0.2, release: 0.3 },
             modulation: { type: 'sawtooth' },
-            modulationEnvelope: { attack: 0.001, decay: 0.08, sustain: 0, release: 0.05 }
+            modulationEnvelope: { attack: 0.01, decay: 0.15, sustain: 0.1, release: 0.1 }
         }).connect(this.delay);
         this.fingerSynths.middle.volume.value = -6;
 
-        // RING: "Crystal Chime" — MetalSynth, bright bell
+        // === RING: Shimmer Delay — distance controls delay time + feedback (tight → infinite) ===
         this.fingerSynths.ring = new Tone.MetalSynth({
-            harmonicity: 12,
-            modulationIndex: 24,
-            resonance: 3000,
-            octaves: 1.5,
+            harmonicity: 12, modulationIndex: 24,
+            resonance: 3000, octaves: 1.5,
             envelope: { attack: 0.001, decay: 0.4, sustain: 0, release: 0.3 }
         }).connect(this.delay);
         this.fingerSynths.ring.volume.value = -8;
 
-        // PINKY: "Sub Drop" — MembraneSynth with long pitch decay
+        // === PINKY: Sub Drop + Bitcrusher — distance controls crush depth ===
+        this.bitcrusher = new Tone.BitCrusher({ bits: 16 }).connect(this.limiter);
         this.fingerSynths.pinky = new Tone.MembraneSynth({
-            pitchDecay: 0.3,
-            octaves: 6,
+            pitchDecay: 0.3, octaves: 6,
             oscillator: { type: 'sine' },
             envelope: { attack: 0.001, decay: 0.8, sustain: 0, release: 0.5 }
-        }).connect(this.limiter); // sub direct — no delay/reverb muddying
+        }).connect(this.bitcrusher);
         this.fingerSynths.pinky.volume.value = -2;
 
-        // === HAND 2 FINGER SYNTHS (Drum Hand — i===1) ===
+        // === CONTINUOUS SYNTHS (always sounding when hand present) ===
+        // Only on middle/ring/pinky — NOT thumb/index (those are volume fingers)
+
+        // Middle continuous: FM pad that gets chaotic with distance
+        this.middleContinuous = new Tone.FMSynth({
+            harmonicity: 2, modulationIndex: 0.5,
+            oscillator: { type: 'sine' },
+            envelope: { attack: 0.4, decay: 0, sustain: 1, release: 0.6 },
+            modulation: { type: 'triangle' },
+            modulationEnvelope: { attack: 0.4, decay: 0, sustain: 1, release: 0.6 }
+        }).connect(this.chorus);
+        this.middleContinuous.volume.value = -20;
 
+        // === DRUM HAND SYNTHS (hand 1) ===
         this.drumFingerSynths = {};
 
-        // INDEX: Kick — deep membrane hit (same as before but dedicated to drum hand)
+        // Index: Kick
         this.drumFingerSynths.index = new Tone.MembraneSynth({
-            pitchDecay: 0.08,
-            octaves: 8,
+            pitchDecay: 0.08, octaves: 8,
             oscillator: { type: 'sine' },
             envelope: { attack: 0.001, decay: 0.5, sustain: 0, release: 0.5 }
-        }).connect(this.limiter); // percussion direct
+        }).connect(this.limiter);
         this.drumFingerSynths.index.volume.value = -4;
 
-        // MIDDLE: "Sci-Fi Riser" — noise with filter sweeping UP
+        // Middle: Sci-Fi Riser
         this.drumFingerSynths.middle = new Tone.NoiseSynth({
             noise: { type: 'pink' },
             envelope: { attack: 0.05, decay: 0.6, sustain: 0, release: 0.3 }
         });
         this._riserFilter = new Tone.AutoFilter({
-            frequency: 4,
-            baseFrequency: 200,
-            octaves: 6,
+            frequency: 4, baseFrequency: 200, octaves: 6,
             filter: { type: 'bandpass', Q: 2 }
         }).connect(this.delay);
         this._riserFilter.start();
         this.drumFingerSynths.middle.connect(this._riserFilter);
         this.drumFingerSynths.middle.volume.value = -8;
 
-        // RING: "Granular Stutter" — rapid burst noise hits
+        // Ring: Granular Stutter
         this.drumFingerSynths.ring = new Tone.NoiseSynth({
             noise: { type: 'white' },
             envelope: { attack: 0.001, decay: 0.02, sustain: 0, release: 0.01 }
-        }).connect(this.limiter); // percussion direct, punchy
+        }).connect(this.limiter);
         this.drumFingerSynths.ring.volume.value = -10;
 
-        // PINKY: "Reverb Crash" — noise hit into massive reverb
-        this._crashReverb = new Tone.Reverb({
-            decay: 8,
-            preDelay: 0.01,
-            wet: 0.9
-        }).connect(this.limiter);
+        // Pinky: Reverb Crash
+        this._crashReverb = new Tone.Reverb({ decay: 8, preDelay: 0.01, wet: 0.9 }).connect(this.limiter);
         this.drumFingerSynths.pinky = new Tone.NoiseSynth({
             noise: { type: 'white' },
             envelope: { attack: 0.001, decay: 0.15, sustain: 0, release: 0.1 }
         }).connect(this._crashReverb);
         this.drumFingerSynths.pinky.volume.value = -6;
 
-        // Keep legacy references for backward compat
+        // Thumb: Drum hand thumb = tempo wobble synth
+        this.drumThumbSynth = new Tone.Synth({
+            oscillator: { type: 'sine' },
+            envelope: { attack: 0.01, decay: 0.3, sustain: 0, release: 0.2 }
+        }).connect(this.limiter);
+        this.drumThumbSynth.volume.value = -10;
+
+        // Legacy references
         this.kickSynth = this.drumFingerSynths.index;
         this.hatSynth = new Tone.NoiseSynth({
             noise: { type: 'white' },
@@ -217,33 +185,36 @@ export class MusicManager {
         this.hatSynth.volume.value = -12;
         this.pluckSynth = { releaseAll: () => {} };
 
-        // === SUB-BASS (always-on low foundation) ===
+        // === SUB-BASS ===
         this.subBass = new Tone.Synth({
             oscillator: { type: 'sine' },
             envelope: { attack: 0.3, decay: 0, sustain: 1, release: 0.8 }
-        }).connect(this.limiter); // sub direct
+        }).connect(this.limiter);
         this.subBass.volume.value = -18;
 
-        // Sub-bass wobble LFO
-        this.wobbleLFO = new Tone.LFO({
-            frequency: 0.3,
-            min: -22,
-            max: -12
-        });
+        this.wobbleLFO = new Tone.LFO({ frequency: 0.3, min: -22, max: -12 });
         this.wobbleLFO.connect(this.subBass.volume);
         this.wobbleLFO.start();
 
+        // Track continuous synth state
+        this._continuousActive = false;
+
         this.isStarted = true;
-        console.log('Psychedelic Bass EDM engine ready — 10-finger unique sounds, gesture-driven.');
+        console.log('Psychedelic EDM engine v2 ready — 10-finger distance-from-palm control');
     }
 
-    // --- Pad Management (Layer 1) ---
+    // --- Smoothing helper ---
+    _smooth(target, key, raw) {
+        target[key] += (raw - target[key]) * this._SMOOTH_ALPHA;
+        return target[key];
+    }
+
+    // --- Pad Management ---
 
     startArpeggio(handId, rootNote) {
         if (!this.isStarted || this.padSynths.has(handId) || this._panicMuted) return;
 
         const preset = this.padPresets[this.currentSynthIndex];
-
         const pad = new Tone.Synth({
             oscillator: { ...preset.oscillator },
             envelope: { ...preset.envelope }
@@ -262,13 +233,19 @@ export class MusicManager {
         pad.triggerAttack(freq, Tone.now());
         harmonyPad.triggerAttack(freq * 1.498, Tone.now());
 
-        if (this.subBass) {
-            this.subBass.triggerAttack(freq / 2, Tone.now());
-        }
+        if (this.subBass) this.subBass.triggerAttack(freq / 2, Tone.now());
 
         this.padSynths.set(handId, { synth: pad, harmonySynth: harmonyPad, currentRoot: rootNote });
         this.handVolumes.set(handId, 0.2);
-        this.fingerCooldowns.set(handId, { index: 0, middle: 0, ring: 0, pinky: 0 });
+        this.fingerCooldowns.set(handId, { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 });
+
+        // Start continuous synths (middle only — thumb/index are volume fingers)
+        if (!this._continuousActive) {
+            this._continuousActive = true;
+            try {
+                this.middleContinuous.triggerAttack(freq * 1.498, Tone.now());
+            } catch(e) {}
+        }
     }
 
     updateArpeggio(handId, newRootNote) {
@@ -277,12 +254,14 @@ export class MusicManager {
 
         const freq = Tone.Frequency(newRootNote).toFrequency();
         padData.synth.frequency.rampTo(freq, 0.15);
-        if (padData.harmonySynth) {
-            padData.harmonySynth.frequency.rampTo(freq * 1.498, 0.15);
-        }
-        if (this.subBass) {
-            this.subBass.frequency.rampTo(freq / 2, 0.2);
-        }
+        if (padData.harmonySynth) padData.harmonySynth.frequency.rampTo(freq * 1.498, 0.15);
+        if (this.subBass) this.subBass.frequency.rampTo(freq / 2, 0.2);
+
+        // Update continuous synth to track root
+        try {
+            if (this.middleContinuous) this.middleContinuous.frequency.rampTo(freq * 1.498, 0.2);
+        } catch(e) {}
+
         padData.currentRoot = newRootNote;
     }
 
@@ -294,9 +273,7 @@ export class MusicManager {
         this.handVolumes.set(handId, clamped);
         const db = -30 + clamped * 26;
         padData.synth.volume.rampTo(db, 0.1);
-        if (padData.harmonySynth) {
-            padData.harmonySynth.volume.rampTo(db - 6, 0.1);
-        }
+        if (padData.harmonySynth) padData.harmonySynth.volume.rampTo(db - 6, 0.1);
     }
 
     stopArpeggio(handId) {
@@ -308,13 +285,19 @@ export class MusicManager {
                 this.subBass.triggerRelease(Tone.now());
             }
 
+            // Release continuous synths
+            if (this.padSynths.size <= 1) {
+                this._continuousActive = false;
+                try { this.middleContinuous.triggerRelease(Tone.now()); } catch(e) {}
+            }
+
             if (!this._pendingDisposals) this._pendingDisposals = new Set();
             const synths = [padData.synth, padData.harmonySynth].filter(Boolean);
             for (const synth of synths) {
                 if (!this._pendingDisposals.has(synth)) {
                     this._pendingDisposals.add(synth);
                     setTimeout(() => {
-                        try { synth.dispose(); } catch(e) { /* already disposed */ }
+                        try { synth.dispose(); } catch(e) {}
                         this._pendingDisposals.delete(synth);
                     }, 2000);
                 }
@@ -325,41 +308,45 @@ export class MusicManager {
         }
     }
 
-    // --- Gesture Processing: Synth Hand (hand 0) ---
-    // HYBRID: triggers on curl→extend PLUS continuous modulation from extension amount
-    // Every finger ALWAYS changes the sound when extended — impossible to not hear it
+    // --- SYNTH HAND (hand 0): Comprehensive Distance-from-Palm Control ---
+    // Each finger's distance ratio (0=curled to palm, 1=fully extended) CONTINUOUSLY
+    // drives dramatic parameter changes. Triggers still fire on transitions.
 
     updateGesture(handId, gestureData) {
         if (!this.isStarted || this._panicMuted) return;
 
         const { fingerStates, handVelocity, rootNote } = gestureData;
-
         const now = performance.now();
         const cooldowns = this.fingerCooldowns.get(handId);
         if (!cooldowns) return;
 
         if (!this._prevExtensions[handId]) {
-            this._prevExtensions[handId] = { index: 0, middle: 0, ring: 0, pinky: 0 };
+            this._prevExtensions[handId] = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
         }
         const prevExt = this._prevExtensions[handId];
 
-        const ext = gestureData.fingerExtensions || {
-            index: fingerStates.index ? 0.8 : 0.1,
-            middle: fingerStates.middle ? 0.8 : 0.1,
-            ring: fingerStates.ring ? 0.8 : 0.1,
-            pinky: fingerStates.pinky ? 0.8 : 0.1
+        // Use fingerDistances (Euclidean from palm) as primary control, fall back to extensions
+        const dist = gestureData.fingerDistances || gestureData.fingerExtensions || {
+            thumb: 0.1, index: 0.1, middle: 0.1, ring: 0.1, pinky: 0.1
         };
 
+        // Smooth all distances to prevent jitter
+        const d = {};
+        for (const f of ['thumb', 'index', 'middle', 'ring', 'pinky']) {
+            d[f] = this._smooth(this._smoothDist, f, dist[f] || 0);
+        }
+
         const rootFreq = Tone.Frequency(rootNote).toFrequency();
 
-        // === INDEX: Acid Squelch — CONTINUOUS filter cutoff from extension ===
+        // ====================================================================
+        // THUMB + INDEX: These are the VOLUME CONTROL fingers (pinch distance)
+        // Do NOT assign continuous effects here — they'd be forced on whenever
+        // volume is up. Only trigger one-shots on curl→extend transitions.
+        // ====================================================================
+
+        // INDEX: Acid Squelch — trigger only (no continuous filter tied to distance)
         if (this.fingerSynths.index) {
-            try {
-                const cutoff = 200 + ext.index * 4000;
-                this.fingerSynths.index.filter.frequency.value = cutoff;
-            } catch(e) {}
-            // Trigger on curl→extend transition
-            if (prevExt.index < 0.2 && ext.index > 0.35 && (now - cooldowns.index) > this.FINGER_COOLDOWN_MS) {
+            if (prevExt.index < 0.2 && d.index > 0.35 && (now - cooldowns.index) > this.FINGER_COOLDOWN_MS) {
                 cooldowns.index = now;
                 this.fingerSynths.index.triggerAttackRelease(
                     Tone.Frequency(rootFreq).toNote(), '4n', Tone.now(), 0.8
@@ -367,57 +354,99 @@ export class MusicManager {
             }
         }
 
-        // === MIDDLE: Laser Zap — trigger only, no continuous volume ramp ===
+        // ====================================================================
+        // MIDDLE: FM Chaos — Distance = modulation index (0.5→40)
+        // Close = clean tone, extended = insane FM screeching
+        // ====================================================================
         if (this.fingerSynths.middle) {
-            // Trigger on transition
-            if (prevExt.middle < 0.2 && ext.middle > 0.35 && (now - cooldowns.middle) > this.FINGER_COOLDOWN_MS) {
+            try {
+                this.fingerSynths.middle.modulationIndex.value = 0.5 + Math.pow(d.middle, 2) * 40;
+                this.fingerSynths.middle.harmonicity.value = 2 + d.middle * 10;
+            } catch(e) {}
+
+            if (prevExt.middle < 0.2 && d.middle > 0.35 && (now - cooldowns.middle) > this.FINGER_COOLDOWN_MS) {
                 cooldowns.middle = now;
-                const zapFreq = rootFreq * Math.pow(2, 3/12); // minor 3rd
+                const zapFreq = rootFreq * Math.pow(2, 3/12);
                 this.fingerSynths.middle.triggerAttackRelease(
                     Tone.Frequency(zapFreq).toNote(), '8n', Tone.now(), 0.9
                 );
             }
         }
+        // Continuous FM pad
+        if (this.middleContinuous) {
+            try {
+                this.middleContinuous.modulationIndex.value = 0.2 + Math.pow(d.middle, 2) * 15;
+                this.middleContinuous.volume.rampTo(-28 + d.middle * 14, 0.05);
+            } catch(e) {}
+        }
 
-        // === RING: Crystal Chime — trigger only ===
+        // ====================================================================
+        // RING: Shimmer/Delay — Distance = delay feedback + time warping
+        // Close = dry/tight, extended = infinite echoing shimmer
+        // ====================================================================
         if (this.fingerSynths.ring) {
-            // Trigger on transition
-            if (prevExt.ring < 0.2 && ext.ring > 0.35 && (now - cooldowns.ring) > this.FINGER_COOLDOWN_MS) {
+            if (prevExt.ring < 0.2 && d.ring > 0.35 && (now - cooldowns.ring) > this.FINGER_COOLDOWN_MS) {
                 cooldowns.ring = now;
-                const chimeFreq = rootFreq * Math.pow(2, 7/12); // 5th
+                const chimeFreq = rootFreq * Math.pow(2, 7/12);
                 this.fingerSynths.ring.triggerAttackRelease(chimeFreq, '4n', Tone.now(), 0.8);
             }
         }
+        if (this.delay) {
+            this.delay.feedback.value = 0.1 + d.ring * 0.65;
+            this.delay.wet.value = 0.05 + d.ring * 0.5;
+            // Modulate delay time subtly for chorus-like shimmer
+            try {
+                const delayMod = 0.15 + d.ring * 0.15; // 8th note dotted range
+                this.delay.delayTime.value = delayMod;
+            } catch(e) {}
+        }
 
-        // === PINKY: Sub Drop — extension controls pitch bend depth ===
+        // ====================================================================
+        // PINKY: Sub Drop + Bitcrusher — Distance = crush bits + reverb intensity
+        // Close = clean sub, extended = destroyed/crushed + massive reverb
+        // ====================================================================
         if (this.fingerSynths.pinky) {
-            // Trigger on transition — always very audible
-            if (prevExt.pinky < 0.2 && ext.pinky > 0.35 && (now - cooldowns.pinky) > this.FINGER_COOLDOWN_MS) {
+            if (prevExt.pinky < 0.2 && d.pinky > 0.35 && (now - cooldowns.pinky) > this.FINGER_COOLDOWN_MS) {
                 cooldowns.pinky = now;
                 this.fingerSynths.pinky.triggerAttackRelease('C1', '4n', Tone.now(), 0.9);
             }
         }
+        if (this.bitcrusher) {
+            // 16 bits (clean) → 2 bits (destroyed)
+            this.bitcrusher.bits.value = Math.max(2, Math.round(16 - d.pinky * 14));
+        }
+        if (this.reverb) {
+            this.reverb.wet.value = 0.15 + d.pinky * 0.55;
+        }
 
-        // === CONTINUOUS: Delay wet amount from average finger extension ===
-        try {
-            const avgExt = (ext.index + ext.middle + ext.ring + ext.pinky) / 4;
-            if (this.delay && isFinite(avgExt)) {
-                this.delay.wet.value = 0.05 + Math.max(0, Math.min(1, avgExt)) * 0.4;
-            }
-        } catch(e) {}
+        // ====================================================================
+        // COMBINED: Hand spread → chorus + detuning + wobble speed
+        // ====================================================================
+        const spread = gestureData.handSpread || 0;
+        if (this.chorus) {
+            this.chorus.depth = 0.3 + spread * 0.7;
+            this.chorus.frequency.value = 1 + spread * 4;
+        }
+        if (this.wobbleLFO) {
+            this.wobbleLFO.frequency.value = 0.2 + spread * 8;
+        }
+        this.padSynths.forEach(padData => {
+            padData.synth.detune.rampTo(spread * 50, 0.1);
+            if (padData.harmonySynth) padData.harmonySynth.detune.rampTo(-spread * 30, 0.1);
+        });
 
         // Store for next frame
-        prevExt.index = ext.index;
-        prevExt.middle = ext.middle;
-        prevExt.ring = ext.ring;
-        prevExt.pinky = ext.pinky;
+        prevExt.thumb = d.thumb;
+        prevExt.index = d.index;
+        prevExt.middle = d.middle;
+        prevExt.ring = d.ring;
+        prevExt.pinky = d.pinky;
 
         // Percussive hits on sharp hand movement
         if ((now - this.percCooldown) > this.PERC_COOLDOWN_MS) {
             const vx = handVelocity?.x || 0;
             const vy = handVelocity?.y || 0;
             const magnitude = Math.sqrt(vx * vx + vy * vy);
-
             if (magnitude > this.HAND_VELOCITY_THRESHOLD) {
                 this.percCooldown = now;
                 if (vy > this.HAND_VELOCITY_THRESHOLD) {
@@ -429,8 +458,7 @@ export class MusicManager {
         }
     }
 
-    // --- Gesture Processing: Drum Hand (hand 1) ---
-    // HYBRID: triggers PLUS continuous modulation — every finger always does something
+    // --- DRUM HAND (hand 1): Distance-from-Palm Control ---
 
     updateDrumGesture(gestureData) {
         if (!this.isStarted || this._panicMuted) return;
@@ -439,96 +467,100 @@ export class MusicManager {
         const prevExt = this._prevDrumExtensions;
         const cooldowns = this._drumFingerCooldowns;
 
-        const fingerStates = gestureData.fingerStates || {};
-        const ext = gestureData.fingerExtensions || {
-            index: fingerStates.index ? 0.8 : 0.1,
-            middle: fingerStates.middle ? 0.8 : 0.1,
-            ring: fingerStates.ring ? 0.8 : 0.1,
-            pinky: fingerStates.pinky ? 0.8 : 0.1
+        const dist = gestureData.fingerDistances || gestureData.fingerExtensions || {
+            thumb: 0.1, index: 0.1, middle: 0.1, ring: 0.1, pinky: 0.1
         };
 
-        // === INDEX: Kick — trigger + continuous volume ===
+        const d = {};
+        for (const f of ['thumb', 'index', 'middle', 'ring', 'pinky']) {
+            d[f] = this._smooth(this._smoothDrumDist, f, dist[f] || 0);
+        }
+
+        // THUMB: Tempo wobble — distance triggers rhythmic tom hits at varying pitch
+        if (this.drumThumbSynth) {
+            if (prevExt.thumb < 0.2 && d.thumb > 0.35 && (now - (cooldowns.thumb || 0)) > 200) {
+                cooldowns.thumb = now;
+                const pitch = 60 + d.thumb * 200; // Hz
+                this.drumThumbSynth.triggerAttackRelease(pitch, '16n', Tone.now(), 0.7);
+            }
+        }
+
+        // INDEX: Kick — distance controls pitch decay depth
         if (this.drumFingerSynths.index) {
-            if (prevExt.index < 0.2 && ext.index > 0.35 && (now - cooldowns.index) > this.FINGER_COOLDOWN_MS) {
+            try {
+                this.drumFingerSynths.index.pitchDecay = 0.02 + d.index * 0.2;
+                this.drumFingerSynths.index.octaves = 4 + d.index * 6;
+            } catch(e) {}
+            if (prevExt.index < 0.2 && d.index > 0.35 && (now - cooldowns.index) > this.FINGER_COOLDOWN_MS) {
                 cooldowns.index = now;
                 this.drumFingerSynths.index.triggerAttackRelease('C1', '8n', Tone.now(), 0.9);
             }
         }
 
-        // === MIDDLE: Riser — continuous: extension controls filter sweep position ===
+        // MIDDLE: Riser — distance = filter sweep position
         if (this._riserFilter) {
-            this._riserFilter.baseFrequency = 100 + ext.middle * 3000;
+            this._riserFilter.baseFrequency = 100 + d.middle * 4000;
+            this._riserFilter.octaves = 2 + d.middle * 6;
         }
         if (this.drumFingerSynths.middle) {
-            if (prevExt.middle < 0.2 && ext.middle > 0.35 && (now - cooldowns.middle) > 200) {
+            if (prevExt.middle < 0.2 && d.middle > 0.35 && (now - cooldowns.middle) > 200) {
                 cooldowns.middle = now;
                 this.drumFingerSynths.middle.triggerAttackRelease('4n', Tone.now(), 0.7);
             }
         }
 
-        // === RING: Stutter — trigger rapid hits ===
+        // RING: Stutter — distance controls burst count and speed
         if (this.drumFingerSynths.ring) {
-            if (prevExt.ring < 0.2 && ext.ring > 0.35 && (now - cooldowns.ring) > 250) {
+            if (prevExt.ring < 0.2 && d.ring > 0.35 && (now - cooldowns.ring) > 250) {
                 cooldowns.ring = now;
-                for (let i = 0; i < 4; i++) {
+                const burstCount = Math.round(2 + d.ring * 8); // 2→10 hits
+                const burstSpeed = Math.max(15, 60 - d.ring * 40); // ms between hits
+                for (let j = 0; j < burstCount; j++) {
                     setTimeout(() => {
                         try { this.drumFingerSynths.ring.triggerAttackRelease('64n', Tone.now(), 0.6); } catch(e) {}
-                    }, i * 45);
+                    }, j * burstSpeed);
                 }
             }
         }
 
-        // === PINKY: Reverb Crash — trigger + continuous reverb tail amount ===
+        // PINKY: Reverb Crash — distance = reverb size + wet
         if (this._crashReverb) {
-            this._crashReverb.wet.value = 0.5 + ext.pinky * 0.5;
+            this._crashReverb.wet.value = 0.3 + d.pinky * 0.7;
         }
         if (this.drumFingerSynths.pinky) {
-            if (prevExt.pinky < 0.2 && ext.pinky > 0.35 && (now - cooldowns.pinky) > 300) {
+            if (prevExt.pinky < 0.2 && d.pinky > 0.35 && (now - cooldowns.pinky) > 300) {
                 cooldowns.pinky = now;
                 this.drumFingerSynths.pinky.triggerAttackRelease('8n', Tone.now(), 0.8);
             }
         }
 
-        // === CONTINUOUS: chorus depth from average drum hand extension ===
-        const avgDrumExt = (ext.index + ext.middle + ext.ring + ext.pinky) / 4;
+        // CONTINUOUS: chorus from average drum distance
+        const avgDist = (d.index + d.middle + d.ring + d.pinky) / 4;
         if (this.chorus) {
-            this.chorus.depth = 0.3 + avgDrumExt * 0.7;
+            this.chorus.depth = 0.3 + avgDist * 0.7;
         }
 
-        prevExt.index = ext.index;
-        prevExt.middle = ext.middle;
-        prevExt.ring = ext.ring;
-        prevExt.pinky = ext.pinky;
+        prevExt.thumb = d.thumb;
+        prevExt.index = d.index;
+        prevExt.middle = d.middle;
+        prevExt.ring = d.ring;
+        prevExt.pinky = d.pinky;
     }
 
-    // --- Finger Expression (effects modulation) ---
+    // --- Finger Expression (legacy + enhanced) ---
 
     updateFingerExpression(params) {
         if (!this.isStarted) return;
 
-        const { middleFinger, ringFinger, pinkyFinger, handSpread } = params;
-
-        // Ring finger -> delay feedback
-        if (this.delay) {
-            this.delay.feedback.value = 0.15 + ringFinger * 0.45;
-        }
-
-        // Pinky -> reverb depth
-        if (this.reverb) {
-            this.reverb.wet.value = 0.2 + pinkyFinger * 0.4;
-        }
+        const { fingerDistances, middleFinger, ringFinger, pinkyFinger, handSpread } = params;
 
-        // Hand spread -> wobble LFO speed
+        // Hand spread → wobble LFO speed + pad detune
         if (this.wobbleLFO) {
             this.wobbleLFO.frequency.value = 0.2 + handSpread * 6;
         }
-
-        // Hand spread -> pad detune
         this.padSynths.forEach(padData => {
             padData.synth.detune.rampTo(handSpread * 40, 0.1);
-            if (padData.harmonySynth) {
-                padData.harmonySynth.detune.rampTo(-handSpread * 25, 0.1);
-            }
+            if (padData.harmonySynth) padData.harmonySynth.detune.rampTo(-handSpread * 25, 0.1);
         });
     }
 
@@ -564,23 +596,17 @@ export class MusicManager {
             const cutoff = 16000 * Math.pow(0.075, value);
             this.filter.frequency.rampTo(cutoff, 0.2);
         }
-        if (this.reverb) {
-            this.reverb.wet.value = 0.3 + value * 0.3;
-        }
-        if (this.delay) {
-            this.delay.wet.value = 0.15 + value * 0.2;
-        }
-        if (this.chorus) {
-            this.chorus.depth = 0.4 + value * 0.4;
-        }
+        if (this.reverb) this.reverb.wet.value = 0.3 + value * 0.3;
+        if (this.delay) this.delay.wet.value = 0.15 + value * 0.2;
+        if (this.chorus) this.chorus.depth = 0.4 + value * 0.4;
     }
 
-    // --- PANIC: kill ALL sound immediately ---
+    // --- PANIC ---
+
     panic() {
         this._panicMuted = true;
         setTimeout(() => { this._panicMuted = false; }, 1000);
 
-        // Stop all pads
         this.padSynths.forEach((padData) => {
             try { padData.synth.triggerRelease(Tone.now()); } catch(e) {}
             try { if (padData.harmonySynth) padData.harmonySynth.triggerRelease(Tone.now()); } catch(e) {}
@@ -593,44 +619,38 @@ export class MusicManager {
         this.handVolumes.clear();
         this.fingerCooldowns.clear();
 
-        // Stop sub-bass
-        if (this.subBass) {
-            try { this.subBass.triggerRelease(Tone.now()); } catch(e) {}
-        }
+        if (this.subBass) try { this.subBass.triggerRelease(Tone.now()); } catch(e) {}
+
+        // Release continuous synths
+        try { this.middleContinuous.triggerRelease(Tone.now()); } catch(e) {}
+        this._continuousActive = false;
 
-        // Silence all synth hand finger synths
         if (this.fingerSynths) {
             for (const finger of ['index', 'middle', 'ring', 'pinky']) {
                 try { this.fingerSynths[finger].triggerRelease(Tone.now()); } catch(e) {}
             }
         }
-
-        // Silence all drum hand finger synths
         if (this.drumFingerSynths) {
             for (const finger of ['index', 'middle', 'ring', 'pinky']) {
                 try { this.drumFingerSynths[finger].triggerRelease(Tone.now()); } catch(e) {}
             }
         }
 
-        // Kill wobble LFO temporarily
         if (this.wobbleLFO) {
             this.wobbleLFO.stop();
             setTimeout(() => { try { this.wobbleLFO.start(); } catch(e) {} }, 1000);
         }
 
-        // Reset filter
-        if (this.filter) {
-            this.filter.frequency.value = 16000;
-        }
-
-        // Reset effect wet levels
+        if (this.filter) this.filter.frequency.value = 16000;
         if (this.reverb) this.reverb.wet.value = 0.35;
         if (this.delay) this.delay.wet.value = 0.2;
         if (this.chorus) this.chorus.depth = 0.6;
+        if (this.bitcrusher) this.bitcrusher.bits.value = 16;
 
-        // Reset drum extension tracking
-        this._prevDrumExtensions = { index: 0, middle: 0, ring: 0, pinky: 0 };
-        this._drumFingerCooldowns = { index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._prevDrumExtensions = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._drumFingerCooldowns = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._smoothDist = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
+        this._smoothDrumDist = { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
 
         console.log('PANIC — all sound killed, muted for 1 second');
     }

game.js

@@ -831,20 +831,40 @@ export var Game = /*#__PURE__*/ function() {
                                             _this1.musicManager.updateArpeggio(i, note);
                                         }
                                         _this1.musicManager.updateArpeggioVolume(i, velocity);
-                                        // --- Finger Expression Controls ---
-                                        // Each finger's curl amount (0=curled, 1=extended) based on tip vs PIP joint Y
+                                        // --- Finger Distance-from-Palm Controls ---
+                                        // Each finger's Euclidean distance from palm center, normalized by palm size
                                         var wrist = smoothedLandmarks[0];
+                                        var palmCenter = smoothedLandmarks[9]; // middle finger MCP = palm center
+                                        var palmDist = Math.sqrt(Math.pow(wrist.x - palmCenter.x, 2) + Math.pow(wrist.y - palmCenter.y, 2)) || 0.05;
+                                        // Fingertip landmarks: thumb=4, index=8, middle=12, ring=16, pinky=20
+                                        var fingerTips = {
+                                            thumb: smoothedLandmarks[4],
+                                            index: smoothedLandmarks[8],
+                                            middle: smoothedLandmarks[12],
+                                            ring: smoothedLandmarks[16],
+                                            pinky: smoothedLandmarks[20]
+                                        };
+                                        var fingerDistances = {};
+                                        for (var fname in fingerTips) {
+                                            var tip = fingerTips[fname];
+                                            var fdx = tip.x - palmCenter.x;
+                                            var fdy = tip.y - palmCenter.y;
+                                            var fdist = Math.sqrt(fdx * fdx + fdy * fdy);
+                                            // Normalize: 0 = touching palm, 1 = fully extended (~ 2x palm size)
+                                            fingerDistances[fname] = Math.max(0, Math.min(1, fdist / (palmDist * 2)));
+                                        }
+                                        // Also keep legacy extension values for compatibility
+                                        var palmSize = palmDist;
                                         var middleTip = smoothedLandmarks[12];
                                         var middlePip = smoothedLandmarks[10];
                                         var ringTip = smoothedLandmarks[16];
                                         var ringPip = smoothedLandmarks[14];
                                         var pinkyTip = smoothedLandmarks[20];
                                         var pinkyPip = smoothedLandmarks[18];
-                                        // Finger extension: how far tip is above its PIP joint (normalized)
-                                        var palmSize = Math.abs(wrist.y - smoothedLandmarks[9].y) || 0.1;
                                         var middleExt = Math.max(0, Math.min(1, (middlePip.y - middleTip.y) / palmSize));
                                         var ringExt = Math.max(0, Math.min(1, (ringPip.y - ringTip.y) / palmSize));
                                         var pinkyExt = Math.max(0, Math.min(1, (pinkyPip.y - pinkyTip.y) / palmSize));
+                                        var indexExt = Math.max(0, Math.min(1, (smoothedLandmarks[6].y - smoothedLandmarks[8].y) / palmSize));
                                         // Hand spread: average distance between adjacent fingertips / palm size
                                         var tips = [smoothedLandmarks[4], smoothedLandmarks[8], middleTip, ringTip, pinkyTip];
                                         var spreadSum = 0;
@@ -855,14 +875,15 @@ export var Game = /*#__PURE__*/ function() {
                                         }
                                         var handSpread = Math.max(0, Math.min(1, (spreadSum / 4) / (palmSize * 2)));
                                         _this1.musicManager.updateFingerExpression({
+                                            fingerDistances: fingerDistances,
                                             middleFinger: middleExt,
                                             ringFinger: ringExt,
                                             pinkyFinger: pinkyExt,
                                             handSpread: handSpread
                                         });
                                         // --- Gesture-Driven Music ---
-                                        var indexExt = Math.max(0, Math.min(1, (smoothedLandmarks[6].y - smoothedLandmarks[8].y) / palmSize));
                                         var fingerStates = {
+                                            thumb: fingerDistances.thumb > 0.3,
                                             index: indexExt > 0.3,
                                             middle: middleExt > 0.3,
                                             ring: ringExt > 0.3,
@@ -871,31 +892,32 @@ export var Game = /*#__PURE__*/ function() {
                                         // Track previous states and compute velocities
                                         if (!_this1._prevFingerStates) _this1._prevFingerStates = {};
                                         if (!_this1._prevHandPos) _this1._prevHandPos = {};
-                                        var prevFS = _this1._prevFingerStates[i] || { index: false, middle: false, ring: false, pinky: false };
+                                        if (!_this1._prevFingerDistances) _this1._prevFingerDistances = {};
+                                        var prevFS = _this1._prevFingerStates[i] || { thumb: false, index: false, middle: false, ring: false, pinky: false };
                                         var prevHP = _this1._prevHandPos[i] || { x: hand.anchorPos.x, y: hand.anchorPos.y };
+                                        var prevFD = _this1._prevFingerDistances[i] || { thumb: 0, index: 0, middle: 0, ring: 0, pinky: 0 };
                                         var handVelX = hand.anchorPos.x - prevHP.x;
                                         var handVelY = hand.anchorPos.y - prevHP.y;
                                         _this1.musicManager.updateGesture(i, {
                                             fingerStates: fingerStates,
                                             prevFingerStates: prevFS,
+                                            fingerDistances: fingerDistances,
+                                            prevFingerDistances: prevFD,
                                             fingerExtensions: {
+                                                thumb: fingerDistances.thumb,
                                                 index: indexExt,
                                                 middle: middleExt,
                                                 ring: ringExt,
                                                 pinky: pinkyExt
                                             },
-                                            fingerVelocities: {
-                                                index: Math.abs(indexExt - (prevFS.index ? 1 : 0)),
-                                                middle: Math.abs(middleExt - (prevFS.middle ? 1 : 0)),
-                                                ring: Math.abs(ringExt - (prevFS.ring ? 1 : 0)),
-                                                pinky: Math.abs(pinkyExt - (prevFS.pinky ? 1 : 0))
-                                            },
                                             handVelocity: { x: handVelX, y: handVelY },
+                                            handSpread: handSpread,
                                             rootNote: note,
                                             volume: velocity
                                         });
                                         _this1._prevFingerStates[i] = fingerStates;
                                         _this1._prevHandPos[i] = { x: hand.anchorPos.x, y: hand.anchorPos.y };
+                                        _this1._prevFingerDistances[i] = Object.assign({}, fingerDistances);
                                     } else {
                                         // If it is a fist, make sure the arpeggio is stopped
                                         _this1.musicManager.stopArpeggio(i);
@@ -908,19 +930,33 @@ export var Game = /*#__PURE__*/ function() {
                                     });
                                     // Per-finger drum sounds via updateDrumGesture
                                     var drumWrist = smoothedLandmarks[0];
-                                    var drumPalmSize = Math.abs(drumWrist.y - smoothedLandmarks[9].y) || 0.1;
-                                    var drumIndexExt = Math.max(0, Math.min(1, (smoothedLandmarks[6].y - smoothedLandmarks[8].y) / drumPalmSize));
-                                    var drumMiddleExt = Math.max(0, Math.min(1, (smoothedLandmarks[10].y - smoothedLandmarks[12].y) / drumPalmSize));
-                                    var drumRingExt = Math.max(0, Math.min(1, (smoothedLandmarks[14].y - smoothedLandmarks[16].y) / drumPalmSize));
-                                    var drumPinkyExt = Math.max(0, Math.min(1, (smoothedLandmarks[18].y - smoothedLandmarks[20].y) / drumPalmSize));
+                                    var drumPalmCenter = smoothedLandmarks[9];
+                                    var drumPalmDist = Math.sqrt(Math.pow(drumWrist.x - drumPalmCenter.x, 2) + Math.pow(drumWrist.y - drumPalmCenter.y, 2)) || 0.05;
+                                    var drumFingerTips = {
+                                        thumb: smoothedLandmarks[4],
+                                        index: smoothedLandmarks[8],
+                                        middle: smoothedLandmarks[12],
+                                        ring: smoothedLandmarks[16],
+                                        pinky: smoothedLandmarks[20]
+                                    };
+                                    var drumFingerDistances = {};
+                                    for (var dfname in drumFingerTips) {
+                                        var dtip = drumFingerTips[dfname];
+                                        var dfdx = dtip.x - drumPalmCenter.x;
+                                        var dfdy = dtip.y - drumPalmCenter.y;
+                                        var dfdist = Math.sqrt(dfdx * dfdx + dfdy * dfdy);
+                                        drumFingerDistances[dfname] = Math.max(0, Math.min(1, dfdist / (drumPalmDist * 2)));
+                                    }
                                     if (_this1.musicManager.updateDrumGesture) {
                                         _this1.musicManager.updateDrumGesture({
                                             fingerStates: fingerStates,
+                                            fingerDistances: drumFingerDistances,
                                             fingerExtensions: {
-                                                index: drumIndexExt,
-                                                middle: drumMiddleExt,
-                                                ring: drumRingExt,
-                                                pinky: drumPinkyExt
+                                                thumb: drumFingerDistances.thumb,
+                                                index: drumFingerDistances.index,
+                                                middle: drumFingerDistances.middle,
+                                                ring: drumFingerDistances.ring,
+                                                pinky: drumFingerDistances.pinky
                                             }
                                         });
                                     }