Operator Notes · Section 12
GUIDE
RESONANCE is built as a fictional Bergen synth workshop whose flagship is not shown in product photography; the Ember‑8 is embedded in the page as a playable instrument. The design language comes from rack hardware: charcoal panels, aluminium rails, cream silkscreen type, amber lamps and a little shop-floor asymmetry. The serials, bench notes and batch numbers are invented to make the interface feel handled, tested and shipped.
Batch 07 verifiedPlayable Core
main.js creates the audio graph in initAudio() only after the POWER switch is clicked, preserving autoplay rules. noteOn(i) starts two detuned oscillators per voice, routes them through a low-pass BiquadFilterNode, then splits dry signal and delay return before a compressor-limited master.
Power Ritual
runBootSequence() and clearBootSequence() apply .is-booting to the panel when the real switch wakes the synth. .boot-sequence floats above the scopes, lights each data-boot-step, and sends a CSS boot-scan beam through a smoked service window. In reduced motion the sequence resolves quickly without sweep animation.
Scopes & Lamps
drawFrame() reads one AnalyserNode twice: getByteTimeDomainData draws the oscilloscope trace, while getByteFrequencyData becomes 48 log-sampled spectrum bars with peak caps. The same frame measures amplitude, writes --amp, and lets LEDs breathe with the sound. The loop cancels when document.hidden.
Hardware Surface
styles.css draws every object. Screws are radial gradients with rotated slots; brushed metal is repeating linear gradients; panel grain is layered over charcoal with pseudo-elements; .knob-cap rotates through a custom --rot property; .hero-console gives the first viewport a control-bay silhouette before the real rack appears.
Motion & Access
The load moment is intentionally narrow: .reveal raises the hero parts once, while .scroll-reveal stages modules as they enter view. Heavy loops stay in drawFrame(), stop when the tab hides, and simplify under prefers-reduced-motion. The page keeps semantic header, main and footer landmarks, a skip link to the playable synth, focus-visible rings, labelled sliders and explicit button controls.
Palette & Type
Tokens stay severe: #16171b charcoal, #ffb454 amber, #ece5d3 cream and aluminium gradients. Dela Gothic One handles logo and section display; IBM Plex Mono handles panel labels, code, values and table data.
Reproduce This
Prompt an AI agent to build a static boutique synth site with a Web Audio centerpiece: explicit power switch, 8 keys mapped to A–K, dual oscillators per note, cutoff/resonance/delay knobs, one analyser driving oscilloscope and spectrum canvases, a power-on calibration overlay, and CSS-only hardware panels. Ask for a charcoal rack, brushed aluminium gradients, cream mono silkscreen, amplitude-driven amber LEDs, reduced-motion handling, hidden-tab rAF pause and a matching guide page that names the actual functions and files.