Synth Panel

A product hero for hands-on hardware (a synth, a pedal, a mixer) that shows the product working instead of photographing it. The panel is the pitch: six knobs in two sizes and a snapping selector drive a computed oscilloscope, an envelope strip and an LED meter, beside a headline, a price and a specification strip.

Copy the synth-panel folder and the detent-dial folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="detent-dial/detent-dial.css">
<link rel="stylesheet" href="synth-panel/synth-panel.css">
<div id="synth-panel"></div>

<script type="module">
  import DetentDial from './detent-dial/detent-dial.mjs';
  import { mount } from './synth-panel/synth-panel.mjs';

  const synthPanel = mount(document.getElementById('synth-panel'), {
    kicker: 'New · Type 12 monophonic voice',
    headline: 'No menus. Six knobs. One honest voice.',
    lede: 'Type 12 is a monophonic analogue synthesiser built round a 24 dB ladder filter and a diode drive. Everything it can do is on its face: turn a knob and the scope draws the sound before you hear it.',
  }, { DetentDial });

  // synthPanel.update({ … });   change any option in place
  // synthPanel.destroy();        and take it away again
</script>

mount(element, options, { DetentDial })

Builds the block inside the element and returns its handle. Hand it the Detent Dial it is built with.

handle.state

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restThe scope shows the patch's steady waveform, the meter its level; no loop runs.
2. TurningEach dial's onInput recomputes the voice (harmonics through a 24 dB ladder, tanh drive, dry/wet mix) and redraws the scope, the readout line and the meter on every value.
3. Note playingPlay a note or the panel's Gate runs one envelope: a playhead crosses the strip and the meter follows; capped at 2.5 s, then asleep.
4. Speaker onOff by default. When on, notes sound through WebAudio (created inside the click) and the dials click on their detents.
5. Patch changeA new patch settles every dial on its spring and redraws once.
6. Panel colourwaysBlack, silver or olive anodised plate; amber or green phosphor; any dial finish; one lamp angle for every knob.
7. Off-screen or hiddenA note in progress stops and the steady reading returns; nothing runs.
8. Reduced motionNo playhead flight and no knob settle: the envelope is drawn still, every value and the scope stay.
9. TabletThe head stacks and the filter takes its own row above envelope and output.
10. PhoneScope first across the panel, oscillator beside the meter and gate, full-width buttons, two-column specification; no sideways scroll at 390 px.

Made of: Computed oscilloscope, Ladder filter response, Detent dials, One shot envelope, Container queries.

Original. Hollis & Vane and the Type 12 are fictional. The scope is computed from the waveform's harmonic series through a 4-pole ladder response, not drawn by hand. Fonts: Big Shoulders and Geist Mono, both OFL 1.1, shipped as WOFF2 with their licences.

• 02Detent DialA rotary control you count by feel.

More blocks on the same object:

• 02.2ThermostatA home-climate section with a glazed ceramic dial.
• 02.3Hi-Fi VolumeAn amplifier hero in walnut and brushed brass.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.