Survey Guide — Notes of the draftsman Sheet 1 of 1

How this map was drafted.

§ 1 The Concept

CONTOUR treats the agency as terrain and the page as a live topographic survey being drafted while you read it. Nomadic Owls positions itself around full-stack development, digital marketing and technical SEO — disciplines of measurement, routing and precision — so the site borrows the visual language of the surveyor: contour lines, benchmarks, bearings, graticules, numbered stations. Elevation stands in for ambition.

The information architecture is an expedition traverse. Four stations replace four sections: Stn 01 Base Camp (hero, a peak), Stn 02 The Valley (six services), Stn 03 The Range (three projects pinned at their true coordinates in the Netherlands, Vietnam and Bali), and Stn 04 The Basin (contact). A position marker advances along a plotted route in the map margin as you scroll, with live elevation and bearing readouts.

This is the one direction of the ten permitted to draw on the "nomadic" word family — wayfinding — and it does so literally: the site is a route you walk, and the work is the landscape it crosses.

§ 2 Cited References

PP Neue Montreal — a narrative conceit (a travel guide) reorganizing an entire IA. Adapted: the survey-expedition conceit turns sections into numbered stations, each headed with a bearing and an elevation readout.
Vectr — animated dotted vector-field linework. Adapted: a full-page canvas of contour lines that continuously redraws, morphing between per-section topographies via marching squares over blended heightfields.
Field Studies Flora — a menu typeset directly onto the scene edge. Adapted: navigation lives in the map margin — a fixed rail with graticule ticks, coordinates, the plotted route and the moving position marker.

§ 3 Design System

Chart cream #F5F1E6 Paper / ground
Contour brown #8B6F47 Contour ink, figures
Survey blue #2D5D8E Water contours, emphasis
Benchmark red #C4452B Markers ONLY — crosses, pins, CTA
Ink #22201B Text, neatline

Instrument Serif — display, figures & italic annotations

Instrument Sans — body, labels, readouts. UPPERCASE TRACKED LABELS AT 11px CARRY THE SURVEY CHROME.

Spacing follows the map sheet: a fixed 14px neatline frame around the viewport, an 84px margin rail on the left, and stations padded with clamp-based vertical rhythm (~12vh) so each topography gets room to morph. Hairlines are 1px ink or 35%-alpha brown; red never colors surfaces larger than a marker, per the palette contract.

§ 4 Tech & Motion

Contour engine. A fixed full-viewport 2D canvas samples a procedural heightfield on a 14px grid, then extracts 16 iso-lines per frame with marching squares. Each station owns a heightfield built from Gaussian bumps: a peak (hero), a valley between two ridges (services), a diagonal chain of summits (projects) and a closed basin (contact). Scroll position selects the adjacent pair of fields and blends them with smoothstep, so the topography morphs continuously — surveyor-slow — as you traverse. A very small time-based domain warp (±0.011 in normalized coordinates) makes the linework breathe. Levels below datum draw in survey blue, above in contour brown; every fourth line is an index contour, drawn heavier.

Route marker. The margin rail plots a dashed route with four station diamonds. A scroll handler (rAF-throttled) interpolates the red benchmark cross between stops and lerps the elevation/bearing readouts between per-station values stored in data attributes.

Discipline. devicePixelRatio is capped at 2; the render loop stops on visibilitychange and via IntersectionObserver; scroll listeners are passive. Under prefers-reduced-motion the canvas renders a single static topography per station (no tween — it re-renders only when the nearest station changes) and the marker jumps between stops without transition. There is deliberately no video asset on this site: contour-line motion is procedural by design — iso-lines from a mathematical heightfield stay razor-sharp at any resolution, cost kilobytes instead of megabytes, and can respond to scroll, which pre-rendered motion cannot.

§ 5 AI Assets

Three stills, generated with GPT Image 2 via the Higgsfield CLI, converted to WebP. No Kling video was commissioned (see § 4 for the rationale). Prompts verbatim from shared/assets/manifest.json:

terrain-relief.png Hero terrain plate (Fig. 1) GPT Image 2 (via Higgsfield CLI)

“Vintage engraved topographic map illustration of a dramatic mountain range, fine brown contour lines on aged cream paper, hachure shading, a single red survey benchmark cross, blue river threads, 19th century cartographic engraving style, no place names, no text”

survey-tools.png Services still life (Fig. 2) GPT Image 2 (via Higgsfield CLI)

“Still life of surveying instruments on cream map paper: brass theodolite, drafting compass, ruling pen, magnifying loupe, faint contour lines visible on the paper beneath, warm neutral light, precise editorial photography, no text”

coastline-plate.png Projects chart texture (Fig. 3) GPT Image 2 (via Higgsfield CLI)

“Engraved-style map illustration of an island coastline with depth soundings as tiny dots, fine contour lines on land, delicate wave hatching in the sea, cream paper with brown and survey-blue ink, antique cartography aesthetic, no place names, no text”

§ 6 How to Reproduce

Scaffold Astro v5, static output: npm create astro@latest → output: 'static'.
npm install @fontsource/instrument-serif @fontsource/instrument-sans; import only the 400 / 400-italic serif and 400–600 sans weights.
Copy the three plates from shared/assets/contour/, convert with cwebp -q 82 into public/assets/.
Build the contour engine: heightfields as Gaussian sums → marching squares at 16 levels on a 14px grid → blend fields by scroll with smoothstep; cap DPR at 2, pause when hidden.
Add the margin rail (fixed aside), station sections with data-elev/data-brg, and the rAF-throttled readout interpolation.
npm run build; verify zero console errors, reduced-motion and keyboard traversal.