hanc-webrtc-widgets 2.1.8 → 2.1.10

package/README.md

@@ -683,54 +683,118 @@ cleanup();
 
 ## Advanced Configuration
 
-### Audio Reactivity Tuning
+The orb visualization is fully customizable with dozens of parameters. Here's what you can tweak to make it perfect for your design.
+
+### Visual Appearance
+
+Control how the orb looks and glows:
 
 ```html
 <hanc-ai-inline-call
   agent-id="YOUR_AGENT_ID"
-  audio-reactivity="4.0"
-  audio-smoothing="0.85"
-  morph-strength="1.2"
+  glow-intensity="1.2"
+  fresnel-power="2.5"
+  color-contrast="1.5"
+  noise-scale="1.5"
 ></hanc-ai-inline-call>
 ```
 
-- **`audio-reactivity`**: Higher values = stronger visual response (1.0 - 5.0)
-- **`audio-smoothing`**: Lower = smoother, Higher = snappier (0.1 - 1.0)
-- **`morph-strength`**: Audio-driven deformation intensity (0.5 - 2.0)
+**Glow Settings:**
+- `glow-intensity` (0.5 - 2.0, default: 0.8) - How bright the outer glow appears. Higher = more dramatic glow effect
+- `idle-glow-multiplier` (0 - 1.0, default: 0.4) - Glow brightness when nobody's talking. Lower = more subtle when idle
+- `fresnel-power` (1.0 - 5.0, default: 2.5) - Edge highlight intensity. Higher = sharper, brighter edge glow
 
-### Visual Effects
+**Color & Texture:**
+- `color-contrast` (1.0 - 3.0, default: 1.5) - Sharpness of the color pattern. Higher = more defined color bands
+- `noise-scale` (1.0 - 3.0, default: 1.5) - Detail level of the surface texture. Higher = more intricate patterns
+
+### Audio Reactivity
+
+Make the orb respond to voice input:
 
 ```html
 <hanc-ai-inline-call
   agent-id="YOUR_AGENT_ID"
-  glow-intensity="1.5"
-  fresnel-power="3.0"
-  color-contrast="2.0"
-  noise-scale="2.0"
+  audio-reactivity="3.0"
+  audio-smoothing="0.9"
+  morph-strength="1.0"
 ></hanc-ai-inline-call>
 ```
 
-- **`glow-intensity`**: Outer glow strength (0.5 - 2.0)
-- **`fresnel-power`**: Edge highlight intensity (1.0 - 5.0)
-- **`color-contrast`**: Color pattern sharpness (1.0 - 3.0)
-- **`noise-scale`**: Pattern detail level (1.0 - 3.0)
+**Response Intensity:**
+- `audio-reactivity` (1.0 - 5.0, default: 3.0) - How strongly the orb reacts to audio. Higher = more dramatic pulsing and movement
+- `morph-strength` (0.5 - 2.0, default: 1.0) - How much the orb deforms when responding to voice. Higher = more shape-shifting
+
+**Smoothness:**
+- `audio-smoothing` (0.1 - 1.0, default: 0.9) - How smooth the audio reaction is. Lower = gentle flowing motion, Higher = snappy response
+
+### Idle Behavior
 
-### Idle Animation
+Configure how the orb moves when nobody's talking:
 
 ```html
 <hanc-ai-inline-call
   agent-id="YOUR_AGENT_ID"
-  idle-morph-multiplier="0.5"
+  idle-morph-multiplier="0.25"
+  rotation-speed="0.1"
+  noise-speed="0.3"
+></hanc-ai-inline-call>
+```
+
+**Idle Animation:**
+- `idle-morph-multiplier` (0 - 1.0, default: 0.25) - How much the orb "breathes" when idle. Higher = more movement
+- `rotation-speed` (0 - 1.0, default: 0.1) - Rotation speed. Higher = faster spinning
+- `noise-speed` (0 - 1.0, default: 0.3) - Pattern animation speed. Higher = faster flowing patterns
+
+### Complete Example
+
+Here's a custom configuration that creates a high-energy, reactive orb:
+
+```html
+<hanc-ai-inline-call
+  agent-id="YOUR_AGENT_ID"
+  theme="emerald"
+
+  <!-- Make it glow brighter and more dramatically -->
+  glow-intensity="1.5"
   idle-glow-multiplier="0.6"
+  fresnel-power="3.0"
+
+  <!-- React strongly to audio -->
+  audio-reactivity="4.0"
+  audio-smoothing="0.85"
+  morph-strength="1.2"
+
+  <!-- More intricate patterns -->
+  color-contrast="2.0"
+  noise-scale="2.0"
+
+  <!-- More animated when idle -->
+  idle-morph-multiplier="0.5"
   rotation-speed="0.2"
   noise-speed="0.5"
 ></hanc-ai-inline-call>
 ```
 
-- **`idle-morph-multiplier`**: Movement in idle state (0 - 1.0)
-- **`idle-glow-multiplier`**: Glow visibility when idle (0 - 1.0)
-- **`rotation-speed`**: Rotation animation speed (0 - 1.0)
-- **`noise-speed`**: Pattern animation speed (0 - 1.0)
+### Tips for Fine-Tuning
+
+**For subtle, professional look:**
+- Lower `glow-intensity` (0.6 - 0.8)
+- Lower `audio-reactivity` (2.0 - 2.5)
+- Lower `idle-morph-multiplier` (0.1 - 0.2)
+
+**For energetic, eye-catching look:**
+- Higher `glow-intensity` (1.2 - 1.8)
+- Higher `audio-reactivity` (3.5 - 4.5)
+- Higher `morph-strength` (1.2 - 1.5)
+
+**For smooth, flowing animations:**
+- Lower `audio-smoothing` (0.7 - 0.85)
+- Lower `rotation-speed` (0.05 - 0.1)
+
+**For responsive, snappy animations:**
+- Higher `audio-smoothing` (0.9 - 0.95)
+- Higher `noise-speed` (0.5 - 0.7)
 
 ---