The Glazier’s Manual

How this window
was made.

Built end-to-end by Claude Fable 5 — an AI working alone in Claude Code for one night: research, concept, glass, shaders, copy, deployment. This page is the method, so you can commission one yourself.

Stained glass: an oil lamp burning on a tall stand, rays of amber light reaching the window's edges.

i.Research before beauty

Nothing here started with a mood board. It started with a dossier: a research agent swept the owner’s personal knowledge vault (his Obsidian notes) and returned the raw material of a life — verbatim journal lines, dates, the family’s mission sentence, a decade-long vow to memorize Proverbs. Private things (finances, children’s names) were excluded by rule, not by luck.

The design brief wrote itself from one fact: his stated favorite verse is “wisdom is better than jewels” — so the site became a window made of jewels, arguing for the thing that outranks them. If your subject is a person, mine who they actually are. Specificity is the entire difference between a portrait and a template.

ii.One conceit, carried all the way

In glazing, the vertical openings of a window are called lights. That pun carries the whole site: six parts of one life, six lights of one window, lit by one source. Every decision gets tested against the conceit — the navigation is a window elevation, the verses are “carved” beneath each light, the 404 is a blank pane. When a detail doesn’t serve the metaphor, it goes.

Write the direction down in one sentence before any code. Ours: a life as a cathedral rose window — light from one source, broken into many colors.

iii.The rose is mathematics

The hero window is not an image. It is a hand-written WebGL2 fragment shader that constructs the tracery — an oculus of six petals, twelve great petals, twenty-four roundels — as signed-distance fields in polar coordinates. Each glass cell gets a seeded jewel color, streaks and seed bubbles from layered value noise, and a slow sun drifting behind it.

Three more passes finish the scene: a half-resolution crepuscular pass radially blurs the window’s own light into shafts; the composite adds the stone nave, a polished floor that reflects the glass as a pool of color, grain and vignette; and a few hundred GL point-sprites drift as dust, lit by sampling the ray texture. No libraries. If WebGL is missing — or JavaScript is off — a static SVG rose, generated by a Python script from the same geometry, takes its place.

iv.The lancets are AI-blown glass

The six section windows were generated with Higgsfield’s nano-banana image model at 2K — about two credits each. The trick is a locked style clause: every prompt shares the same frame and material language, and only the subject and dominant hue change. That is how seven images read as one commission:

A single tall narrow stained glass lancet window panel set in a dark
stone gothic pointed arch in a shadowy ancient stone wall, modern
mid-century modernist church glass, flat graphic shapes with bold black
lead cames. Subject: [THE SCENE]. Hand-blown cathedral glass texture:
subtle streaks, seeds and bubbles in the glass, gently uneven color.
Backlit, glowing. Jewel palette: [DOMINANT HUES], set in smoky
charcoal-slate glass. No text, no letters, no human figures. Strong,
simple, sacred composition.

Subjects were chosen as emblems, not illustrations — six olive shoots for six children (Psalm 128), a tied belt for jiu-jitsu, a basin and towel for a book about servanthood. The renders arrive already set in stone; a CSS mask melts their masonry into the page’s own, and a small canvas under each one repaints the glass, flipped and blurred, as light on the floor.

v.Type and color argue the same case

Display: Grenze Gotisch, a variable font with blackletter bones and a modern skeleton — headings “ink in” by animating its weight axis from 180 to 480 as they enter. Body: Alegreya, a calligraphic book face that can carry long reading. Latin subsets only, self-hosted, three files, ~130 KB.

Color is OKLCH throughout: warm charcoal-umber stone (never pure black), parchment text (never pure white), and six jewel hues assigned one per light. A registered CSS custom property (@property --ambient) lets the page’s ambient glow crossfade to the hue of whichever light you are reading — the nave re-lights itself as you walk it.

vi.Three passes with a fine-tooth comb

The site was reviewed and revised three full times before shipping, in a real browser at desktop and phone widths, screenshot by screenshot:

  1. Design pass — composition, spacing rhythm, typographic scale, anything that reads as template rather than intention.
  2. Complexity pass — deepen what is thin: motion choreography, hover states, the pools, the elevation navigation.
  3. Audit pass — WCAG 2.2 AA contrast (computed, not eyeballed), keyboard focus, prefers-reduced-motion, mobile adaptation, page weight, meta tags, the 404.

The slop test governs all three: if a stranger could glance at the page and say “an AI made this” — cyan gradients on black, glassy cards, Inter everywhere — it fails, regardless of how much work it took.

vii.Ship it boring

Static HTML, CSS, and two JavaScript files. No framework, no build step, no analytics, no external requests of any kind. Pushed to GitHub, deployed on Cloudflare Pages. The whole site — fonts, glass, shaders — weighs less than one hero image on an average landing page, and it will still render in twenty years.

Commissioned by Reggie Black. Built by Claude Fable 5 in Claude Code, July 2026 — vault research by a sub-agent, glass by Higgsfield, everything else by hand. The first edition of this site, “an heirloom volume, illuminated,” rests in the git history.