SIGNALFORM is a fictional Eurorack maker from Rotterdam. Synth companies always show photos of panels; this page ships the panel itself — a complete subtractive voice built on the Web Audio API, playable before you've scrolled an inch.
The design borrows its whole system from hardware: an aluminium faceplate (CSS gradients and four radial-gradient screws), silkscreen labels in a mono face, knobs with 270° throws, and an oscilloscope that renders the actual output buffer. Nothing on the panel is decorative — every control changes the sound.
The three accents are patch-cable color code: yellow carries audio, blue carries control voltage, red carries gates. The signal-path diagram obeys the code exactly.
Familjen Grotesk Bold — display. A Swedish grotesk with just enough quirk in the g and y; friendly industrial, like good panel design.
IBM Plex Mono — silkscreen voice: knob labels, HP counts, serials, prices.
| Element | How it works |
|---|---|
| Live synth voice | A real signal chain: OscillatorNode → BiquadFilter → GainNode (VCA) → master → AnalyserNode, plus an LFO oscillator patched into the filter's frequency AudioParam through a depth gain. Audio boots only on the POWER click, honoring autoplay policy; the VCA fades with setTargetAtTime so there are no clicks. |
| Knobs | Pointer-captured vertical drag over a 270° sweep; the indicator is a CSS custom-property rotation. Each knob is a keyboard-operable role="slider" with musical tapers — frequency and cutoff move in octaves per step, not hertz. |
| Oscilloscope | Canvas trace of getByteTimeDomainData with a software rising-edge trigger, so the waveform holds still like a real scope. Idle state draws a slow flatline sweep. |
| Signal diagram | GSAP MotionPath pulses travel the patch wires in color code — audio pulse through VCO→VCF→VCA→OUT, a dashed blue LFO ghost climbing into the filter. |
| Accessibility | All controls reachable and operable by keyboard; waveform buttons expose aria-pressed; reduced-motion drops entrances and pulses but the instrument itself keeps working. |
| You do | The page does |
|---|---|
| Press POWER | The LED goes red and the VOICE-1 hums for real |
| Drag a knob | Pitch, cutoff, resonance, LFO, or level change live; the scope follows |
| Switch SAW/SQR/TRI/SIN | The oscillator core swaps waveform mid-note |
| Scroll the signal path | Colored pulses walk the 1V/oct chain |