Guide · Survey sheet № 47‑A
The concept: a map that is also the territory
TERRANE is the field guide to a mountain reserve that does not exist. Its map is not an illustration — the entire background is a procedural terrain, generated and contoured live in WebGL, and the page reads like a 1920s survey sheet laid over it: neatlines, graticule, legend, altimeter, elevation stamps in the margins. Vintage cartography, computed fresh on every load.
The living map
Everything happens in main.js. A seeded 2D simplex noise class (Simplex2, seed 19260417) feeds two field functions: ridged() for sharp crests and fbm() for foothills. heightRaw(x, z) multiplies the ridged field by a Gaussian mask around SPINE, a five-point polyline — so the massif grows along a deliberate line instead of noise mush.
The contour lines are not geometry. The terrain is one THREE.PlaneGeometry under a custom ShaderMaterial; the fragment shader's lineAt() measures each fragment's distance to the nearest multiple of the contour interval and sharpens it with fwidth(), giving crisp, screen-space anti-aliased lines at any zoom — minors at 30% ink, index contours every fifth at 60%, plus a faint survey graticule. A nearFade term retires the lines when a slope fills the screen, so a close camera never floods the map with ink. On load, a uReveal uniform sweeps from valley floor to summit so the map literally draws itself. Pass 3 adds uScanH: a rust active-contour band that climbs the shader as updateAltimeter() moves the fixed .contour-sightline and rewrites #sightline-readout. A dashed rust LineDashedMaterial trail is draped over the heightfield, and cone markers sit on the three highest local maxima.
The scroll choreography lives in waypointList: nine camera vantages keyed to sections. cameraTarget() interpolates between neighbouring waypoints by scroll position, then the camera lerps toward that target with exponential damping — so the mountain rotates and reveals itself as you read, and turns into a straight-down plan view exactly when the Trails section arrives.
The Seasons section flips a data-season attribute on <body>; CSS custom properties transition the page while the same palette lerps through the shader uniforms. One source of truth, two renderers.
Palette & type
| Token | Value | Role |
|---|---|---|
| --paper | #f4efe3 | Paper cream field |
| --ink | #1e3a2f | Ink green — text & contours |
| --tan | #c9b896 | Contour tan — hypsometric tint |
| --rust | #b5502a | Rust — trails, summits, accents |
| Fraunces | display serif | Titles; italics carry the poetry |
| Archivo | grotesque | Body prose |
| Chivo Mono | monospace | Coordinates, elevations, map data |
Four more palettes (thaw, summer, frost, snowbound) reuse the same four slots, which is what lets the whole site change season in one attribute.
Reproduce this
Ask an agent for: "a fictional national-park field guide where the background is a Three.js procedural heightfield rendered as topographic contour lines — compute the lines in the fragment shader with fract() and fwidth(), not as geometry. Define named camera waypoints per section and lerp between them on scroll, including one overhead plan view. Drive both CSS custom properties and shader uniforms from a single palette object so a 'seasons' section can recolour page and terrain together. Add a scroll-linked active-contour sightline that moves through both the chrome and shader. Dress it in survey-map chrome: neatline frame, graticule, legend strip, marginal elevation stamps, a scroll-linked altimeter." The two decisions that matter most: shader-space contours (crisp at every distance, one draw call) and a spine mask so the mountain has intent.