feat: add V2 emotion control panel to guide page

- 5 emotion sliders (neutral, joy, anger, sadness, surprise) with 0-100%
- Preset buttons for one-click emotion selection
- Real-time setEmotion() call on slider input
- Panel shown only when V2 engine is selected
- Resets to [0,0,0,0,0] on engine switch

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jcggl

examples/guide/index.html

@@ -352,6 +352,35 @@
     }
     .btn-danger:hover { background: rgba(239,68,68,0.2); }
 
+    /* ── Emotion Control ── */
+    .emotion-panel { display: flex; flex-direction: column; gap: 6px; }
+    .emotion-row {
+      display: flex; align-items: center; gap: 8px; font-size: 0.78rem;
+    }
+    .emotion-label { width: 80px; color: #94a3b8; font-size: 0.72rem; }
+    .emotion-slider {
+      flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
+      background: rgba(255,255,255,0.08); border-radius: 2px; outline: none;
+      cursor: pointer;
+    }
+    .emotion-slider::-webkit-slider-thumb {
+      -webkit-appearance: none; width: 14px; height: 14px;
+      border-radius: 50%; background: #4cc9f0; cursor: pointer;
+    }
+    .emotion-slider::-moz-range-thumb {
+      width: 14px; height: 14px; border: none;
+      border-radius: 50%; background: #4cc9f0; cursor: pointer;
+    }
+    .emotion-val { width: 32px; text-align: right; color: #e2e8f0; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
+    .emotion-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+    .emotion-presets button {
+      padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
+      background: rgba(255,255,255,0.04); color: #94a3b8;
+      font-size: 0.7rem; cursor: pointer; transition: all 0.15s;
+    }
+    .emotion-presets button:hover { background: rgba(76,201,240,0.12); color: #4cc9f0; border-color: rgba(76,201,240,0.3); }
+    .emotion-presets button.active { background: rgba(76,201,240,0.15); color: #4cc9f0; border-color: #4cc9f0; }
+
     /* ── Buttons ── */
     .btn {
       display: inline-flex; align-items: center; gap: 8px;
@@ -816,6 +845,30 @@ <h2 class="step-title">Add Real-time Microphone</h2>
 
     <div class="demo-divider"></div>
 
+    <!-- Emotion Control (V2 only) -->
+    <div class="demo-step-group" id="emotion-group" style="display:none">
+      <div class="demo-step-label">
+        <span style="font-size:0.78rem;color:#4cc9f0">Emotion Control</span>
+        <span style="font-size:0.65rem;color:#64748b;margin-left:6px">V2 only</span>
+      </div>
+      <div class="emotion-panel" id="emotion-panel">
+        <div class="emotion-row"><span class="emotion-label">Neutral</span><input type="range" class="emotion-slider" id="emo-neutral" min="0" max="100" value="0"><span class="emotion-val" id="emo-neutral-val">0%</span></div>
+        <div class="emotion-row"><span class="emotion-label">Joy</span><input type="range" class="emotion-slider" id="emo-joy" min="0" max="100" value="0"><span class="emotion-val" id="emo-joy-val">0%</span></div>
+        <div class="emotion-row"><span class="emotion-label">Anger</span><input type="range" class="emotion-slider" id="emo-anger" min="0" max="100" value="0"><span class="emotion-val" id="emo-anger-val">0%</span></div>
+        <div class="emotion-row"><span class="emotion-label">Sadness</span><input type="range" class="emotion-slider" id="emo-sadness" min="0" max="100" value="0"><span class="emotion-val" id="emo-sadness-val">0%</span></div>
+        <div class="emotion-row"><span class="emotion-label">Surprise</span><input type="range" class="emotion-slider" id="emo-surprise" min="0" max="100" value="0"><span class="emotion-val" id="emo-surprise-val">0%</span></div>
+      </div>
+      <div class="emotion-presets">
+        <button data-preset="neutral">Neutral</button>
+        <button data-preset="joy">Happy</button>
+        <button data-preset="anger">Angry</button>
+        <button data-preset="sadness">Sad</button>
+        <button data-preset="surprise">Surprised</button>
+      </div>
+    </div>
+
+    <div class="demo-divider" id="emotion-divider" style="display:none"></div>
+
     <!-- Step 6: Mic -->
     <div class="demo-step-group" id="demo-group-6">
       <div class="demo-step-label">
@@ -1097,6 +1150,11 @@ <h2 class="step-title">Add Real-time Microphone</h2>
     completeStep(3);
     setStatus(`${label} engine ready. Upload a VRM to continue.`);
 
+    // Show/hide emotion panel based on engine
+    showEmotionPanel(selectedEngine === 'v2');
+    resetEmotionUI();
+    if (selectedEngine === 'v2') updateEmotionVector();
+
     // Reload VRM to rebind VRMA bone animations from new engine
     if (vrm) {
       const vrmScene = vrm.scene;
@@ -1140,6 +1198,56 @@ <h2 class="step-title">Add Real-time Microphone</h2>
   }
 });
 
+// ════════════════════════════════════════
+// Emotion Control (V2 only)
+// ════════════════════════════════════════
+const emotionGroup = $('emotion-group');
+const emotionDivider = $('emotion-divider');
+const EMOTION_KEYS = ['neutral', 'joy', 'anger', 'sadness', 'surprise'];
+const emotionSliders = EMOTION_KEYS.map(k => $(`emo-${k}`));
+const emotionVals = EMOTION_KEYS.map(k => $(`emo-${k}-val`));
+
+function updateEmotionVector() {
+  const vec = emotionSliders.map(s => parseInt(s.value) / 100);
+  if (lipsync?.setEmotion) {
+    try { lipsync.setEmotion(vec); } catch (e) { console.warn('setEmotion:', e.message); }
+  }
+}
+
+function showEmotionPanel(show) {
+  emotionGroup.style.display = show ? '' : 'none';
+  emotionDivider.style.display = show ? '' : 'none';
+}
+
+function resetEmotionUI() {
+  emotionSliders.forEach(s => { s.value = 0; });
+  emotionVals.forEach(v => { v.textContent = '0%'; });
+  document.querySelectorAll('.emotion-presets button').forEach(b => b.classList.remove('active'));
+}
+
+// Slider input events
+emotionSliders.forEach((slider, i) => {
+  slider.addEventListener('input', () => {
+    emotionVals[i].textContent = slider.value + '%';
+    document.querySelectorAll('.emotion-presets button').forEach(b => b.classList.remove('active'));
+    updateEmotionVector();
+  });
+});
+
+// Preset buttons
+document.querySelectorAll('.emotion-presets button').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const preset = btn.dataset.preset;
+    document.querySelectorAll('.emotion-presets button').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    emotionSliders.forEach((s, i) => {
+      s.value = EMOTION_KEYS[i] === preset ? 100 : 0;
+      emotionVals[i].textContent = s.value + '%';
+    });
+    updateEmotionVector();
+  });
+});
+
 // ════════════════════════════════════════
 // VRM Upload (button + drop + drag)
 // ════════════════════════════════════════