Make the bass darker and evolve every four beats
Close the bass filter so the growl loses some top end. Cycle the movement every 4 beats.
Approved settings are protected. Unlock that module or section to include those changes.
Reusable interface components
Component library
The controls the workspaces are built from. Every example below is live and keyboard accessible. Changes here do not touch your project.
Design tokens
Space Grotesk for headings, Manrope for interface text, JetBrains Mono for readouts. Colours are CSS variables mapped into Tailwind as ew-* utilities.
- Void#04060b
- Panel#0c111b
- Rack#080c15
- Cyan#22d3ee
- Blue#4c7dff
- Violet#8b5cf6
- Magenta#d946ef
- Amber#fbbf24
RackModule
components/rig/rack-module.tsx
The frame for every Music module: number, title, status badges, Advanced toggle, Approve lock and collapse.
- id, index, title, subtitle
- Identity and anchor
- icon, tone
- Header icon and accent
- status
- Relocation map ids shown as badges
- lockId
- Module that the Approve lock protects
- advanced
- Content folded under Advanced
00
Demo module
Collapse it, or open Advanced
Basic controls first.
Knob
components/rig/knob.tsx
Continuous parameters such as cutoff, depth and intensity. Drag up or down, Shift for fine control, double-click to reset, arrow keys when focused.
- label, value, onChange
- Required
- min, max, step
- Range, default 0 to 100
- format
- Readout text
- size
- sm, md or lg
- defaultValue
- Double-click reset value
Cutoff58
Fader and ChannelFader
components/rig/fader.tsx
Fader is a horizontal slider built on the native range input. ChannelFader is a vertical strip with on and off, used for bass layers.
- label, value, onChange
- Required
- format, tone
- Readout and accent
- on, onToggle
- ChannelFader layer switch
40%
Mid80-800 Hz72
Segmented
components/rig/segmented.tsx
Single choice from a short list, as a radio group with arrow key navigation.
- options, value, onChange, label
- Required
- wrap, fill, size
- Layout
- tone
- Accent colour
ToggleChip and ChipGroup
components/rig/chips.tsx
Multi-select options with an LED. Used for percussion, modulators, layers, tones and transitions.
- active, onToggle
- ToggleChip
- options, values, onToggle, label
- ChipGroup
- tone, size
- Appearance
ToggleSwitch
components/rig/toggle-switch.tsx
On and off settings with an optional description, as a switch role.
- checked, onChange, label
- Required
- description, tone, hideLabel
- Optional
NumberStepper
components/rig/number-stepper.tsx
Exact numeric entry on an LCD readout: press and hold to repeat, Shift for big steps, select the value to type.
- label, value, onChange, min, max
- Required
- step, bigStep
- Increments
- unit, format, parse
- Display
DurationControl
components/music/duration-control.tsx
Replaces the old duration slider: typed minutes and seconds, steppers, keypad and presets.
- value, onChange
- Seconds
Type minutes and seconds, use the steppers, or open the keypad. Your service may cap lengths lower.
SegmentMeter
components/rig/segment-meter.tsx
Ten-step energy or tension. Interactive when onChange is given, otherwise a read-only meter.
- label, value
- Required
- onChange
- Makes it a slider
- variant
- energy or tension
- size, hideLabel
- Layout
Energy7/10
Readout
components/rig/readout.tsx
LCD-style value display for key, tempo and other headline values.
- label, value
- Required
- sub, size, active, onClick
- Optional
KeyF minor
Tempo150BPM
Energy7/10
LedList and RackSlot
components/rig/led-list.tsx, rack-slot.tsx
Vertical single choice with LEDs inside a rack slot, as in Structure & Motif.
- options, value, onChange, label
- LedList
- label, hint
- RackSlot
BehaviourHow the motif acts
StatusPill
components/rig/status-badges.tsx
Handover status labels. StatusBadges shows them on modules with old and new locations in a tooltip, and can be switched off in Settings.
- status
- preserved, relocated, redesigned, proposed or prototype
- verify
- Adds the needs-checking mark
PreservedRelocatedRedesignedProposedPrototype onlyRelocated
SuggestionCard
components/studio/suggestion-card.tsx
Every Producer, check-in, coach and fit suggestion. Changes are ticked individually; approved targets are shown but blocked.
- suggestion
- Suggestion object
- compact
- Hide the detail text
- handlers
- Optional local handlers, as in this demo
Waveform
components/refine/waveform.tsx
Take display with approximate section markers, progress and seeking.
- peaks, duration, label
- Required
- progress, onSeek
- Playback
- sections
- Section markers
- height, compact
- Layout
