Three changes following the reference more closely:
1. Knobs now have a metallic outer bezel (chrome ring): vertical
gradient running silver at the top → dark at the bottom, with a
thin highlight on the upper crescent. The dark dial sits inside
it with a slight inner shadow showing depth. Size bumped to 56px
so the bezel is visible.
2. Layout split into two stacks:
- left-stack: top-bar / screen / bottom-bar (vertical strip)
- right-stack: knobs / seq
3. Top bar: STOP+RUN as a tight pair (no gap), buttons stretch to
the bar's full height. Bottom bar matches the top bar visually
and shows a "● RUNNING_" label with the pulsing amber dot, no
longer inside the code area.
4. Code area is now *recessed* into the rack — no separate bordered
panel. Inset shadows + slightly darker background simulate a
cutout / screen window in the metal frame.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
