Each strip below is one component with one shared value — drag any skin and they all move. Instrument, stealth, steel, standard, ether, ember, neon, blueprint: same API, different props and theme tokens. In your DAW, juce::Graphics paints the same geometry natively.
Eight machines for the same two values: breathing rings, a radar sweep, a turntable platter, a clean dial, a particle void, a contour field, a starfield, a survey plot — one drag drives them all.
<ParamMacroPad paramX="granulation" paramY="deepFx" />DOCS →Two values from one drag — cutoff/resonance, pan/depth. Double-click recenters.
<ParamXYPad paramX="cutoff" paramY="res" />DOCS →Eight shapes of the same control: arc dial, matte gear cap, spun stainless, flat gauge, hairline gradient ring, tick-scale ember, LED segment ring, drafted dial — one shared value.
<ParamKnob paramId="gain" trackColor valueColor />DOCS →The skeuomorphic cap with a pointer riding the rim over a faint tick track.
<ParamHardwareKnob paramId="drive" />DOCS →The vertical variant — drag up for more, fill rises from the bottom; barThumb for the flat hardware thumb.
<ParamSlider paramId="level" vertical barThumb />DOCS →The DRY/WET strip with a grippy rectangular handle.
<ParamCrossfader paramId="mix" />DOCS →Spring-loaded thumb with hardware OFF/ON side captions.
<ParamToggle paramId="bypass" offLabel="OFF" onLabel="ON" />DOCS →Settings-panel rows; ParamCheckbox binds bool parameters.
<ParamCheckbox paramId="oversample" />DOCS →Vertical exclusive options with dots — the settings-panel sibling of Segmented.
<ParamRadioGroup paramId="os" options={…} />DOCS →Exclusive options in a row — oscillator shapes, filter modes.
<ParamSegmented paramId="shape" options={…} />DOCS →The dropdown — menu in the overlay layer, positioned via onLayout, click-away closes.
<ParamSelect paramId="mode" options={…} />DOCS →The draggable number — BPM, ms, semitones. Drag, wheel-step, double-click reset.
<NumberBox value={bpm} min={40} max={240} />DOCS →A real chrome-stripped juce::TextEditor — caret, selection, IME — with painted chrome.
<TextInput placeholder="Preset name…" />DOCS →Hot zone above the threshold, peak-hold line that holds then falls.
<Meter value={level} label="OUT" />DOCS →Bottom-anchored bars with a hot zone — spectrum analyzers, band meters.
<Bars values={spectrum} />DOCS →Centre-mirrored bars — pair with useRollingBuffer for scrolling history.
<Waveform values={useRollingBuffer(level)} />DOCS →The real summed biquad response — drag a band node for freq/gain, wheel for Q.
<EQCurve bands={bands} onChange={setBand} />DOCS →A circular level meter on the native arc keys — hot zone, optional center readout.
<RingMeter value={level} format={formatPercent} />DOCS →A value-reactive orb — echo rings emit faster and brighter as the level rises.
<PulseOrb value={level} />DOCS →Determinate progress with optional percent — downloads, renders, analysis.
<ProgressBar value={ratio} showPercent />DOCS →Indeterminate loading — an arc chasing its own tail on the native arc keys.
<Spinner size={28} />DOCS →The playable keyboard — press for note-on, drag across keys for glissando, heldNotes paints host MIDI in.
<PianoKeyboard octaves={2} onNoteOn={play} onNoteOff={stop} />DOCS →The pattern grid — click cells on and off, downbeat tinting, a playhead column the host drives.
<StepSequencer pattern={pattern} playhead={step} onToggle={flip} />DOCS →The four-corner envelope editor — drag the attack peak, the decay/sustain corner, and the release corner.
<ParamADSREnvelope attackId="a" decayId="d" sustainId="s" releaseId="r" />DOCS →The performance wheels — pitch springs back to center on release, mod stays where you leave it.
<PitchBend onChange={bend} /> <ParamModWheel paramId="mod" />DOCS →The page switcher — a themed tab bar with an underline indicator that renders the active panel.
<Tabs labels={['MAIN', 'FX', 'MOD']}>{panels}</Tabs>DOCS →CUTOFF · RES · DRIVE
CUTOFF · RES · DRIVE
CUTOFF · RES · DRIVE
CUTOFF · RES · DRIVE
CUTOFF · RES · DRIVE
CUTOFF · RES · DRIVE
CUTOFF · RES · DRIVE
The collapsible settings row — click the header to fold content in and out.
<Disclosure title="ADVANCED">{rows}</Disclosure>DOCS →OVERSAMPLE · DITHER · PHASE
OVERSAMPLE · DITHER · PHASE
OVERSAMPLE · DITHER · PHASE
OVERSAMPLE · DITHER · PHASE
OVERSAMPLE · DITHER · PHASE
OVERSAMPLE · DITHER · PHASE
OVERSAMPLE · DITHER · PHASE
Eight voices for the same hint: ink chip, engraved plate, stamped steel tag, arrow bubble, black-glass card, ember chip, terminal readout, leader-line callout.
<Tooltip label="Resets to 0 dB">…</Tooltip>DOCS →Open each world's dialog: red-bar panel, machine plate, clean card with footer actions, a black-glass sheet, an ember telemetry panel, a scanlined terminal.
<Modal open onClose={…} title="ABOUT">…</Modal>DOCS →The one-line editor in eight layouts: value-labelled knobs, a screwed rack strip, a 500-series module, a settings form, an ether deck, an ember rack, a glowing console, a title block.
render(<GenericEditor />) // that's the whole editorDOCS →