Component
Waveform
Canvas audio visualization for live analyser nodes, sample arrays, media streams, and low-cost intensity values. Exported from the single package for each framework: @refraction-ui/react and @refraction-ui/astro.
Examples
Bars
Line
Rings
Animate
Color
Installation
$
pnpm add @refraction-ui/reactUsage
tsx
import { Waveform } from '@refraction-ui/react'
export function Recorder({ analyserNode }) {
return (
<Waveform
source={analyserNode}
height={48}
amplitude={0.75}
variant="bars"
barCount={40}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
source | AnalyserNode | MediaStream | Float32Array | number[] | -- | Live analyser, media stream, or sample data source. |
samples | Float32Array | number[] | -- | Precomputed samples for static or replay visualizations. |
intensity | number | 1 | 0 to 1 energy level used for generated animation samples. |
amplitude | number | 1 | 0 to 1 visual waveform height inside the canvas. |
variant | 'bars' | 'line' | 'rings' | 'bars' | Visualization style. |
height | number | string | 80 | Canvas box height in px or CSS length. |
width | number | string | '100%' | Canvas width in px or CSS length. |
barCount | number | 48 | Number of samples rendered by the generated waveform. |
smoothing | number | 0.8 | Exponential smoothing factor from 0 to 1. |
color | string | 'var(--accent-2)' | Canvas stroke or fill color. |
paused | boolean | false | Freezes the animation loop. |
className | string | -- | Additional CSS classes. |