Melisma

Colophon · How this page was made

A page that learned to sing

Melisma is a chant machine for the curious — students of early music, choristers, anyone who has stood in a stone church and wondered what the square notes meant. Its single job: let you draw a line of plainchant on a four-line staff and immediately hear it, sung by a synthesized choir in the acoustics of a nave that was never built. This is the record of how it was drawn, tuned and hardened.

The palette

Four colours, argued from the manuscript

The whole page is a page — an antiphoner leaf. Every colour is one a scribe actually kept on the desk: the prepared skin, the iron-gall ink, the cinnabar rubric, and gold for what mattered most.

#EFE6D4
VellumPrepared calfskin. Warm, slightly uneven — the ground everything is written on, never a cold white.
#2B2320
Iron-gall inkNot black — a deep warm brown-black, the colour old ink oxidises to. Carries the text and the neumes.
#A83226
Rubric redCinnabar — the colour of the initials, the mode letters, the note being sung right now. Reserved for what leads the eye.
#A97F22
Gold leafThe tenor lozenge and the C-clef. For small text it darkens to #785810 so it stays readable on skin.
The type

Two faces that remember the scriptorium

Cardo
Alleluia

A humanist face cut expressly for classical and medieval scholarship, with real small caps and a broad-nibbed weight to it. It carries every heading, the wordmark, the drop-cap M and the clef letters — anywhere the page wants the authority of a manuscript hand.

EB Garamond
the voice moving while the words hold still

An open-source revival of Garamond’s sixteenth-century romans. It sets the body and the sung syllables in italic — quiet, legible, and old enough to belong beside the neumes without costume-drama. Scale is deliberate, not the 16/24/32 default: body at 1.19rem, headings stepped by roughly a minor third.

The techniques

Inline SVG, hand-built Web Audio, no samples

The page is a single self-contained file: no images, no libraries, no build step. The staff, the neumes, the drop-cap and every diagram are inline SVG drawn from the music data — place a neume and the shape is generated from its pitch, ledger lines and all. Editing works by pointer and by keyboard: arrows move a quill cursor, number keys pick the neume, Enter writes it.

The signature: a choir with no recordings

Press Sing and nothing is played back — every voice is built live in the Web Audio graph. Four sawtooth oscillators each pass through a bank of four band-pass filters tuned to the formants of a sung vowel (ah, eh, oo), so the timbre is a throat, not a synth. Pitches are stacked in Pythagorean intonation — pure untempered fifths — so octaves and fifths lock and the thirds keep a medieval edge. The four singers disagree by a few cents, drift slowly, and breathe with independent vibrato; that honest disagreement is what makes it read as an ensemble rather than a chorus effect. The reverberation is a convolution against an impulse response composed from shaped noise — early reflections, then a long low-passed tail, the way limestone swallows treble — with a shorter response for the side chapel and a longer one for the great nave. Compound neumes glide between pitches on one vowel: the melisma, sung.

The making

Three passes over the leaf

Pass 1 · Craft
  • Gold text failed contrast. The mode footnotes (Final D · Tenor A) and neume translations were set in gold leaf #A97F22 on vellum — about 3.1:1, below the 4.5 floor for small text. Introduced a darker #785810 gold-ink for text and kept the bright leaf for lines and lozenges only.
  • Re-read the copy against the manuscript conceit — kept the specific nouns (ambitus, tenor, final, cinnabar) and cut nothing that earned its place.
Pass 2 · Depth
  • A moving playhead. Enriched the signature element with a soft rubric beam that tracks the sung note across the staff in real time, interpolating between neumes so the eye follows the voice — synced to the audio clock, not a timer, so it never drifts out of step.
  • Left the second-read detail in place: finish a phrase on its final and the drop-cap's gold sheen quickens while a cadence line names the mode that is satisfied.
Pass 3 · Hardening
  • 375px overflow. The four-button mode control ran to 425px and pushed the page sideways on a phone. Reflowed it into a clean 2×2 grid below 560px with the borders repaired, killing the horizontal scroll.
  • The Chanel rule. Removed the drop-cap's corner flourish curves — the initial already carries a diaper grid, a gold border, a passing sheen and the M; the extra scrollwork was one ornament too many.
  • Confirmed the reduced-motion path (playhead motion suppressed, reveals settled, no shake), the audio-synced rAF pausing on document.hidden, keyboard focus rings, and the Web Audio fallback message if a browser refuses to sing.