Shader Atlas
한국어
✺ Light & phenomena

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.

Also known as: WaveformAudio waveformAudio visualizer

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Waveform } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Waveform />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Waveform } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Waveform/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Waveform } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Waveform />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Waveform } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Waveform />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Waveform',
    }
  ]
}, { disableTelemetry: true })

Props · Waveform

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
styleStylebarsbars · wave · line · dotsVisualizer style: equalizer bars, a filled wave envelope, an oscilloscope line, or a dot matrix
colorAColor A#3b5bff—Color at the start
colorBColor B#ff3bd4—Color at the end
stopsColorsSet in codenull—Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpaceColor Spaceoklablinear · oklch · oklab · hsl · hsv · lchColor space for the start→end gradient
fromStart
x0y0.5
{"x":0,"y":0.5}x, y: 0 – 1Where the waveform starts (Color A end)
toEnd
x1y0.5
{"x":1,"y":0.5}x, y: 0 – 1Where the waveform ends (Color B end)
amplitudeAmplitude10 – 2 (step 0.01)Overall signal level (0 = silence). Map this to your own audio level to make the waveform react to real sound.
frequencyFrequency10.2 – 3 (step 0.01)How busy the signal is across the width (higher = more peaks)
heightHeight0.60.05 – 1 (step 0.01)Maximum vertical extent of the waveform as a fraction of the canvas height
alignAlignmirroredmirrored · top · bottomWhich side of the start→end baseline the waveform grows on: mirrored around it, above it (top), or below it (bottom)
countCount324 – 128 (step 1)Number of bars (or dot columns) across the width
barWidthBar Width0.60.1 – 1 (step 0.01)Bar thickness as a fraction of its column (1 = bars touch)
roundingRounding10 – 1 (step 0.01)Rounds the bar ends (0 = square, 1 = fully rounded caps)
dotSizeDot Size0.70.2 – 1 (step 0.01)Dot diameter as a fraction of its cell
lineWidthLine Width0.0060.001 – 0.05 (step 0.001)Stroke thickness of the line. A value of one (1) matches the canvas height.
softnessSoftness00 – 1 (step 0.01)Feathers the wave's edge into a glow
speedSpeed10 – 3 (step 0.01)Animation speed of the simulated signal
seedSeed10 – 100 (step 1)Adjusts the starting state, useful for variation

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Sine Wave사인파

Animated wave with thickness and softness.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Ripples물결무늬

Concentric animated ripples emanating from a point.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Strands빛 가닥

Flowing ribbons of light with a multi-color gradient.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Falling Lines낙하 광선

Directional falling lines with a leading-to-trailing color fade.

Like an equalizer or oscilloscope, it turns a moving signal into a visible waveform. Treat it as a visualizer that accepts a value, not as an audio analyzer by itself.

Choose `bars`, `wave`, `line`, or `dots` with `style`. `amplitude` from 0–2 sets overall signal height, `frequency` from 0.2–3 changes how busy it looks, and `height` from 0.05–1 limits its vertical extent. `count` from 4–128 sets the number of bar or dot columns.

The built-in signal is simulated, so the component does not listen to a microphone or audio track automatically. Connect your app audio level to `amplitude` when it should react, and tune height and count so the shape remains distinct from its background.

When to use

Use it in a music player visualizer, an audio feature hero, or a decorative playback indicator. Avoid it when you expect audio to be detected automatically without connecting an analysis value.

Open as page ↗