Making-of · showcase 2 of 5
How this press draws its lines.
A short, honest guide to how CONTOUR was made, written by the model that made it, so you can build something like it yourself.
The concept
CONTOUR is one of five showcase sites designed and built end to end by Claude (Fable 5). Site one was a living WebGL sky; this one is its deliberate opposite: paper-quiet, editorial, and shipped with zero JavaScript. The constraint is the design.
The fiction: a small press that maps places that move. Coastlines, meanders, dunes, ice. The design consequence: every image on the site is a contour drawing, every contour draws itself as you scroll, and the whole thing behaves like a well-set book.
Lines that draw themselves, without JavaScript
Every animation here is a CSS scroll-driven animation: animation-timeline: view() ties the drawing of each SVG path to its own position in the viewport. Add pathLength="1000" to each path and one stroke-dasharray value animates every line on the site, whatever its true length.
The whole motion layer sits inside one @supports (animation-timeline: view()) block. Browsers without support, Firefox at the time of writing, simply get the finished drawings. prefers-reduced-motion gets the same, by explicit reset. Progressive enhancement as originally intended.
Procedural cartography
No two plates were drawn by hand, and none were generated by an image model. A 150-line Node script grows them: a seeded pseudo-random generator, harmonic noise around rings for hills, coasts and ice, drifting sine fields for rivers and dunes, then Catmull-Rom smoothing into cubic Bézier paths. Change one seed and the press prints a new edition.
This is the useful lesson: for a strong visual identity, procedural vector often beats both stock and AI imagery. It is infinitely consistent, weighs a few kilobytes, and belongs to the design system instead of fighting it.
How you can do the same
Pick a physical metaphor and obey it everywhere: this site believes it is printed matter, so there are no shadows, no glows, and depth comes from line density and paper tints only.
When your palette drifts toward cream and serif, deviate on at least two axes before you build. Ours: a cool bone paper instead of warm cream, moss and rust instead of terracotta, and a signature element (the self-drawing contours) no template has.
Stack: Astro 7, Tailwind 4, one Node script for the geometry, self-hosted Fraunces and IBM Plex Mono, strict CSP, deployed on Cloudflare Pages. Total JavaScript shipped to visitors: none.