Moth-8

The brief

Create an interactive product experience that shows rather than tells.

The idea

Most product pages describe a thing you cannot touch. This one puts the instrument on screen and lets the page explain it while you play. The sticky device stays in view, and each section points at a control you can already reach.

Decisions

• The keyboard, knobs and scope are built from HTML and CSS, so they stay crisp at any size.
• Every voice drifts out of tune on its own schedule, which is what stops digital oscillators sounding digital.
• Velocity is set by a fixed default, and Tone is the one control that matters most, so it sits first.
• All four knobs work by drag, wheel and arrow keys, so the instrument is keyboard accessible.

How it came together

1. Designed the device as a single object first, then wrote the page around it.
2. Built an eight-voice engine with two oscillators, a filter and a shared echo and reverb.
3. Added computer-keyboard play, drag knobs, four sounds and an arpeggiator called Wing Beat.
4. Verified the audio path by rendering the page's own voice code through an offline context.

How it works

A single HTML file using the Web Audio API. Voices steal oldest-first above eight. The reverb impulse is generated at start-up from shaped noise, so the page ships no audio files at all.