Waveform
Live signal waveform. A fluid SVG of a morphing polyline over mirrored level bars and a dashed centreline, animating to signal an active feed and holding a static frame when paused or reduced-motion. One primary series ink; colour only when the wave itself is the live measurement.
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-waveform2
For dark mode, add the dark class to your <html> element:
<html class="dark">Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| samples | number | 120 | Number of points sampled across the waveform. |
| speed | number | 0.6 | Animation time-scale multiplier. |
| amplitude | number | 0.4 | Peak height as a fraction of the SVG height. |
| height | number | 120 | Fluid SVG height in pixels. |
| color | string | tokens.color.text.primary | Polyline stroke color only. |
| showBars | boolean | true | Whether to render mirrored level bars. |
| showCenterline | boolean | true | Whether to render the dashed centre reference. |
| paused | boolean | false | Whether to hold the current or initial static frame. |
| className | string | '' | Root element class name. |
| style | React.CSSProperties | {} | Root element inline styles. |
AI Canvas