Synth Panel
A synthesiser’s live front panel. Turn any of seven machined dials and the scope redraws the filtered, driven waveform before a note is heard.
Built with Detent Dial
What it is for
A product hero for hands-on hardware (a synth, a pedal, a mixer) that shows the product working instead of photographing it.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Computed oscilloscope, Ladder filter response, Detent dials, One shot envelope, Container queries
- Stack
- Vanilla ES modules, CSS, Canvas 2D, Web Audio
- Needs
- Detent Dial
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe scope shows the patch's steady waveform, the meter its level; no loop runs.
- 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.
- 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.
- Speaker onOff by default. When on, notes sound through WebAudio (created inside the click) and the dials click on their detents.
- Patch changeA new patch settles every dial on its spring and redraws once.
- Panel colourwaysBlack, silver or olive anodised plate; amber or green phosphor; any dial finish; one lamp angle for every knob.
- Off-screen or hiddenA note in progress stops and the steady reading returns; nothing runs.
- Reduced motionNo playhead flight and no knob settle: the envelope is drawn still, every value and the scope stay.
- TabletThe head stacks and the filter takes its own row above envelope and output.
- PhoneScope first across the panel, oscillator beside the meter and gate, full-width buttons, two-column specification; no sideways scroll at 390 px.
Notes
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.
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.
Anatomy
Computed oscilloscope, Ladder filter response, Detent dials, One shot envelope, Container queries
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| headline | text | Headline |
| kicker | text | Kicker |
| lede | text | Lede |
| cta | text | Button |
| price | text | Price |
| patch | enum | Where the seven knobs start. Each is a real sound and draws its own waveform. |
| panel | enum | The anodised plate. Legends and section rules follow it. |
| trace | enum | Scope phosphor |
| finish | enum | Knob finish |
| light | number | The one lamp every knob is lit by. |
| sound | boolean | Off by default. Play a note, and detent clicks, through WebAudio (only after a click). |
Methods
- state
- update
- destroy
How it works
Original. The scope is computed from the waveform's harmonic series through a 4-pole ladder response, not drawn by hand.