Documentation

Documentation Components

Waveform

Audio-visualizer waveform — equalizer bars, a filled wave, an oscilloscope line, or a dot matrix — driven by a simulated signal whose amplitude you can map to your own audio level

Props

style"bars" | "wave" | "line" | "dots"
Default:bars
Visualizer style: equalizer bars, a filled wave envelope, an oscilloscope line, or a dot matrix
colorAstring
Default:#3b5bff
Color at the start
colorBstring
Default:#ff3bd4
Color at the end
stopsobject
Default:null
Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:oklab
Color space for the start→end gradient
from{x: number, y: number}
Default:{"x":0,"y":0.5}
Where the waveform starts (Color A end)
to{x: number, y: number}
Default:{"x":1,"y":0.5}
Where the waveform ends (Color B end)
amplitudenumber
Default:1
Overall signal level (0 = silence). Map this to your own audio level to make the waveform react to real sound.
frequencynumber
Default:1
How busy the signal is across the width (higher = more peaks)
heightnumber
Default:0.6
Maximum vertical extent of the waveform as a fraction of the canvas height
align"mirrored" | "top" | "bottom"
Default:mirrored
Which side of the start→end baseline the waveform grows on: mirrored around it, above it (top), or below it (bottom)
countnumber
Default:32
Number of bars (or dot columns) across the width
barWidthnumber
Default:0.6
Bar thickness as a fraction of its column (1 = bars touch)
roundingnumber
Default:1
Rounds the bar ends (0 = square, 1 = fully rounded caps)
dotSizenumber
Default:0.7
Dot diameter as a fraction of its cell
lineWidthnumber
Default:0.006
Stroke thickness of the line. A value of one (1) matches the canvas height.
softnessnumber
Default:0
Feathers the wave's edge into a glow
speednumber
Default:1
Animation speed of the simulated signal
seednumber
Default:1
Adjusts the starting state, useful for variation

Usage

<Shader>
  <Waveform />
</Shader>
Previous
WaveDistortion
Next
WaveletNoise