LFO Visualizer
lfo-visualizerVisualizersThis display is driven entirely by parameters: give it a shape, rate and range and it shows the modulator with a cursor at the current phase. It does not measure an analyser. An LFO usually runs well below 20 Hz, where reading it back is awkward and pointless when the shape is known in closed form. The cursor advances on its own clock, or you can supply a phase from a real modulator to make it a controlled display. The waveform maths is an exported pure function with tests for every corner and discontinuity.
Bone / Studio
Loading interactive preview…
Planar / Flat
Loading interactive preview…
Midnight / Minimal
Loading interactive preview…
Ember / Vintage
Loading interactive preview…
Ink / Studio
Loading interactive preview…
Mint / Flat
Loading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it.
$ pnpm dlx shadcn@latest add @pluginui/core-lfo-visualizerPulls in
control-theme
First time? Add the registry to your components.json once:
{
"registries": {
"@pluginui": "https://pluginui.com/r/{name}.json"
}
}Usage
Connect the documented props to your application or host.
import { LFOVisualizer } from "@/components/ui/lfo-visualizer"
<LFOVisualizer type="triangle" frequency={2.5} min={200} max={2000} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| frequency | number | 4 | Rate in Hz. Drives the cursor's clock when phase is not supplied. |
| type | "sine" | "square" | "sawtooth" | "triangle" | "sine" | Waveform shape. |
| min / max | number | -1 / 1 | The modulation range, shown on the readout. |
| phase | number | — | Current phase in turns (0..1) from a real modulator. Supplying it stops the internal clock. |
| cycles | number | 2 | How many cycles fit across the display. |
| showGrid | boolean | true | Draw the dotted grid and the dashed centre line. |
| showReadout | boolean | true | Show the rate and the current value as text on the display. |
| color | string | — | Trace colour. Defaults to the --uikit-accent token. |
| lineWidth | number | 2 | Trace thickness in CSS pixels. |
| height | number | 90 | Display height in pixels; width defaults to 100%. |
| paused | boolean | false | Stop the animation and hold the current frame. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.