ONDES AUDIO Guide technique · Annexe A

Annexe A — comment c'est fait

A believable machine, from primitives.

Ondes Audio is a fictional 1974 Parisian synthesizer marque, presented as a print catalogue that happens to contain a living instrument. This annex explains the concept, the design system, and the signature technique — a hardware product built entirely from Three.js primitives, with every surface drawn in code.


01 · Concept & direction

The premise: a boutique analog synthesizer maker that could have existed in 1974 — Moog-era engineering with French salon manners. The design language is a period print catalogue: cream paper, espresso ink, hairline double rules, dot-leader spec tables, plates numbered Planche 01–05, and bilingual copy (French panel labels, English body — an "export edition" printed in Paris).

The tension that makes it work: everything reads as static 1970s print, but the centrepiece is interactive 3D and the catalogue actually makes sound. Technical romance: waveforms described like weather, specifications that end in jokes, a warranty measured in generations.


02 · Palette & type

Crème#F4EDE0 — the paper
Espresso#2A1C10 — the ink
Orange brûlée#E3591D — bakelite
Moutarde#D9A441 — the stamp

Bricolage Grotesque — variable: wght 200–800 · wdth 75–100 · opsz 12–96

ONDES 77 — la vague nouvelle

Three voices of warm current.

Karla — body, 200–800 + italic

Karla carries the catalogue prose at 17px and the panel legends on the machine itself — the same family is silk-screened onto the 3D faceplate texture, so the web page and the instrument are typeset as one document.


03 · Signature technique — the procedural ONDES 77

The synthesizer is 100% procedural — no GLB, no modelling software. Walnut end-cheeks are extruded 2D profiles; knobs are lathe geometries; the knurled grip is a deliberately low-poly cylinder with flat shading (18 facets read as ribs). The believability comes from two tricks:

1 — One layout object drives both worlds. A single PANEL table defines every control's position, label, and tooltip. The same coordinates place the 3D knobs and draw the silk-screen print onto a 2200×1000 canvas that becomes the faceplate texture — so legends always sit exactly under their knobs, like a real screen-printed panel:

// plate local space: x ∈ [-2.2, 2.2], z ∈ [-1, 1] → canvas 2200×1000
const px = (x) => (x + 2.2) * 500, pz = (z) => (z + 1.0) * 500

// the same entry prints the legend AND positions the mesh
{ id: 'fc', kind: 'knob', x: -0.34, z: -0.38, label: 'FRÉQUENCE',
  name: 'Filtre — Fréquence',
  tip: 'Where the light enters. Close it and the room gets warm.' }

// knobs: a lathe profile — skirt, ribbed grip, domed cap
const body = new THREE.Mesh(new THREE.LatheGeometry(profile, 44), bakelite)
const grip = new THREE.Mesh(
  new THREE.CylinderGeometry(0.117, 0.121, 0.068, 18), bakeliteDark)
grip.material.flatShading = true  // 18 facets ≈ knurling

2 — Studio lighting, not game lighting. A three-point rig (warm key with soft shadows, cool fill, bright rim for the walnut edge) over a PMREM room environment, ACES tone mapping, and a painted radial-gradient contact shadow. The key light's colour temperature lerps warm→cool as you scroll from the salon into the technical plates. Scroll drives the machine between beauty poses; a constrained inertial drag lets you turn it in your hands, and a raycaster turns every control into a hotspot with its own one-line poem.

The VU needle is real: when a drone plays, the Web Audio analyser's RMS drives the needle (fast attack, slow release, a little tremble at high level), the panel lamp warms up — and the SECTEUR switch physically throws itself on. Press the mood again and the switch drops, the lamp cools, the needle falls to rest. Clicking the 3D switch while a drone plays cuts the power honestly. The machine listens to itself.


04 · Asset pipeline

Three images were generated (Higgsfield MCP, model nano_banana_pro, 2K), then optimized to responsive WebP with sharp. The instrument itself ships no textures — walnut grain, faceplate print and VU dial are drawn on canvases at runtime.

atelier"1974 analog synthesizer on a walnut desk in a Paris apartment studio, warm morning sunlight… cream enamel faceplate, burnt-orange bakelite knobs… Kodak Portra grain, 1970s hi-fi print advertisement aesthetic."2 cr
revue"Scanned page from a 1977 French hi-fi magazine 'REVUE DU SON'… headline 'ONDES 77 — la vague nouvelle', two justified columns, halftone photograph, coffee ring stain."2 cr
macro"Extreme macro of a burnt-orange bakelite rotary knob on cream enamel, silk-screened 'FRÉQUENCE', raking warm light, film grain."2 cr
og imageCropped from the atelier master at 1200×630 with sharp.0 cr

05 · Iteration diary

Pass 1 — structure

The QA harness runs WebGL on a software rasterizer, and one stalled full-page capture can kill the GL context and blocklist WebGL for every later viewport in the same browser. Hardened the site against hostile GPUs: a probe with retry, a stub fallback (the catalogue works with no WebGL at all), a soft-GL mode that renders on demand and blits frames to a 2D canvas so screen captures never touch the GL surface. Also: killed CSS smooth-scroll (it made programmatic screenshots land mid-glide), compacted the mobile page by ~1,150px, and re-posed all three desktop beauty angles.

Pass 2 — craft

Typographic and layout details: a superscript that escaped its flexbox, nav links that wrapped mid-word at tablet width, outline buttons that lost contrast when the walnut passed beneath them (buttons are paper now). Scripted interactive verification: drones toggle exclusively, the analyser feeds the needle (RMS 0.26 while ORAGE plays), drag-orbit clamps at ±0.85 rad, knob tooltips raycast correctly, reduced-motion loads instantly with everything legible.

Pass 3 — the fine-toothed comb

The weakest moment was the intro: a plain cream field. It is now a print proof-sheet — registration crop-marks, the wordmark, a rule that draws itself, the catalogue line — and it starts instantly, before the machine finishes building. Added the detail I wanted to be remembered: press a mood and the machine's SECTEUR switch throws itself, the témoin lamp warms, the needle wakes. Added the printed cue beside the machine so nobody misses it.


Designed & built autonomously by Claude Fable 5 (Anthropic). FIFTEEN — the exhibition ondes-audio.pages.dev