Aligning the mockup more closely with the reference image:
- Knob body is now a pure charcoal/black radial gradient (no warm
brown tint). Top-left specular dim, top crescent gloss, outer dark
ring. Drop shadow underneath so the knob "sits on" the panel.
- Value readouts ("120.0", "2.50", ...) in cream/white, no inset
amber LCD frame. Amber is reserved for arcs / LEDs / bullet labels
exclusively.
- Panel palette pulled toward neutral dark (less brown saturation).
- Sidebar with the description bullets removed; layout is just the
hardware unit at full width.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
A fourth aesthetic direction beyond the three knob variants — based
on the user's reference image (Moog/Roland/Korg vintage rack gear).
- Warm amber+charcoal palette (replaces the cyan phosphor accent).
- Beveled metal panels with corner screws (radial-gradient circles
with a slot mark).
- Knobs: brushed-metal radial gradient, knurled perimeter ridges,
specular highlight, white-warm engraved indicator, amber arc with
glow.
- LEDs for step cells: dim amber-off when inactive, full amber-on
with radial glow when active. Animated playhead outline at 8 Hz.
- Code "screen" with engraved-screen feel (inset shadow, faint amber
bloom). Status line "> RUNNING_" with blinking cursor.
- Engraved labels (small caps, double text-shadow for inset).
- Tabular numeric value displays in their own dark inset readouts
(LCD-style).
- Header buttons (STOP / RUN) with green run LED, pulsing red status.
Static mockup — no audio engine wired. Knobs are draggable to evaluate
the feel; step LEDs toggle on click. Decision pending: pick this or
one of A/B/C from knobs.html and align all surfaces to that language.
Standalone page at web/sandbox/knobs.html showing three aesthetic
directions side-by-side:
- A "hardware": radial gradient + perimeter ridges + specular highlight,
reads as a photographed knob.
- B "geometric": flat shapes, dot indicator at perimeter + short tick
from center; OP-1 / diagram register.
- C "phosphor": outline + heavy glow on accent arc and indicator;
synthwave / vacuum-tube feel.
Each variant shows 4 static knobs (0/33/66/100%) plus an interactive
draggable instance. DPR-aware canvas, vertical drag with shift-fine,
double-click to recenter. Pick one and the rest of the surfaces align.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds docs/roadmap.md outlining the 4-track plan (foundation, surface
aesthetics, organizable panel, theming) and ships the first track.
- Resizable splitter between editor and control surface (drag the seam,
double-click to reset). Width persists in localStorage.
- Custom scrollbars (WebKit pseudo-elements + Firefox scrollbar-color)
applied globally so CodeMirror's .cm-scroller, the right pane and the
piano roll all match the dark theme.
- Header separators between transport / gain / info groups.
- Smooth transitions on buttons, range thumbs and surface borders.
- :focus-visible rings using accent-glow color token.
- Pulse animation on the live status dot.
- New design-system tokens for layout (--right-w, --splitter-w),
timing (--t-fast/base/slow), and panel hierarchy (--panel-hi,
--gutter-hi, --divider, --fg-mute, --accent-glow).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Patch language with osc/noise/trig/seq/adsr/filter/delay/poly + voice templates
and inline live values. Two runtimes:
- code_sinth/ — Python engine (numpy + sounddevice). Hot-reload via mtime
watcher. Offline render to WAV. Static-HTTP+WS visualizer (viz/) that
injects waveforms next to each `node X = ...` line.
- web/ — port of the engine to JS running in AudioWorklet. Single static
page with CodeMirror 6 editor (line widgets for live waveforms) and a
control surface on the right with knobs/faders/step_seq/piano_roll
declared from the patch. State preserved across hot-reload.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
