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

    Visualizer style: equalizer bars, a filled wave envelope, an oscilloscope line, or a dot matrix

    Type
    "bars" | "wave" | "line" | "dots"
    Default
    bars

  • colorA

    Color at the start

    Type
    string
    Default
    #3b5bff

  • colorB

    Color at the end

    Type
    string
    Default
    #ff3bd4

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    null

  • colorSpace

    Color space for the start→end gradient

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    oklab

  • from

    Where the waveform starts (Color A end)

    Type
    {x: number, y: number}
    Default
    {"x":0,"y":0.5}

  • to

    Where the waveform ends (Color B end)

    Type
    {x: number, y: number}
    Default
    {"x":1,"y":0.5}

  • amplitude

    Overall signal level (0 = silence). Map this to your own audio level to make the waveform react to real sound.

    Type
    number
    Default
    1

  • frequency

    How busy the signal is across the width (higher = more peaks)

    Type
    number
    Default
    1

  • height

    Maximum vertical extent of the waveform as a fraction of the canvas height

    Type
    number
    Default
    0.6

  • align

    Which side of the start→end baseline the waveform grows on: mirrored around it, above it (top), or below it (bottom)

    Type
    "mirrored" | "top" | "bottom"
    Default
    mirrored

  • count

    Number of bars (or dot columns) across the width

    Type
    number
    Default
    32

  • barWidth

    Bar thickness as a fraction of its column (1 = bars touch)

    Type
    number
    Default
    0.6

  • rounding

    Rounds the bar ends (0 = square, 1 = fully rounded caps)

    Type
    number
    Default
    1

  • dotSize

    Dot diameter as a fraction of its cell

    Type
    number
    Default
    0.7

  • lineWidth

    Stroke thickness of the line. A value of one (1) matches the canvas height. Accepts CSS units, see Sizing and units.

    Type
    number | string
    Default
    0.006

  • softness

    Feathers the wave's edge into a glow

    Type
    number
    Default
    0

  • speed

    Animation speed of the simulated signal

    Type
    number
    Default
    1

  • seed

    Adjusts the starting state, useful for variation

    Type
    number
    Default
    1

Usage

<Shader>
  <Waveform />
</Shader>