Design modern interfaces for instruments and effects, on the web or in native DAWs. Customizable controls and themes powered by the Maru Audio platform.
An element's layout size, kept current while it is mounted, through a callback ref. It reads layout sizes (offsetWidth before the first paint, then the ResizeObserver's borderBoxSize), never getBoundingClientRect, so a face inside a zoomed canvas does not flip layouts as the canvas zooms; it observes and disconnects symmetrically with the element, so an effect replay cannot leave it unobserved.
Reports the first user gesture on a control, synchronously inside the event — the hook for resuming a suspended AudioContext, which browsers only allow from a user-activated handler.
Whether an element can go full screen, whether it is, and a toggle: reads the element's own document (a face may run in a frame), follows fullscreenchange so Escape is reflected, and swallows a denied request's rejection. Server-safe.
Arrow, Page and Home/End handling for a knob, with step sizes induced from the range so any control is ~100 presses end to end, and Shift for a fine pass.
The Web MIDI permission gate: request access from a user gesture, then track connected input and output ports through hotplug. Reports serialisable port descriptions rather than live MIDIPort objects.
Coalesce a MIDI stream into one row per control instead of one row per message: a CC sweep updates a single row with a value history, and a note-on/note-off pair becomes one row that toggles held. Rows publish on an interval so a controller cannot outrun React.
Subscribe to several MIDI inputs at once and merge them into one message stream. Messages dispatch immediately; per-device activity is batch-flushed so a CC sweep can drive an indicator without re-rendering on every message.
A reusable press-and-glide lifecycle for hit-tested note surfaces such as kalimbas and harps. The SDK owns the framework-free gesture state machine while this hook supplies browser pointer wiring and each instrument supplies its own zone geometry.
A complete press-and-release lifecycle for playable pads, keys and drum zones. Pointer Events cover mouse, pen and touch; pointer capture, window fallbacks, cancellation, focus loss, visibility changes, disabling and unmount all converge on exactly one release, with matching Enter and Space keyboard behavior.
A viewer preference in localStorage, read synchronously through useSyncExternalStore so the first paint already uses it, written in the setter rather than inside a React updater, shared by every instance using the same key (in-document listeners and the storage event), and kept in memory when storage throws. The consumer's parse owns validation.
Absolute pointer tracking for surface controls: pressing anywhere on a track jumps the head there and keeps dragging from that spot, with pointer capture and window-level release fallbacks.
Wheel support that actually stops the page scrolling — a non-passive listener — plus the transient "is the user scrolling right now" flag that drives fade-in styling.
A caption over a big tabular-monospace number, with its unit beside it and an optional qualifier underneath — the REDUCTION / −14.0 dB element every meter-bearing face grows, made once. Tabular figures so a live value does not reflow as its digits change; the unit as a separate muted element so the eye reads the magnitude first; and, crucially, a missing value prints an em dash rather than a zero, because a meter with no source showing 0.0 dB claims a measurement it never received. A real zero still prints as zero — that negative case is pinned. The note line is where "predicted", "reference pattern" or "no tap from this host" goes, and an accent recolours the value alone, never a placeholder.
A controlled channel-vocoder panel with paired analysis and carrier filter banks, logarithmic frequency guides, grouped range, envelope and output controls, and optional live spectra. Includes a pure band-map model for tests and server rendering.
Canonical oscillator and LFO waveform ids, aliases, enum adapters, and deterministic periodic-wave maths.
A compact waveform readout that opens a visual, keyboard-navigable popover instead of spending panel width on segmented facets. Includes a hook for integer DSP enum params.
The transfer functions distortion stages actually run, as pure maths: the soft-clip saturator, both shipped bitcrush grids, the Chebyshev polynomial recurrence, an electric-piano pickup curve whose distance and alignment set how hard it bends and which harmonics it makes, a harmonic-weight solver measured off the curve itself, an exact staircase sampler for quantisers, and a linear in/out amplitude axis with forward and inverse mappings. No React, no DOM — testable in Node and safe to draw with on the server.
An editable bar chart, such as a pitch-class histogram: twelve bars labelled C to B over a row coloured like piano keys, with the scale's notes highlighted and the tonic accented. Each bar is a vertical Base UI slider, so it is a native range input named by its label with arrows, Page Up/Down, Home and End. The pointer paints across bars: press to set the bar under it, drag sideways to set every bar crossed along a straight line, so a fast stroke leaves no gaps. Values draw clamped to the bar but an edit only rewrites the bars it touched, and a stroke commits once for one undo step. The pointer reading, the stroke and the colouring sit in a pure core beside it.
A two-dimensional drag surface with a grid, crosshair and a glowing dot that leaves a short trail. Two independent value outputs, each with its own range.
The unstyled plane primitive an XY pad is built on: absolute pointer positioning on both axes, the y-axis inversion screen coordinates make easy to get backwards, and keyboard stepping where the plain arrow is coarse and Shift is fine. Renders no appearance — a render prop hands your face the drag state.