Visualizer Widget
Audio-reactive visualization display. Shows real-time audio information through 14 different visual styles, from professional meters to creative effects.
Overview
| Property | Value |
|---|---|
| Type | Display |
| Interaction | None (visual only) |
| Styles | 14 visualizer types |
| Best For | Feedback, metering, aesthetics |
Properties
| Property | Type | Description |
|---|---|---|
vizStyle | number (0-13) | Which visualizer type to use |
demoMode | boolean | Show animated demo when no audio |
Visualizer Types
| ID | Name | Category | Best For |
|---|---|---|---|
| 0 | Spectrum Bars | Frequency | EQ, mastering |
| 1 | Spectrum Mirror | Frequency | Creative, DJ |
| 2 | Meter Gradient | Metering | Dynamics, utility |
| 3 | Meter Segments | Metering | Vintage |
| 4 | Wave Filled | Time | Tape, delay |
| 5 | Wave Line | Time | Modern, synth |
| 6 | Scope Grid | Time | Technical |
| 7 | Scope Glow | Time | Vintage |
| 8 | Plasma | Creative | Ambient |
| 9 | Blob | Creative | LFO, mod |
| 10 | Particles | Creative | EDM, granular |
| 11 | Fractal | Creative | Experimental |
| 12 | Grid Pulse | Creative | Sequencer |
| 13 | Radial | Frequency | Modern |
See Visualizers for detailed documentation on each type.
Sizes
| Size | Grid Units | Use For |
|---|---|---|
| Small | 4×3 | Accent, secondary display |
| Medium | 6×4 | Standard visualizer |
| Large | 9×5 | Hero element, prominent display |
Size by Type
| Visualizer Category | Recommended Size |
|---|---|
| Spectrum (bars, mirror, radial) | Wide (6×4+) |
| Meters (gradient, segments) | Tall (2×6+) |
| Waveforms (wave, scope) | Wide (6×3+) |
| Creative (plasma, blob, fractal) | Square (4×4+) |
Color Properties
All visualizers use these colors:
| Property | Purpose |
|---|---|
bodyColor | Background |
trackColor | Primary visual element |
activeColor | Highlight/accent |
pointerColor | Tertiary (complex visualizers) |
When to Use Visualizers
✅ Use visualizers for:
- Audio feedback (show what’s happening)
- Metering (levels, gain reduction)
- Visual interest (creative plugins)
- Brand identity (distinctive look)
❌ Skip visualizers when:
- Plugin is purely utility
- Space is very limited
- Visualizer doesn’t match plugin purpose
Choosing the Right Visualizer
By Plugin Type
| Plugin Type | Recommended Visualizers |
|---|---|
| EQ | Spectrum Bars, Radial |
| Compressor | Meter Gradient, Meter Segments |
| Delay | Wave Filled, Wave Line |
| Reverb | Wave Filled, Plasma |
| Lo-Fi | Scope Glow, Wave Filled |
| Creative | Plasma, Blob, Fractal |
By Aesthetic
| Aesthetic | Recommended Visualizers |
|---|---|
| Professional | Spectrum Bars, Meter Gradient |
| Vintage | Scope Glow, Meter Segments |
| Modern | Wave Line, Radial |
| Creative | Plasma, Particles, Fractal |
Tips
Demo Mode
Enable demoMode: true so the visualizer animates even without audio input. This:
- Shows the visualizer in screenshots
- Helps users understand what it does
- Looks more alive in the UI
As Hero Element
For immersive layouts, the visualizer can dominate:
- Cover 60-80% of faceplate
- Controls float at edges
- Creative visualizers work best
Match to Function
The visualizer should relate to what your plugin does:
- EQ → spectrum analyzer shows frequency changes
- Compressor → meter shows gain reduction
- Delay → waveform shows echoes
- Creative effect → creative visualizer matches vibe
Don’t Force It
Sometimes the best choice is no visualizer:
- Simple utilities don’t need visual flair
- Too many visualizers = cluttered
- If it doesn’t add value, skip it
Example Configurations
EQ Spectrum Analyzer
vizStyle: 0 (SPECTRUM_BARS)
size: 8×4
position: top center
Compressor Gain Reduction Meter
vizStyle: 2 (METER_GRADIENT)
size: 2×6
position: right side
orientation: vertical
Creative Ambient Effect
vizStyle: 8 (PLASMA)
size: 10×6
position: full width, hero element