A colophon is a note on how a thing was made. Here’s how this garden grows.
Built with
- A custom static-site generator that turns a folder of Markdown into a linked website.
- Preact for templating, rendered to static HTML at build time.
- unified / remark / rehype for the Markdown → HTML pipeline.
How the explorables work
Each interactive widget starts life as a boring placeholder in Markdown:
<div class="explorable" data-explorable="attention"></div>A single site-wide script scans every page for these placeholders and hydrates them into live SVG/canvas visualizations. They read the site’s theme CSS variables, so an attention map or a gradient-descent curve recolours itself when you flip between day and night.
Craft details
- Sidenotes float into the margin on wide screens, letterpress-style.
- Reading progress and page view transitions are pure-CSS / native-API enhancements.
- An interactive garden graph greets you on the home page, every note as a node, linked by the connections between them.
Type & colour
Set in DM Serif Display, Bricolage Grotesque, and JetBrains Mono, over a two-ink palette that inverts from warm-paper day to cyanotype night.
The full source lives on GitHub.