VELLUM
Folio 90 · a build note

How the leaf was lit

A manuscript written too small to read, and a glass of your own to read it with. Move the lens and the ink stands up, the margins confess their secrets, and the dragon in the first letter opens one eye.

The concept

A page that keeps its counsel

VELLUM is a single illuminated leaf from a fictional bestiary, De Dracone Dormiente, set in a hand no wider than a hair. It is inert until you drive it: the whole reveal rides a magnifying glass fixed to your cursor. This is Wave 4 — Second Person — so the leaf is addressed to you, and it cannot be read except through the small circle of warmth you carry across it.

Audience: anyone who has ever leaned closer to a thing to understand it. The page's single job — make reading feel like an act of searching, one word at a time, with everything else waiting patiently in the dark.

Palette

Argued from the parchment

A real medieval leaf is warm, not white; ink is gall-brown, not black; the costly colours — lapis and gold — are spent only on the sacred and the ornamental. The palette follows those economics exactly, and reserves the bright accents for marks and lines, never small text.

Vellum
#EDE3C9
The page. Warm, aged calf-skin — never a screen-white.
Oak-gall ink
#3B2C1C
Body text. Iron-gall brown at 10:1 contrast — legible, historical.
Lapis
#26467E
Rubrics and glosses. Ultramarine ground from lapis lazuli — the expensive blue.
Gold leaf
#B08A2E
The initial, versals, the lens bezel, the dragon's spine. Marks only — never small type.
Red lead
#A6472E
Rubrication and the ruled frame — the scribe's grid of plummet and minium.
Desk
#D2C4A0
The reading table beneath the leaf, so the page casts a real shadow.
Type

Two hands, six centuries apart

Aa
Cardo · body

A scholarly humanist serif built for medievalists, with the ligatures and even colour that survive being set at 7px. It is the manuscript's own hand — quiet, dense, and legible under the glass.

Yy
Cormorant · display

A high-contrast Garamond descendant with dramatic thin strokes. It carries the wordmark, the rubrics, and the great gold initial — the leaf's one moment of typographic bravery.

The bravery is the near-illegible body itself: setting real, careful prose at ~7px and trusting the glass to make it a pleasure rather than a strain.

Technique

The glass is a real lens

The base leaf is real DOM text — accessible, selectable, and fully readable if the script never runs. On load the script wraps every word in a span and measures its exact position, size and colour with getBoundingClientRect, building a model of the page in leaf-local coordinates.

Each frame the glass renders that model afresh into an off-screen rich canvas, magnified 2.6× around the cursor — so the enlarged text is drawn crisp from vectors, not sampled and blurred from the tiny original. That buffer is then pushed through a precomputed barrel-distortion map: a per-pixel lookup that bulges the centre and pinches the rim like real ground glass, with a faint chromatic fringe at the edge. A brass bezel, a specular crescent, and a soft cast shadow finish the loupe.

Because the glass redraws its own enriched layer, it can show what the base leaf does not: interlinear glosses, a pointing manicule, a hare with a sword, the scribe's muttered complaint — and, coiled in the initial Y, a dragon. A heat value rises while the lens rests on him and decays when you move away; his eye opens, his jaw glows, gold studs brighten along his spine and a thread of smoke climbs the ascender. The glass is a small sun, and heat is the one word he answers to.

No libraries. Canvas 2D and SVG filters only. DPR capped at 2; the warp runs at a fixed internal resolution so cost stays bounded; the loop pauses when the tab is hidden and sleeps when the glass is still. Reduced-motion parks the glass over the initial with the dragon awake but breathless, and lets your pointer drive single frames with no ambient animation. Keyboard users move the glass with the arrow keys.

The three passes

Fine-tooth-comb, thrice

Pass 1 · CraftRhythm, contrast, and the reading window

  • Tuned the frame ruling to a true scribal grid (plummet hairline + red-lead inner rule) instead of a single border, and set the two columns with a faint minium column-rule.
  • Held gold to marks only — initial, versals, bezel, dragon — and gave the small rubric text lapis/red-lead so nothing small sits at gold-on-vellum's ~2.5:1; body ink clears 10:1.
  • Widened the glass's world-window and softened the barrel coefficient so the reading zone stays flat and crisp; only the rim bends, the way a real loupe behaves.
  • Set a deliberate type scale — 7px body / small-caps rubric / 5em initial — and justified the columns with hyphenation for an even manuscript colour.

Pass 2 · DepthThe dragon, and the second read

  • Gave the dragon a real heat state machine: it wakes only where you dwell and settles when you leave, so the wake feels earned rather than triggered.
  • Added the second-read layer — the interlinear gloss "draco · a seeing", the manicule that points to the word you, the hare drollery, and the scribe's complaint in the bottom margin — all invisible until the glass finds them.
  • Made the gilding behave like metal: a specular band sweeps the initial, brightening as the dragon warms.
  • Added a one-time intro where the glass drifts in, wakes the dragon, and then hands you control — the moment you realise the page is yours to drive.

Pass 3 · Hardening375px, reduced motion, focus, performance

  • Verified the leaf fits one screen from 375 to 1440 with no page scroll; columns collapse to one on the narrowest phones; masthead and nav stay inside the viewport box.
  • Reduced-motion path parks the glass over the initial (dragon awake, no smoke or shimmer) and drives single frames from the pointer — no rAF loop.
  • Precomputed the warp lookup once per resize and capped the warp buffer resolution; the loop sleeps when the glass stops and pauses on visibilitychange.
  • Made the leaf keyboard-operable (arrow keys move the glass), added visible focus rings, and removed one ornament flourish so the margins breathe (the Chanel rule).

Designed & built by Sapience Analytics — part of the Generative Assets collection. A page you can only read through the glass you carry.