How this site
was made.

The beauty of thought made visible — academic-paper elegance meets living generative art. The site is the anti-"dark tech" AI page: light, airy, precise. It borrows real scholarly conventions (numbered sections, figures with captions, footnote superscripts, a contents sidebar that tracks reading position) and then lets the figures come alive: Figure 1 literally draws itself in your browser.

Type. Familjen Grotesk for display — a sharp, slightly quirky grotesk that reads "modern lab" without coldness. Newsreader for abstracts and body — it was designed for long-form reading and carries the journal register. IBM Plex Mono for figure labels, citations, seeds and numbers — the voice of the instrument.

This site's art is primarily code-generated (Figures 1 and 2 are drawn live). Exactly one raster image was generated, with GPT Image 2 (model gpt-image-2, quality high), for Figure 3 in §4:

assets/plotter-study.webp1536×1024 · gpt-image-2

"Overhead photograph of a pen-plotter drawing in progress on warm white archival paper: thousands of extremely fine black ink flow lines forming an elegant swirling vector field like magnetized iron filings, one continuous vivid International Klein Blue (#2B4CFF) stream weaving through the black field, tiny precise tick marks and thin ruled margin lines at the edges like a scientific figure, minimalist academic aesthetic, soft even daylight, shallow paper grain visible, ultra fine detail, no text, no letters, no watermark"

Figure 1 — curl-noise flow field. 4,200 particles advected through the curl of a fractal value-noise field. Curl gives a divergence-free flow, so trails never pile up — they weave like ink. Trails accumulate on an uncleared canvas at ~5% alpha, which is what makes it read as a plotter drawing rather than a particle system. The run "finishes" after 620 steps (pen up), and the Regenerate button reseeds a Mulberry32 PRNG whose seed is printed in the caption — the figure is honest about its randomness.

// curl of scalar noise → divergence-free flow
function curl(x, y) {
  const e = 0.35;
  const dx = fbm(x, y + e) - fbm(x, y - e);
  const dy = fbm(x + e, y) - fbm(x - e, y);
  return [dx / (2 * e), -dy / (2 * e)];
}

Figure 2 — attention map. A 12×12 CSS grid; each cell's blue intensity is a custom property --v driven by a hand-tuned attention pattern (self-attention diagonal, "it"→"model" binding, punctuation sink) modulated by a wave that sweeps the anti-diagonal. Hovering any cell prints attn(query → key) and highlights the token pair.

Paper chrome. Section dividers are SVG axes drawn in with stroke-dashoffset transitions plus staggered tick marks; the contents sidebar is an IntersectionObserver scrollspy; the masthead rule doubles as a reading-progress bar; footnote superscripts and publication rows share one popover element positioned on hover/focus. Research-area cards "highlight" phrases with a marker sweep (background-size animation on cloned box-decoration spans). All heavy motion respects prefers-reduced-motion: Figure 1 renders its full 620 steps in one frame and ships as a finished still.

1. Pass 1 — structure & correctness

   Desktop + mobile screenshots, console audit. Fixed attention-map label column widths on mobile, tuned flow-field particle density for small canvases, verified popovers stay inside the viewport, balanced hero measure at 375 px.

2. Pass 2 — rhythm & typography

   Evened the vertical rhythm between sections and dividers, strengthened figure captions, refined the marker-highlight timing on research cards, added the pen-up easing to Figure 1 so the drawing settles instead of stopping.

3. Pass 3 — elevation

   Added the reading-progress rule, the coordinate reveal on people cards, hover states on the colophon index, and re-checked reduced-motion, keyboard focus, and console cleanliness end-to-end.

Static site, no build step. Deploy the directory as-is:

# from the site root
npx wrangler pages deploy . --project-name synthesis