M_005 — CASE STUDY
NOCTURNE LAB
Brand world for an independent synth maker
OVERVIEW
Nocturne builds analogue synthesisers in small runs. Their previous site sold specifications. We rebuilt it around sound: each instrument page is a working, playable model of the hardware, running in the browser, with the visual identity generated from the instrument you are currently holding.
- CLIENT
- Nocturne Instruments
- YEAR
- 2025
- ROLE
- Art DirectionBrand IdentityCreative Development
- TECH STACK
- Next.jsWeb AudioThree.jsGSAPShopify Headless
MEASURED IMPACT
Conversion
+64%
Session
6m 12s
Patches shared
38K
Lighthouse
97
SYSTEM ARCHITECTURE & DESIGN
Playable models
Each instrument is modelled as a small signal graph in the Web Audio API — oscillators, filters, envelopes and the specific non-linearities that give each unit its character. Presets are shareable URLs, which turned out to be the most-used feature in the launch quarter.
Identity from signal
The visual system is driven by the audio. Type weight, grid density and accent hue are functions of the currently sounding patch, so the brand reacts to what you play rather than sitting on top of it.
Commerce without compromise
The store is a headless Shopify backend behind a fully custom front end. Cart and checkout run on the same canvas layer as the rest of the site — no modal, no context switch, no jump to a hosted page.
VISUAL GALLERY
