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 silent three-band disc interface with frosted trays, porcelain dials, segmented choices and local presets.
Portable controlled disc console artwork.
What makes a readout look like hardware instead of like text: nine panel skins (LED red/amber/green/blue, VFD, plasma, and the backlit and reflective LCDs) plus the pure string builders that draw them — a recessed pane with the bezel's overhang along its top edge and a vignette to the corners, a bloom radius that is zero on reflective screens because a halo round a dark LCD character is the giveaway of a fake one, ghosts derived from the ink so a colour override drags the unlit elements with it, and a spill shadow that washes the panel around the window in proportion to how much of the display is lit.
Reusable graphite artwork with controlled state and keyboard interaction.
The character screen bolted into the front of a rack unit — five columns by seven or eight rows per cell, several lines, and the unlit dots present the whole time. Square dark ink on a yellow-green backlit pane is the module every reverb and sampler shipped; round lit dots on black glass is the LED marquee, optionally scrolling on a clock that cannot drift. A bitmap prop drives the dots directly for meters, waveforms and logos, and a blinking block cursor marks the field being edited. The unlit grid is one tiled pattern and each line of ink is one path, so a 20x2 screen is a handful of nodes rather than 1,600.
Text into a field of lit dots, the way the hardware has it: the classic 5x8 character-cell bitmap font as column masks, a flat run of columns per line, a window onto that run so scrolling is an offset rather than a transform, and every lit dot of a line as one SVG path (square or round). Plus the duty cycle a display's glow rides on and a marquee clock derived from elapsed time, so a dropped frame cannot make the scroll drift.
A tonewheel organ's registration control: N sliding bars with nine detents each, coloured in the classic brown/white/black families, and the registration printed underneath as the digit string players actually speak ("888000000"). The throw is inverted — out is loud, so the head travels down as the value rises — and the travel is detented rather than continuous, so a drag and a keypress cannot disagree about what "6" is. Press anywhere to jump a bar to that detent and keep dragging, wheel a notch at a time, or drive each bar from the keyboard. Layout, quantisation and key handling sit in a pure core beside it.
Portable shadcn/Base UI dropdown menu primitives and a standard EllipsisMenu trigger. Shares selector popup styling, keyboard navigation, focus return, collision bounds and document/fullscreen-aware portals. Compose radio, checkbox, action and submenu items; use ActionMenu for data-driven action lists.
The rhythm sibling of the piano roll: named lanes (Kick, Snare, Hat…) down the left, a beat grid across, and every hit drawn at its exact onset so timing and swing are legible — a round marker that visibly sits off the gridline when a hit is pushed or swung, over a sixteenth grid that stays countable while it plays. Velocity is the marker's size and opacity, accents wear a ring, and sustained hits grow a tail. It shares the piano roll's whole beat axis, host-driven playhead, active-hit highlight and --uikit-* theming through the same geometry core (createLaneLayout), changing only what a drum view needs: taller rows, text labels instead of a keyboard, and hits placed by lane instead of pitch. The playhead is a prop the host drives; null draws no cursor and no readout, so a stopped transport shows nothing pinned at zero.
The Logic-style "Low Cut … High Cut" band bar: two caps on one log or linear frequency track with the band between them lit. Press the band to move both caps at their current width, press the open track to jump the nearer one, Shift for a fine pass, wheel and arrows on the focused cap. The caps stop against each other at a minimum ratio (log) or difference (linear) instead of crossing, and the taper, the gap and the band drag are a pure core with its own tests.
A compressor or gate's transfer curve — computed, so it is true before a single sample plays — with the knee shaded, the threshold marked, a gate's hysteresis band drawn as a band, and a live gain-reduction meter beside it. The curve says what the processor would do at any level; the meter says what it is doing to this one.
The compressor/gate transfer function as pure maths: the standard soft-knee formulation the Web Audio DynamicsCompressorNode is specified against, a gate variant with an attenuation floor and a hysteresis band, a static gain-reduction-at-level solver, and a dB-in/dB-out axis with both forward and inverse mappings. No React, no DOM — testable in Node and safe to draw with on the server.
Where a delay's repeats land and how loud they are, as pure maths: tap times and levels from time/feedback/mix, the L-R alternation of a cross-coupled ping-pong pair, an audibility floor and a tap cap, a 60 dB decay time, beat-grid ticks for a tempo, and a time/level axis with forward and inverse mappings. Derived from the shipped delay graphs and pinned against sample-accurate simulations of them. No React, no DOM — testable in Node and safe to draw with on the server.
A silent early wavetable interface study with a coral waveform, modulation source rail, dual oscillator controls and functional section views.
An ADSR envelope you can draw on: filled shape, draggable handles at the peak, knee and tail, and a square-root time axis that keeps millisecond attacks legible next to multi-second releases.
The envelope display and four knobs, bidirectionally synced — drag a handle and the knobs follow, turn a knob and the shape follows. A worked example of composing the kit rather than a new control. An optional frame wraps it into a compact, self-contained panel — the little-black-box module look.
An editable AHDSR amplitude envelope on the SampleView's seconds axis (or any positioned box). Attack, hold, decay-and-sustain and release nodes drag and step as sliders; the sustain plateau drags vertically. Every value goes through the stage descriptor's taper, range and step exactly like the knob path (knob-core curves, pinned equal to audio-contracts normalize/denormalize), and arrow keys are the knob's keys. Segments past the take end are drawn dimmed; note-off is drawn at a host gate. Pure geometry exported and tested.
The magnitude response of a stack of filter bands, computed from RBJ biquad coefficients rather than measured — so the curve matches what the audio graph will actually do, with no analyser needed.
Hands on the EQ curve: N draggable band handles over the eq-display response, wheel for Q, full keyboard access per band, and two readings of the same band model — parametric (curve plus handles) or bars (columns standing at their own frequencies with the curve behind them). Controlled, with the band model, hit testing and step maths in a pure core beside it.
Physical rack panels, round metal jacks and Mutable-style hardware knobs. MutableKnobDesign composes KnobHeadlessReadout: one printed caption swaps from label to formatted value on hover or edit, with shared typography and no tooltip. Hosts own actual patching and audio.
A channel-strip slider in both orientations: recessed groove, lit fill, and a grippy cap that jumps to wherever you press and keeps dragging from there. Wheel support, Shift for a fine pass, optional dB-style tick marks.
The unstyled track primitive a fader is built on: absolute pointer positioning, the Shift fine pass anchored where Shift went down, wheel and keyboard stepping, and the full role="slider" contract. Renders no appearance — a render prop hands your face the drag state.
Filter Menu shared by module faces and application hosts.
A compact fixed-velocity override for playable instrument surfaces: switch between touch dynamics and a repeatable normalised strike value.
Cobalt or graphite ribbed rim, silver inset and stationary lighting on the shared Knob.
A themed, selectable operator-routing diagram for FM synthesis. It draws carriers, modulators, fan-out, the audio bus and self-feedback from the shared pure geometry core while keeping the host in control of selection, colours and descriptive copy.
An FM synthesiser's operator routing diagram, as pure maths: which row each operator sits in (its distance from the audio bus, which is the patch's real modulation depth), which column (packed from a spanning forest so the picture is stable as you step through algorithms), the elbow path of every modulation edge, the lead from every carrier down to the bus, the self-feedback loop, a validator that catches cycles and inaudible operators, and a square-root-scaled ADSR thumbnail sized to fit inside an operator box. No React, no DOM — testable in Node and safe to draw with on the server.
A controlled, keyboard-accessible editor for directed operator modulation, self-feedback and independent audio outputs. Stable operator IDs and configurable ranges let instruments persist their own routing state.
Portable controlled disc console artwork.
A compressor's metering surface: input and output level bars flanking a gain-reduction bar that fills from the top downward — the hardware convention, because it shows what is being taken away rather than what is there — with a peak-hold tick for the deepest recent bite. Wire it with dB values you already have, a per-frame callback (DynamicsCompressorNode.reduction slots straight in), or a pair of analysers.
Lit momentary or latching buttons in four styles: large round and pill performance controls with an LED halo, plus compact console-round and console-square controls with a machined bezel and recessed face. The glow can idle, hit on the beat, or follow a host-provided audio level.
The signal-side SHAPE of a stereo image: a phosphor trace of the channel pair rotated 45 degrees so mono runs straight up the middle, pure side lies flat across the horizontal, and a hard-left source draws on the left. Diamond graticule, an L-R baseline carrying the measured energy balance, a correlation meter whose lower half is tinted, and a CORR/WIDTH readout. Switchable between the mid/side diamond and a raw left/right split, which answers the per-channel question the diamond hides. Display auto-gain measured on the mono sum, so the scale never depends on which way the image leans, and the printed readings are always taken from the raw pair. Takes a live analyser pair or a getStereoData callback; with neither it draws its graticule and says it has no source rather than animating invented samples.
A silent brushed charcoal granular interface with editable sample scan, spectrum, ADSR and modulation banks.
Scoped brushed charcoal ring dials and scan/bar rails.
Controlled compact grain artwork with shared gestures.
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 vector knob designs with distinct marker, scale and body 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.
A directly importable custom knob design using shared headless interaction and its authored artwork.
A silent brushed graphite compressor face with ridged drive fader, domed gain dial, pixel LCD, raised character keys and machined switches.
Scoped brushed graphite and machined aluminum artwork.
Reusable graphite artwork with controlled state and keyboard interaction.
A directly importable custom knob design using shared headless interaction and its authored artwork.