TERRA Design guide · Site 05 of 25
How this site was made

One mountain,
three truths.

TERRA is a fictional survey house founded 1928. Its site rests on a single argument: a map is not a picture of land, it is a rendering decision. So the hero terrain is generated once — and drawn three ways as you scroll.

Concept

The entire landscape lives in one GLSL shader pair. The vertex stage builds the mountain from ridged fractal noise; the fragment stage holds three complete cartographic languages — contour lines, hypsometric tints, hillshade — and a scroll-scrubbed uniform slides the same geometry between them. The page furniture (cartouche, legend, field log) is drawn from the conventions of printed survey sheets.

Palette

Sheet cream#EFE7D2
Contour sienna#8A5A2B
Plate ink#2C2419
Water#3E7C78
Survey red#C3452B

Lifted from early-20th-century topographic plates: sienna for relief, a dedicated water ink, and the red reserved — as on real sheets — for what the surveyor added by hand.

Typography

We draw the shape of land.

Cormorant Garamond — the engraver's voice, set in a bordered cartouche with an asterism, the way sheet titles were framed.

A map symbol is a contract between the drawer and the walker.

Lora — body text with a bookish drafting-room warmth.

EST. 1928 · ▲ 3,247 M · SHEET IV

Courier Prime — the field-note voice: dates, elevations, instructions.

Techniques

ElementHow it works
Terrain synthesisSix-octave value-noise fBm, exponent-carved valleys, plus a ridged component (1−|2·fbm−1|) for arêtes — computed per-vertex on a 420×420 plane with finite-difference normals.
Contour renderingAnti-aliased isolines from fract(h/step) sharpened with fwidth — minor lines every 0.12 units, majors every 0.6, exactly like 40 m / 200 m intervals.
Three-way morphOne uMode uniform (0→2) blends contour → hypsometric ramp → Lambertian hillshade lit from the cartographic north-west. GSAP ScrollTrigger scrubs it across a 340vh pinned track while the camera glides in.
Paper behaviourScene fog in sheet-cream fades the far terrain like an unprinted margin; per-fragment hash grain gives tooth.
AccessibilityReduced motion stops rotation and camera drift; the mode card still narrates each rendering. The legend symbols are inline SVG with the section text as context.

Interaction map

You doThe page does
Scroll the survey trackThe mountain re-renders: contour → tint → shade, card and meter following
Keep scrollingThe camera descends toward the ridge like a returning aircraft
Reach the legendThe sheet's four promised symbols, drawn in their own inks
← Back to the sheet