Vesper

One rule: no audio files

Vesper ships without a single sound file. Every bell voice is synthesised live in the browser from its partials — the hum, prime, tierce, quint and nominal that give a real bell its characteristic minor-third strike note. Change the partial data and the bell genuinely sounds different, because nothing was pre-baked.

The geometry follows the same discipline. The bell is a lathe of a procedural profile curve, and that curve is the single source of truth shared by the 3D mesh and the tuning interaction. There is no model file either. The shape and the sound come from the same numbers, which is exactly how a real foundry works.

Five set pieces

The site is built as a sequence of chapters, each finished to the same standard — no placeholder inner pages behind a strong hero.

The Strike

The hero. A strikeable bell with modal synthesis and a cos(4θ) hoop-mode vibration shader, so the mesh flexes in the same modes you are hearing.

The Pour

A scroll-driven casting chapter — the one deliberate spectacle moment, and the only place the ember accent is ever spent.

The Tuning Room

Drag along the bell's inner profile to shave metal on a virtual lathe. The cross-section changes exactly where you cut and all five partials retune live, in cents, from the same curve the 3D bell uses.

The Ledger

Nine bells cast between 1721 and 2026, as typed content collections. Each has its own story, inscription, weight, strike note, a distinct synthesised voice derived from its own partial data, and a partial table rendered as a generative engraving.

The Carillon

A keyboard-playable finale. Play a peal, record it, and share it by URL — the recording is the URL.

Accessibility as a concept, not a compliance pass

A site whose entire subject is sound has an obvious problem, and solving it properly was more interesting than working around it. Every sound has a visual twin: strikes produce decay bars, partials produce readouts, the carillon shows what it is playing. The lathe is fully operable from the keyboard with APG slider semantics, and every set piece works by touch.

Quiet Mode is a first-class site-wide state rather than a mute button, prefers-reduced-motion gives a complete experience instead of a degraded one, and ESC closes anything that opened.

The performance bar was set first

Because the piece was built to be judged, the numbers were treated as requirements rather than results: LCP under 1.5 seconds, a stable frame rate through a strike and its full twenty-second decay, device pixel ratio capped at 2, and no rendering at all while the tab is hidden. Audio nodes are pooled and torn down rather than accumulated, so a visitor who strikes the bell fifty times does not end up with fifty live graphs.

Rendering runs on Three.js WebGPU via TSL nodes and falls back automatically to WebGL2. The ground is bone-coloured, not black — a light-first WebGL piece, which is rarer and harder than the default.