SIG—03 Signature system
Waveform
Audio you can see and scrub: a waveform over a native audio element, with chapters, speed, skips and an imperative handle.
Live — this one is real
The composition is generated in your browser and decoded into its waveform. Press K to play, J and L to skip, [ and ] for chapters.
ComposingRendering 48 seconds of audio offline…
Usage
import { Waveform } from "mizu-ui";
export function Example() {
const src = "/audio/calibration.wav";
return <Waveform src={src} label="Calibration tone, 440 Hz" />;
}
This code, running — no configuration beyond the data
0:00—:—
Arrow keys seek five seconds, Shift thirty. Space plays or pauses. J and L skip ten seconds; brackets move between chapters.
Keyboard
- SpaceK
- Play or pause (on the waveform)
- ←→
- Seek five seconds (Shift: thirty)
- JL
- Back or forward ten seconds
- []
- Previous or next chapter
- HomeEnd
- Start or end
Source & setup
Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.
npx shadcn@latest add 0xuser64bit/mizu/waveformEvery component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:
import { Waveform } from "@/components/ui/mizu/waveform";For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.
Inspect signature/Waveform.tsx
Source is included in the npm package under src/signature/Waveform.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src / label | string | — | Playable source and accessible name. The example uses public/audio/calibration.wav from this repository; copy it to your app's public/audio folder or supply your own audio URL. The npm package and registry do not install media assets. |
| peaks | number[] | — | Normalised 0–1 amplitudes. Omit to decode from the source (same-origin or CORS-enabled). |
| markers | WaveformMarker[] | — | Chapters or comments: id, time in seconds and label. Listed beneath with durations. |
| duration | number | — | Seconds to show before the media reports its own. |
| rates / height | number[] / number | [1, 1.25, 1.5, 2] / 72 | Speed cycle and waveform height. |
| onTimeUpdate / onPlayingChange | function | — | Follow playback, e.g. to highlight a transcript. |
| ref | WaveformHandle | — | play(), pause() and seek(seconds) for external controls. |
Accessibility
The waveform is a slider with readable time (“1:14 of 42:10”); arrows seek five seconds, Shift thirty. Play, skip and speed are labelled buttons, chapters are a real list with the current one marked. A failed source is announced with a retry. Letter shortcuts only apply while focus is inside the player.
Motion
The waveform prints left to right once measured; while decoding, bars breathe in a travelling wave. The play glyph morphs into pause. Reduced motion keeps every state and removes the travel.