# 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.

Block · With a Pass · https://tactileui.dev/blocks/synth-panel

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **At rest**: The scope shows the patch's steady waveform, the meter its level; no loop runs.
2. **Turning**: 
3. **Note playing**: Play a note or the panel's Gate runs one envelope.
4. **Speaker on**: Off by default. When on, notes sound through WebAudio (created inside the click) and the dials click on their detents.
5. **Patch change**: A new patch settles every dial on its spring and redraws once.
6. **Panel colourways**: Black, silver or olive anodised plate; amber or green phosphor; any dial finish; one lamp angle for every knob.
7. **Off-screen or hidden**: A note in progress stops and the steady reading returns; nothing runs.
8. **Reduced motion**: No playhead flight and no knob settle: the envelope is drawn still, every value and the scope stay.
9. **Tablet**: The head stacks and the filter takes its own row above envelope and output.
10. **Phone**: Scope first across the panel, oscillator beside the meter and gate, full-width buttons, two-column specification.

## How it works

Original. The scope is computed from the waveform's harmonic series through a 4-pole ladder response, not drawn by hand.