Steal This: The SIGNATURE TECHNIQUE Behind “TERRANE — Ridgeline National Reserve Field Guide”

Imagine a digital field guide where a mountain reserve’s topography is rendered entirely through live procedural terrain, seamlessly integrated with vintage-inspired cartographic overlays. This AI-crafted site transforms WebGL shaders into a dynamic, self-drawing topographic map, combining real-time terrain generation with classic survey aesthetics. Its pièce de résistance? The shader-driven contour lines that remain crisp and precise at any zoom level, creating an immersive experience that feels both vintage and alive.

The core of TERRANE’s visual identity hinges on a sophisticated palette and shader interaction designed to evoke vintage survey maps. The color scheme is carefully mapped to CSS variables, allowing synchronized recoloring for seasonal shifts—whether winter frost or summer warmth—applied consistently across both CSS and WebGL uniforms. The signature technique involves calculating contour lines directly within the fragment shader using functions like fract() and fwidth(), eliminating the need for precomputed geometry. This approach results in high-fidelity, anti-aliased topo contours that remain sharp regardless of zoom, making the map both precise and performant. Complementing the terrain rendering is a ‘spine mask’—a deliberate elevation line guiding the terrain’s massif—adding intentionality to the otherwise noise-generated landscape. The combination of procedural noise, Gaussian masking, and shader-based contouring crafts a terrain that feels both natural and intentionally structured, with visual cues like elevation stamps and marginal graticules reinforcing the vintage survey look.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 02 of 175, “terrane”):
TERRANE — Ridgeline National Reserve. Fiction: a protected mountain reserve’s field guide. Aesthetic: vintage topographic map meets modern field guide. Palette: paper cream #f4efe3, ink green #1e3a2f, contour tan #c9b896, rust accent #b5502a. Fonts: fraunces (display, use italic for poetry), archivo (body). SIGNATURE: Three.js procedural terrain (Perlin/simplex heightfield) rendered as elegant contour-line wireframe (ink green lines on cream) in a full-width canvas; camera glides to new vantage points as you scroll between sections (lerp scroll-linked camera). SVG contour-line section dividers, elevation figures in the margins (2,340 m), trail cards with difficulty pictograms, seasons section with palette shifts. Unforgettable: the mountain rotates and reveals itself as you read, like a living map. Use importmap three from /assets/js/three/.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/terrane/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

The development process unfolded in three stages: initial construction involved integrating WebGL shaders to generate procedural terrain layered with vintage survey elements; a rigorous critique phase tested the clarity, zoom behavior, and visual coherence of the contour rendering, ensuring sharpness and aesthetic harmony; finally, an art director review certified the experience, aligning technical precision with visual storytelling. This iterative pipeline ensured that the guide not only functions as an accurate topo display but also as an engaging visual artifact, with each step refining the seamless blend of code and concept.

The full build notes live in the room’s design guide.

Explore the full experience in the live room and see how AI-driven procedural terrain can elevate digital cartography. Browse all 175 sites in the hub to uncover more innovative uses of shader techniques and interactive design. This is a glimpse into how AI and real-time graphics can redefine educational and reference content for digital explorers worldwide.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 1: HELIOS — Live Solar Observatory · Station HLX-1

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI