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 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 twelve-bin field painted onto an isomorphic pad layout: two semitone steps on a square or hexagonal grid, the piano or a fretboard for comparison. Paints by value (the kit's colour ramps, or a tense/bright ramp) or by pitch identity (hue by semitone or by circle of fifths), and rings the notes a progression step adds and dashes the ones it releases, so a chord sequence can be animated on several layouts at once. Every cell is coloured by the value of the pitch class it sounds, so a chord's consonant neighbourhood, a song's note histogram or a scale mask can be drawn on several layouts side by side and read as regions or as scatter. Chord tones take the accent, tense values are tinted rather than merely dark, a tonic gets a ring and a tonal-centre marker can sit over the lattice. A display envelope and a live trail beside it keep played pads glowing and fading, so recent chords leave a decaying trail. The pure geometry beside it also scores a field's readability on a layout: roughness across neighbours and the number of connected regions.
Reusable molded artwork with controlled state and headless input.
An (i) console icon button that opens help on Base UI's Popover, so touch, keyboard and screen-reader users can reach it: a click, a tap, Enter or Space opens a dialog named by the label and described by the help, focus moves in, and Escape or an outside press closes it and returns focus to the button. The button sits at the console control height, the popup portals into the fullscreen element in browser fullscreen, and InfoTipContent spaces rich help (paragraphs, lists, code, keys).
The harmonic fingerprint of a pitch-class set as six bars — one per interval class, m2 through the tritone. Invariant under transposition and inversion, so it describes what a sonority sounds like rather than how it is spelled: every major triad in every key draws the same shape. Weight to the right is tension, weight in the middle is sweetness. Takes the six counts, or the notes to compute them from.
Portable controlled disc console artwork.
Where the keys of a piano are and which one you hit, as pure maths: a key rectangle per MIDI note over any range in a unit coordinate box, black keys placed by the equal-white-tops derivation rather than the lumpy uniform approximation, hit-testing back from a point with black-over-white priority, white-key indexing both ways, and the press-height velocity a touch surface needs because a screen has no key bed. No React, no DOM — testable in Node and safe to draw with on the server.
Shared rotary control with dial, ring, studio and text variants. Dial default: label at rest, formatted value on hover or edit. showLabelOnHover=false keeps both visible; valueReveal=edit explicitly disables hover reveal. captionWidth, labelCompressible and labelNarrow control bounded fitting and ellipsis; textStyles and unitSize style the readout. variant/skin/size select appearance independently of indicator, ticks, arc geometry, bipolar and pizza feedback. interaction, dragDistance, wheelSensitivity and cursor tune shared gestures; keyboard, reset, ARIA and MIDI/CC stay shared. Use ParameterKnob for schema-bound module parameters and renderDesign for custom drawing; KnobHeadless remains available for custom interaction structure. The UI-kit Knob catalog documents the full prop table and copyable patterns.
The framework-agnostic maths behind a potentiometer gesture: drag, wheel and keyboard arithmetic in normalised space, with pluggable linear and logarithmic response curves.
Shared Knob presets, pure artwork exports and scoped motion CSS for custom knob designs.
The headless slider primitive a knob is built on: the full role="slider" contract, drag, wheel and first-interaction reporting, plus a shared hover/edit readout slot that truncates labels and values inside its parent width. Its cursor defaults to ns-resize; bring your own body skin.
Serializable KnobMan template identity, bounded retina sizing, value-to-frame mapping, and a host-injected renderer provider for keeping the knob interaction portable.
Scoped pale porcelain materials.
A silent pale porcelain space interface with arc dials, pearl faders, local presets and bounded undo/redo.
Volume bars with peak hold: RMS for the bar, a decaying tick for the recent peak, in either orientation. Takes an analyser, a data callback, or levels you already computed.
An LFO's waveform with a cursor riding the current phase. Drawn from the shape's closed form rather than measured off an analyser — which is the only sensible way to display a modulator running well below 20 Hz. Pass a phase to drive it from a real LFO, or let it run on its own clock.
A circular vectorscope trace: one mono signal plotted against a phase-shifted copy of itself, so a single channel draws circles and rosettes. Phosphor persistence via a per-frame fade, and the geometry is a pure exported function you can test or render headlessly.
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.
Reusable graphite artwork with controlled state and keyboard interaction.
A directly importable custom knob design using shared headless interaction and its authored artwork.
Eight custom Canvas knob surfaces with a shared analytic lighting renderer.
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.
Eighteen white-plastic, pearl and porcelain profiles using the shared machined renderer.
A silent landscape echo console with cobalt fluted dials, procedural contour terrain, editable placement and an illustrative echo scope.
Mono, spaced pair, XY and ORTF diagrams in a compact visual card selector, sharing microphone pattern grid behavior.
First-order microphone pattern IDs, numeric enum adapters and unit polar diagram geometry.
A compact polar-pattern readout opening five visual cards with responsive grid navigation and portable theme inheritance.
A coalesced live view of MIDI controls — one row each, with an inline SVG sparkline of recent values, a level bar, held state and a message count. Built for diagnosing a controller without drowning in event spam.
Reusable click/drag lifecycle with injected MIDI encoder and platform download/drag adapters. Cleans up drag resources on replacement and unmount.
Decode raw MIDI bytes into a described message: notes (with names), CC (with common controller names), pitch bend, both aftertouch flavours, program change and system realtime. Pure and synchronous — no React, no Web MIDI.
A diagnostic list of incoming MIDI messages, decoded and colour-coded by type. Controlled and presentational: the caller owns the buffer and supplies messages, so it drops into a lab page, a settings popover or a routing debugger without acquiring MIDI itself.
Shared MIDI playback panel extracted from Code Sequencer: timeline, stable colored tracks, host mute/solo callbacks, fit or following scroll view, export and drag actions. The host owns scheduling and MIDI file encoding.
Circular MIDI sonar and note orbits: held notes stay bright, released notes fade, and the host owns time.
A composition-first module faceplate navbar with brand, preset, action, preferences, status, and controlled power slots in a stable responsive order.
Module bypass switch: ModulePowerHeadless for any skin, plus a discreet stock icon, a ToggleSwitch variant coloured by module CSS, and a labelled Live treatment.
A reusable short-loop piano-roll editor for independent voices: stable note and voice identity, color-coded overlapping notes, per-note pitch curves with linear interpolation, and keyboard-accessible curve handles. It composes the Piano Roll's tested note grid and leaves continuous pitch delivery to the host's future expression transport.
Pure pitch-expression model helpers for multi-voice piano rolls: stable voice/note records, bounded note-local pitch curves, deterministic sorting, linear interpolation and point updates. No React, DOM or audio transport.
The arithmetic that turns a tempo into seconds and seconds back into a position you can say out loud: a typed table of note divisions from a whole note to a 1/32 in plain, dotted and triplet flavours, each carrying its length in beats, its seconds and its rate in Hz; MPC-convention swing offsets; a pure tap-tempo reducer with median averaging and a phrase-ending gap rule; grid quantising; and 1-based bar.beat.sixteenth formatting. Beat conversion is echo-train's, imported rather than restated, and the shipped conversions it unifies are pinned bit-identical against verbatim copies. No React, no DOM — testable in Node and safe to format with on the server; and formatDuration, seconds as m:ss.
A bounded piano range with named notes, gesture commits and an optional instrument-default reset.