Signal
A waveform you can scrub — drag horizontally to move the phase, hover to light the bars.
Live — this one is real
Drag horizontally to scrub the phase — hover to light the bars
Usage
import { Signal } from "mizu-ui";
export function Wave() {
return <Signal density={14} />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect lab/Signal.tsx
Source is included in the npm package under src/lab/Signal.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| density | number | 14 | Bar width divisor — lower is denser. |
| speed | number | 1 | Auto-advance rate when not dragging. |
Accessibility
A labelled native range input provides keyboard scrubbing alongside pointer dragging.
Motion
Pointer capture for drag; phase eases back to auto-advance on release.