Design modern interfaces for instruments and effects, on the web or in native DAWs. Customizable controls and themes powered by the Maru Audio platform.
Which harmonics a pluck point kills, as pure maths: the comb response of the delay-and-subtract a Karplus-Strong exciter runs, the harmonics it silences exactly, the ideal plucked string's triangle shape and the spectrum that shape has, the integer-delay rounding a short loop actually realises, and laid-out SVG geometry for a string view and a comb plot. Pinned against a DFT of the shipped filter rather than against a restatement of its algebra. No React, no DOM — testable in Node and safe to draw with on the server.
Portable Base UI popovers with overridable collision avoidance, available-space sizing and document/fullscreen-aware portals.
Portable controlled disc console artwork.
Reusable pale lavender material with controlled state.
Reusable pale lavender material with controlled state.
Canonical stylesheet for stylesheet-isolated module controls.
Prepared File Drag shared by module faces and application hosts.
Display-only time/frequency raster mapping for bounded host-prepared spectral frames, preserving explicit window-center timestamps and MIDI-aligned logarithmic frequency bounds.
The unified preset library views for a host-built AudioModuleFacePresetLibrary (factory, every sampler bank, user and community presets). usePresetLibrary is the one headless controller: search, a groups-column scope (All, Favorites, User, host groups), AND tag filters and favorites, with filtering, tag counts and previous/next over the CURRENT filtered list taken from the audio-contracts helpers; it persists nothing but an optional per-viewer scope. PresetLibrarySelector drives the compact PresetSelector from the library with a modified marker, Save and Browse (offered past 30 entries or when the host asks). PresetBrowser is an overlay sheet INSIDE the face (nearest [data-preset-overlay-container] or [data-module-face-surface]): groups column with counts, a windowed Name / group / secondary / tags list with favorite hearts, the reused TagBrowser as the tags column, and a Save / Delete / previous / next / close toolbar; arrows move, Enter selects and closes, Space selects, F favorites, / searches, Escape clears then closes; below 640 px the side columns become drawers with removable filter chips. PresetLibraryNavigator is the library as a sidebar beside the face that grows with its width: drilled down (a groups view as a list with thumbnails or picture cards from group.artwork, then the open group's presets) while narrow, groups beside presets once wide (half and half, with a draggable divider), and the tags as a third column when wider still and the face allows it; a whole-library search over names and tag labels (a magnifier button until opened, / to focus), a header slot for the face's own selector and an Expand/Collapse button; opening a group lands on its first preset (or keeps the active one). PresetSaveDialog names the sound, picks up to 8 vocabulary tags, offers Overwrite for the viewer's own preset, and shows the host's pending/error/success answer inline. Every action is a request the host fulfils.
A controlled preset dropdown with Quiet, Panel and Glass skins, previous/next stepping, favorites, search, and collision-aware menu placement. The shared headless hook supplies accessible prop getters for custom renderers. Options accept strings or common name/label/note shapes and normalize to stable ids. The popup portals into the fullscreen element while the face is in browser fullscreen, so it stays visible there.
Tailwind dynamics face with a linked transfer curve and output fader. Silent UI assembly.
Host-bound producer equalizer composite over EQEditor: numbered band overview, descriptor-bound precise editing, factory preset navigation, momentary audition and real pre/post scope analysis. Product adapters supply band contracts and recipes. Requires the SDK and UI-kit host-control package; ships its scoped layout stylesheet beside the component.
The polar layout of a hand-played disc as pure maths: a centre pad plus rings of wedge zones, with the same table driving the SVG paths, the hit test and the off-centre reading a press returns. No React, no DOM — so the ink and the touch targets cannot drift apart, and the whole thing is testable in Node.
A playable disc: a centre pad ringed by wedge-shaped zones, labelled and lit from the state you pass in. Presses report how far from the zone's centre they landed, so a tap has a velocity. Includes a first-class look for a pad that is deliberately silent.
A silent reverb template with two minimal dials and section-scoped colors following a slowly cycling master hue.
Two thumbs on one track for a span such as a note range, on Base UI's Slider. Controlled and told which thumb moved; labels point outward from their thumbs so they cannot collide, and the same formatter feeds aria-valuetext. Thumb hit areas are at least the sm control height (24px, 44 on touch). With keyboard the 24px piano strip is the track: one equal column per note, bar thumbs drawn on it, labels inline beside them, the range tinted with the value fill, pressing a key moves the nearer thumb, Shift+arrow jumps an octave.
A controlled plot for classic FM rate/level envelopes, where every stage has both a speed and a destination level. Supports any stage count, configurable ranges, a sustain-stage marker, stage labels and the shared UI-kit theme tokens.
The splitter between two stacked or side-by-side panes, controlling one pane's size in pixels as a focusable separator with aria-valuenow. Drag with pointer capture (live onValueChange, one onValueCommitted on release or a lost capture), step it with the arrow keys, Shift or Page Up/Down for a large step, Home and End for the bounds, and collapse or restore the pane with Enter or a double-click. The key and drag maths sit in a pure core beside it.
The log-frequency / dB plot as pure maths: an axis factory with both forward and inverse mappings, RBJ biquad magnitudes for all seven cookbook shapes, and cascaded curve/path builders. No React, no DOM — so a display and a drag overlay can share one scale, and the geometry can be tested in Node.
Euclidean rhythms and the circle they are drawn on, as pure maths: Bjorklund's algorithm rotated onto its downbeat (E(3,8) is the tresillo, E(5,8) the cinquillo, E(7,12) the West African bell), the circular inter-onset intervals that name a pattern "3-3-2", rotation, a pulse record with velocity and accent that converts to and from a boolean mask, and the ring geometry — step angles, a fractional playhead's hand, and the vertices of the rhythm polygon. Maximal evenness is asserted exhaustively rather than assumed, and the ring convention is pinned bit-identical to pitch-class-clock's. No React, no DOM — testable in Node and safe to lay out on the server.
One cycle of a rhythm as a row of steps (a note's first step in the value fill, held steps tinted, rests with an edge at least 3:1 against the card), each note one bar, a stronger edge on every beat. Click a step to add or remove a note, drag a note to set its end (committed on release, a lost pointer capture or a release outside), or Shift+arrow on it; a roving Tab stop moves with the arrows, Home and End. One commit per edit; a refused edit is announced in a status line. The row maths sit in a pure core beside it.
A bar as a circle: N steps round a ring, the struck ones lit, joined into the polygon that IS the pattern — a lopsided triangle for the tresillo, a square for four on the floor, the same shape turned when you rotate it. Velocity is node size and brightness both, accent is its own outline ring, group ticks sit outside the ring and the downbeat carries a lit one. The playhead is a prop, fractional for a smooth sweep, because the host owns the clock. Read-only it draws a generated pattern; add onToggle and every node becomes a keyboard-reachable toggle that wraps round the ring the way the bar does.
Reusable graphite artwork with controlled state and keyboard interaction.
A chord as a thick band over a ring of notes (a key's seven in line-of-thirds order, so stacked thirds are neighbours), with the chord before it as a ghost band on an outer track and the next on an inner one. Notes read in one colour language: shared notes solid and tied radially to the ghost track, arriving notes in the accent, leaving notes dashed, and the shared count in the centre. Editable: drag the band to move the chord, drag an end knob to widen or narrow it (triad, seventh, ninth), tap a note to toggle it, with keyboard equivalents. An optional outer ring of real note names with semitone ticks turns to transpose.
A key's ring of chords as a circle of clickable nodes in line-of-thirds order, where neighbours share all but one note and a move of k nodes shares all but k. Edges carry the notes neighbours share, moves are drawn as arrows across the circle with the active one bold, and the hinge gets a heavier rim. Nodes arrive with their name, quality icon, ring label and pitch classes already chosen, so the same figure draws a traditional I to VII ring or any cycle of chords.
The pure core of the ring figures: circle points with any node at twelve o'clock, shared-note labels pushed off each edge, arrows trimmed to node rims, the line-of-thirds strip's extent, and the ring roll's column placement (by chord or by beats, with a label gutter at each re-cut phrase), lane positions and cell paint by mark. Also the structural view model a ring roll is drawn from, so a theory library's roll object can be passed as is.
A progression on the seven lanes of a ring, one per ring position from the cut: each chord a run of cells, filled for the ring's notes, ticked where a note is bent, dashed across a gap and hollow for a foreign chord. Common tones between neighbours are bridged into connected bands, the hinge lane is tinted, runs that straddle the cut are split with tie marks and a re-cut phrase gets its own lane labels. One column per chord or width by beats; columns are clickable.
The line of thirds laid flat: a key's roots in a row with the step between each pair (on Aura a major third is one pad right, a minor third one pad up) and every chord as a clickable bracket over the consecutive notes it stacks, one lap and a bit so each chord appears whole.
The piano keyboard painted with a sampler instrument's own facts: exact mapped-key coverage with every unmapped key muted per key, per-group coverage in distinct zone colours for a kit-style mapping, authored key colour ranges as instrument formats write them, and a playable range that mutes what the instrument cannot sound. Strike velocity, glissando, the held map and computer-keyboard input are the piano keyboard's. The sampler module's face and the Studio sampler editor draw this one control.
One take on a seconds axis from host-prepared data only: min/max peaks on a canvas, a PreparedSpectrogramData heatmap (magma, log frequency) or both, with a Wave / Spectrum / Both toggle. Draggable, keyboard-steppable start/end and loop handles report take-normalized positions; playheads; a dimmed extension past the take end; a seconds ruler; and an overlay slot whose children read the same geometry from context. The axis latches during an overlay drag. The canvas repaints only when its peaks, colour or size change.
The time-axis contract a SampleView hands its overlays (axis and take seconds, the surface, client-x conversion and a gesture latch), kept apart from the view so an overlay does not pull the spectrogram renderer into a face bundle.
The time axis behind SampleView as pure maths: a seconds domain with a capped, quantized extension past the take, take-normalized ↔ axis conversion, ordered start/end and loop handles with knob-style key steps, min/max peak reduction into the take's share of a canvas, and ruler ticks. No React, no DOM.
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 key as a tonic and a mode: twelve tonic buttons coloured like piano keys on a Base UI ToggleGroup (arrow keys, aria-pressed, never cleared by a second press, at least 24px square, the tonic filled with the value colour), and a Base UI Select of grouped modes named by its visible label and read with its value, portaled fullscreen-safe with the face's theme. Refused tonics are disabled with their reason; both values may be unset with a placeholder; renamable labels; one row of twelve or two of six.
A headless controlled Scale/12-TET note-remap switch with compact and circle-of-fifths root-note selectors.
The reusable part of an interactive three.js face scene: a WebGL renderer with an unavailable path, resize and on-screen tracking, a 30 fps draw loop that pauses when hidden, tap-to-pick versus drag over named objects, context-loss handling and full disposal, plus DOM label placement over world positions. The scene owns its content and parameters; sound stays with the host's Processor.
A silent five-column sculpted console with porcelain knobs, raised faders, luminous character selectors and an illustrative response plot.
Scoped porcelain surfaces, opaque raised caps, inset rails and directional light shared by the Sculpted controls.
An opaque raised capsule cap over inset rails, with vertical and horizontal layouts and optional meter decoration.
A porcelain dial with stationary directional shadows, inset rotating marker, dot scale and optional raised pedestal.
A dark luminous character display with custom icon slots, paging buttons and direct choice dots.
A tiny raised white switch cap with a recessed track and shared keyboard behavior.
A list of random seeds as content-sized chips: a number field, a die and a remove button that show on hover or focus (always on touch). Stable keys across removes and adds (or the consumer's keys), focus to the previous slot after a remove, renamable labels (slot, die, remove, randomize all), refusals that disable with a reason, and the add and Randomize all actions either inline or as a SeedSlotsActions part of 24px icon buttons for a row header. The consumer owns the randomness.