Design modern interfaces for instruments and effects, on the web or in native DAWs. Customizable controls and themes powered by the Maru Audio platform.
A compact numeric input on Base UI's NumberField with optional steppers and an optional Base UI Slider sharing its draft. One onValueCommitted per gesture (Enter, Cmd/Ctrl+Enter committed before any enclosing shortcut sees the key, blur, a stepper, a slider release, an arrow key), clamped or null when cleared; Escape reverts a pending draft and stops there. layout="row" is one 28px inspector line (flexible slider, 44px value); ghostValue draws a default as a tick where an unset thumb parks. Heights through the control-height variables. The draft and commit rules sit in a pure core beside it.
Controlled portrait console artwork with shared input semantics.
Scoped concentric dial, rail and glyph key artwork.
Controlled portrait console artwork with shared input semantics.
A silent portrait rack with concentric controls, compact drive banks and illustrative stereo traces.
Controlled portrait console artwork with shared input semantics.
Reusable controlled graphite knob with scoped material artwork.
A time-domain waveform trace with min/max downsampling so transients survive, and optional zero-crossing trigger so a steady tone stands still instead of sliding.
A module's output meter with its gain control on it: pixel-aligned LED bars, one per channel (L/R when the host measures them, one merged bar otherwise), hardware green/amber/red zones, a peak-hold segment and a latched clip light, with a triangle under the bars that sets the linear output gain on the meter's own dB scale. Levels paint straight to the DOM, so a 30 Hz meter feed never re-renders the bars.
Where a menu or popover opened from a control should be portaled: the fullscreen element while the control is inside browser fullscreen, and its own document's body otherwise. A popup appended to the body is invisible while another element is fullscreen, so every kit overlay picks its container through this one helper as it opens.
A drum machine's bank of velocity pads: rows of rubber squares, labelled and lit from the state you pass in. Velocity comes from where in the pad the press landed — the top edge is a full-force hit, the bottom edge the softest one — so a tap is something a player can aim rather than a single fixed level. Choke groups are drawn as well as obeyed: pads that cut each other wear a tie mark, from the same membership function an engine uses to decide what to silence. Includes a first-class look for a pad that is deliberately silent. Layout, hit testing and the velocity law sit in a pure core beside it.
Compact underline tabs for a side panel on Base UI's Tabs, generic over the tab values: a root, a list built from tab items and the panels, with tablist roles, aria-selected and arrow, Home and End navigation. sm/md/lg heights (24px default), a sliding indicator (instant under reduced motion), a badge dot read as "Label (new)", and onTabClick on the root or a list that hears every click, the selected tab's included.
Reusable molded artwork with controlled state and headless input.
Typed schema handles, local prototype state and narrow host parameter bindings.
Descriptor-bound knobs and faders sharing the standard controlled primitives.
Canonical parameter descriptors, references, validation and taper functions shared by module and standalone controls.
Schema-backed enum selection with Base UI and validated presentation groups.
Canonical parameter defaults, resolution, reads and formatting without a host runtime.
The set-theory reading of a chord: normal form, prime form, the 12-bit chroma, and the matching Forte set class from the full 352-row table with its symmetry properties parsed out. Keyed on a computed prime form rather than the interval vector, so a major triad is identified as a major triad — an interval-vector lookup cannot separate a set from its inversion, which is why the usual implementation reports one as the other.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A silent grey-panel wavetable reference study with ruby selectors, dual envelopes, harmonic bars and a violet waveform.
A playable keyboard, one to ten octaves wide: press a key and it strikes with a velocity taken from how far down the key you landed, drag across it and it glissandos — previous note off, entered note on. Notes go out through onNoteOn/onNoteOff and never through a param channel, and what is lit comes back in as a held map shaped like the module contract's activeNotes, so a key that was struck but declined draws as struck-and-silent rather than as nothing at all. Scale membership and a root tint as controlled props, opt-in QWERTY input through lib/computer-keyboard, keys that are real buttons with note-name labels, and a read-only mode for drawing a voicing.
The pitch × beat note grid a melodic module needs: time left to right in beats, pitch bottom to top like a keyboard, every note a block drawn at its own beat and pitch, and the whole loop rendered at once — no virtualization, the deliberate choice for a short loop shown whole. A two-tone grid keeps bars, beats and sixteenths countable while it plays; row stripes read the octaves; the keyboard gutter names the naturals. The playhead is a prop the host drives from its own clock, and when it is null the cursor and its bar.beat.sixteenth readout are simply not drawn — a stopped transport shows no line pinned at zero. Notes are selectable and lit with the accent; an experimental edit mode lets a selected note move or stretch with optional snapping, behind a flag until a sequencer consumes it. Every colour is a --uikit-* token, so an embedded roll follows a host that repaints per mode with no prop passing.
Where a note sits in a pitch × beat plane, and which note a point lands on, as pure maths: a fixed coordinate box resolved from a pitch range and a bar count, note rectangles forward and hit-testing back, a keyboard gutter, and the 1-based bar.beat.sixteenth a transport prints — from a beat position, because a roll never needs the tempo to know where a bar line is. Plus white/black-key classification, default note naming and grid-snap rounding for edits. No React, no DOM, no canvas — testable in Node and safe to lay out on the server.
Controlled falling notes and a horizontal MIDI river with bounded indexed note windows and fading releases.
Canonical pitch names and MIDI pitch helpers, delivered from the music-theory owner for standalone UI controls.
The twelve pitch classes round a dial with the sounding ones in the value fill, joined into a polygon, so a chord becomes a recognisable shape. Order the ring by semitone, fifth or whole tone. size is pixels or "fill" (scales to its container). With onToggle the dial becomes an input: twelve named checkboxes in one roving Tab stop (arrows walk the ring, Home and End), toggled by click, Enter or Space; labelOf respells node text; note names from music-theory.
Twelve bars on a common baseline showing how much each pitch class sounded — the plainest view of the data the circle-of-fifths wheel plots, and the one to reach for when you want to read the numbers rather than see the key. Peak-normalised, with a root marker and a live-chord highlight.
Shared editable pitch, chord character and chord size histograms, with a matching read-only pitch display. Used by Harmonizer and Hand Chord.
Canonical pitch-class profile normalization, delivered from music-theory for standalone tonal analysis.
A silent planar instrument interface with neutral knobs, four section accents, interactive filter and exponential ADSR plots, waveform choices and a light/dark switch.
The conventions every two-dimensional surface shares, as pure maths: pointer to plane fractions with y read bottom-up, the keyboard step where the plain arrow is coarse and Shift is fine, clamping to a point's own limits and snapping to the axis step, directions in degrees (0 along +x, counter-clockwise) that wrap on a full turn, first-order polar patterns from omni to figure-8, nearest-point picking within a radius, and grid lines by spacing or divisions. XYPadHeadless and PlanPad both read it, so one point and N points cannot disagree.
N labelled points on a scaled top-down plane: a source and microphones in a room, speakers round a listener. The plane keeps the caller's width × depth aspect, each point is bound to two values with optional height (on an elevation strip) and heading (a polar glyph with a rotate handle), and values are clamped to per-point limits and snapped to the axis step. Pointer capture, grab without a jump, nearest-point picking for near misses; every point, handle and elevation marker is a keyboard slider on the XY pad's coarse/fine convention. Edits arrive as per-field patches bracketed by one end per gesture, which planPadParamHandlers binds to parameter paths for a module face. Underlay and overlay slots draw in world units for walls, image sources or anything else.
Where a playing timeline is now, as a tiny external store outside React: playbackPositionAt for the maths, createPlaybackClock advancing on requestAnimationFrame only while subscribed and the document is visible (and stopping at the end of a timeline that does not loop), usePlaybackClock to keep one clock per timeline, and usePlaybackPosition for the one leaf that draws a playhead. Code that writes to a non-React view subscribes directly, so playback never re-renders a face.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
Eight authored SVG knob surfaces: pearl, candy, glass, jelly and playful geometry.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A directly importable custom knob design using shared headless interaction and its authored artwork.