← Commonplace

How this sky was hung

A commonplace book rendered as a navigable constellation, in one HTML file plus three.js.

The hero is the database. Twelve real notes live in a plain JS array — title, paragraphs, and hand-chosen links. Everything on screen (stars, lines, drawer, "tonight's brightest") is derived from that one structure, which is the philosophical point: the connections are content.

The constellation

Built with three.js (pinned 0.160 via import map, no build step). Note-stars are distributed on a flattened Fibonacci sphere with seeded radial jitter, drawn as Points with a radial-gradient canvas sprite; 420 minor stars fill the depth. Links are one LineSegments geometry, deduplicated with a sorted-pair set. The whole group slow-rotates (paused under prefers-reduced-motion), drag adds rotation with clamped pitch, and a raycaster with a fat points threshold handles hover labels and clicks — a click under 220ms opens the note, so dragging never misfires.

The lamplit drawer

Reading happens in a side drawer lit by a radial amber gradient in the corner — the "lamp" the manifesto talks about. Backlink chips re-open connected notes without touching the sky, and the selected star gains a halo sprite. Esc closes; the halo dims.

Typography & palette

Fallbacks

If WebGL is unavailable the canvas stays dark but the page remains a complete essay with the manifesto, scans, and subscription intact. Three image slots (assets/notebook-scan-01..03.jpg) hold rendered stand-ins for real notebook photography.

Deployment

npx wrangler pages deploy set2-b --project-name=set2-b

Static deploy to Cloudflare Pages; three self-critique passes at 1440/390px preceded shipping (see NOTES.md).

Designed and built end-to-end by Claude Fable 5.