TITLE: Soft Synth — a neumorphic instrument you can actually play
PROMPT: Build a single self-contained HTML page (no external assets, no libraries, all CSS in one inline <style>, all JS in one inline <script> at the end of body) called "Soft Synth". Concept: a neumorphic synthesiser — a soft extruded hardware panel with two octaves of playable keys, four draggable knobs, a waveform selector and a live oscilloscope, making real sound with the Web Audio API. Palette: #e0e5ec surface, #ffffff highlight, #a3b1c6 shadow, #2e3a4d ink text, #6d5dfc accent. Typography: labels in system-ui 600, 9px, uppercase, 0.18em tracking; scope and value readouts in ui-monospace; the h1 in system-ui 300 with a 600 accent word. Layout: page background is a soft radial vignette from #f1f4f9 to #c8cfdb; one centred device panel, max-width 900px, border-radius 34px, with a dual neumorphic shadow (18px 18px 40px rgba(163,177,198,.72), -18px -18px 40px rgba(255,255,255,.95)). Header row: mono eyebrow, "Soft Synth" title, and a status LED with a mono state label. The upper deck is an inset neumorphic well (inset 7px 7px 16px shadow plus inset -7px -7px 16px highlight) containing four knobs on the left and a scope column on the right; the keyboard sits below in its own inset well. Each knob is a circular body with a dual-shadow relief and a 2.5px accent indicator, surrounded by an inline SVG arc: a 270-degree track circle (r=42, stroke-dasharray 197.9 263.9) rotated 135 degrees so the gap sits at the bottom, and a fill circle whose stroke-dashoffset is driven from the normalised value; the body rotates -135deg to +135deg. Knob labels are uppercase system-ui, values are mono. Audio: one AudioContext created and resumed only inside the first user gesture, wrapped in try/catch, with a shared lowpass BiquadFilter (120 Hz to 9 kHz mapped exponentially, Q 0.4-18) feeding a master gain (0-0.35) feeding an AnalyserNode (fftSize 1024, smoothing 0.72) which connects to the destination. Each note is its own oscillator (sine/triangle/square/sawtooth) plus a gain envelope (0.0001 -> 0.85 in 12ms -> 0.42 at 220ms, exponential release to 0.0001 over 300ms and osc.stop at 340ms); detune in cents is applied to all live voices. The scope is a DPR-scaled canvas with setTransform, drawing a faint vertical grid, a centre line, and the analyser's time-domain data as a 2px accent polyline with a small shadow; when no context exists it draws a flat accent line, and the rAF loop only runs while voices are active or for 420ms after the last release, so idle costs nothing. Keys: fourteen white keys (C4-B5) as a flex row with 3px gaps and ten black keys absolutely positioned at hand-computed percentages (5.0, 12.14, 26.43, 33.57, 40.71, 55.0, 62.14, 76.43, 83.57, 90.71) over them; pressing a key translates it down 2-3px and flips its shadow to inset, and the LED pulses with a class toggle. Interaction: pointerdown/up on keys plays notes; A W S E D F T G Y H U J K map to one chromatic octave; octave buttons shift the whole keyboard between C1 and C6 and relabel every key; four waveform buttons retype all live oscillators; the sustain button (or the Z key) holds released notes until it is switched off; knobs drag vertically with pointer capture, respond to arrow keys when focused and reset on double-click. Every shared value is declared above boot, all node access is guarded, entrance uses a transform-only animation, prefers-reduced-motion removes the entrance and the LED transition, and the whole page is one IIFE with zero console errors.
DESCRIPTION: A soft, light-grey synthesiser that looks like a piece of beautifully machined hardware. Everything is extruded out of the same surface colour — knobs, wells, keys, buttons — using paired light and shadow rather than borders, with a single violet accent for values, the arc fills and the live waveform. Two octaves of keys sit in an inset tray under four knobs and a glowing oscilloscope that traces whatever you play. Pressing a key pushes it into the panel and the status LED pulses; turning a knob rotates its indicator and fills its violet arc in real time. The whole device reads as one calm, tactile object on a softly lit page.
TECHNIQUES: Neumorphic dual box-shadows for raised and inset states (no borders); inline SVG stroke-dasharray/dashoffset arc gauges rotated 135 degrees for a bottom-gap 270-degree sweep; vertical-drag knob math with pointer capture and keyboard/aria support; Web Audio graph of per-note oscillator -> gain envelope -> shared BiquadFilter -> master gain -> AnalyserNode -> destination; exponential gain ramps and scheduled osc.stop for click-free release; detune applied to all live voices; analyser.getByteTimeDomainData rendered to a DPR-scaled canvas via setTransform with a dirty-gated rAF loop that stops when idle; hand-positioned black keys over a flex white-key row; octave relabelling driven from a note-name table; class-toggled LED and key-press states.
INTERACTION: Click or tap any key (or hold a pointer and slide across the keyboard) to play; the key presses in, the LED pulses and the oscilloscope traces the live waveform. Play the computer keyboard with A W S E D F T G Y H U J K (one chromatic octave). Drag any of the four knobs vertically — cutoff (120 Hz - 9 kHz), resonance (Q 0.4-18), detune (-50 to +50 cents) and level (0-100) — or focus a knob and use the arrow keys; double-click a knob to reset it. Pick the oscillator with the sine / tri / sqr / saw buttons. Move the keyboard up or down an octave with OCT - and OCT + (the key labels and the scope readout update). Toggle SUSTAIN (or press Z) to hold released notes until it is switched off. Resizing re-measures and redraws the oscilloscope.