The Guide

Vitrail —
Light Through Work

One of ten directions built for Nomadic Owls. This page documents the concept, the references, the system and the tricks — honestly.

1 · The Concept

A chapel of leaded stained glass. The site is a dark nave — near-black, stone-textured — where nothing carries its own light. Everything you read is lit by colored light passing through the work: the six services are panes of one window, the projects are predella scenes beneath it, and the hero owl is the patron pane of the studio.

The metaphor earns its keep in the mechanics, not just the imagery. “We send beautiful things to the Internet” becomes literal transmission: light (the idea) passes through glass (the craft) and lands as color on stone (the result). Scroll position drives a virtual sun, so the angle and hue of the ambient light shift as you move through the page — cobalt dawn at the hero, amber noon at the services, ruby dusk at contact.

The intent was reverence without cosplay: no gothic fonts, no parchment, no church organ. Just lapidary capitals, a serious serif, and glass built the way glass is built — irregular panels, thick lead, seeds and streaks in the material.

2 · Cited References

• Old Tom Capital — engraved hairline ray motif → adapted as leadline tracery: hairline SVG strokes that draw themselves in (stroke-dashoffset animation with pathLength="1") framing every section, including a lancet kink at each frame’s top center.
• Impasto Shader Stamp — dynamically lit material inside a masked form → adapted as a cathedral-glass texture filter: feTurbulence streak noise composited into the panes’ alpha and screened back over the glass, giving each panel hand-blown seeds and striations without any raster asset.
• Numerorum Booklet — depth via material transparency → adapted as translucent glass layers: the fixed header is a blurred tinted pane (backdrop-filter), and service/project panels are translucent color-mixed glass whose tint sits over the stone and grain layers behind them.

3 · Design System

• Nave black #0A0908 ground — the dark interior
• Cobalt #1446A0 jewel glass — dawn light
• Ruby #B3122E jewel glass — dusk light
• Amber #E5A11C jewel glass — noon light, CTAs
• Emerald #1F7A5C jewel glass — morning light
• Stone grey #C9C4BC body text on nave black (≈10.7:1)

Spacing: sections breathe with clamp(5rem, 12vh, 9rem) padding; a 78rem nave width; arched border-radii (two-value elliptical radii) give every panel its lancet head. Color is never decoration alone — each service petal, panel and section kicker carries one of the four jewel hues, and the cursor glow inherits the hue of the section beneath it.

4 · Tech & Motion

• Hand-leaded SVG. The rose window and tracery are inline SVG. Panels are drawn as clean polygons, then an feDisplacementMap fed by low-frequency feTurbulence warps the whole group ±7px — every lead line wobbles like hand-set came. Glass texture is a second filter: streak-shaped turbulence thresholded by feColorMatrix, clipped to the pane alpha, blended with screen.
• Rose window of services. Six petal paths are generated at build time from polar coordinates (60° wedges, cubic shoulders, a quadratic tip). Each petal is an SVG <a> with an aria-label, focusable and clickable, deep-linking to its service panel. Hover/focus lights the petal (filter: brightness/saturate) and its panel simultaneously; hovering a panel lights its petal back.
• Virtual sun. A passive scroll listener (rAF throttled) maps scroll progress to CSS custom properties: --sun-x slides two fixed radial gradients across the nave, and the light color interpolates cobalt → emerald → amber → ruby through the day. The hero headline’s gradient fill reads the same variable.
• Colored-light cursor. A fixed, blend-mode screen radial gradient follows the pointer (mouse only), tinted by the section currently in view via IntersectionObserver.
• Reduced motion. Under prefers-reduced-motion: reduce the tracery renders fully drawn, reveals are instant, the sun and cursor scripts never attach, and the glow layer is removed. No canvas, no WebGL, no libraries — the whole page is HTML, CSS and ~90 lines of vanilla JS.

5 · AI Assets

Four assets were planned centrally (see shared/assets/manifest.json); prompts are recorded verbatim below, and all four ship on the site. The hero owl window (owl-window.webp) and the glass-texture plate inside the service panels are AI renders; light-on-stone and the Kling dust-motes loop form the interlude before Contact — the video (muted, 210 KB, paused off-screen and replaced by its still poster under reduced motion) plays over the light-on-stone frame. The rose window, tracery and all lead-line motion are procedural SVG.

owl-window.png — GPT Image 2 (via Higgsfield CLI)

“Gothic stained glass window depicting a majestic owl with spread wings, made of cobalt blue, ruby red, amber and emerald leaded glass pieces, thick black lead lines, sunlight streaming through casting colored light, dark stone cathedral interior around it, no text”

glass-texture-blue.png — GPT Image 2 (via Higgsfield CLI)

“Extreme close-up of antique hand-blown cathedral glass in deep cobalt blue, visible bubbles, streaks and ripples in the glass, light refracting through, macro photography of stained glass material, no lead lines, no text”

light-on-stone.png — GPT Image 2 (via Higgsfield CLI)

“Colored light from an unseen stained glass window falling across ancient dark stone floor and wall, pools of blue, red, amber and green light on grey stone texture, deep shadows, contemplative cathedral atmosphere, no text, no window visible”

light-shaft.mp4 — Kling (kling2_6, via Higgsfield CLI)

“Dust motes drifting slowly through shafts of colored light from a stained glass window in a dark cathedral, blue red and amber light beams on stone, serene slow motion, static camera, cinematic atmosphere”

6 · How to Reproduce

1. Scaffold Astro v5, output: 'static', no client framework.
2. npm install @fontsource/cinzel @fontsource/crimson-pro; import only weights 400/600 (+ 400 italic body).
3. Build the windows as inline SVG: polygons + two filters (handlead displacement, glasstex streaks) as described above.
4. Generate rose petals from polar math in Astro frontmatter; wrap each in an SVG anchor.
5. Wire the virtual sun and cursor glow to CSS custom properties; gate everything behind a reduced-motion check.
6. npm run build && npm run preview.

Designed & built by Claude (Anthropic) for Nomadic Owls. One of ten directions — index at owls-index.pages.dev.