SUBSTRATE // BUILD GUIDE // DOCUMENT 09-G
How this
was built.
One WebGL dot-grid terrain, two typefaces, three colors, zero photographs. Everything below is the real system — same shaders, same tokens, same code that runs the site one route up.
[ 01 ] Concept
CREATIVE DIRECTION
Substrate is a fictional infrastructure company selling "compute, sedimented" — deterministic compute strata for machine cognition. The metaphor drives every decision: deploys are geological events, rollbacks go down through layers, events propagate like seismic waves.
The site takes the dev-tool aesthetic to its logical extreme: terminal-native, decoration-free precision. Carbon black ground, ash annotations, one violent accent — electric lime — used only where data is alive.
The single organizing idea is the dot-grid terrain: ~31,000 GPU-instanced points forming a landscape that is literally the data made topographic. It ripples away from the cursor, and it re-forms itself as you scroll — mountains for the hero, sedimented terraces behind the terminal, a bar-chart ridge under the benchmarks, a dead-calm plane at the footer.
Motion grammar is enforced sitewide: 0.2-second snaps, scramble-decodes, damped mechanical interpolation. Nothing floats. Nothing eases longer than 0.4 s. Zero marketing softness.
[ 02 ] Palette & type
DESIGN SYSTEM · TOKENS
Archivo — variable width axis, 62 → 125
Compute, sedimented.
Compute, sedimented.
Compute, sedimented.
Martian Mono — every annotation, readout and terminal glyph
0123456789 · σ Δ ▸ ● ▚ — cold start 41 ms · p99 8.3 ms
Headlines run at width 125 (fully expanded), weight 800, uppercase. Body copy condenses Martian-adjacent Archivo to width 87.5 for density. The lime is rationed: status dots, index numerals, wavefronts, nothing else.
[ 03 ] The terrain
SIGNATURE TECHNIQUE · LIVE
One mesh, zero CPU deformation
The field is a single THREE.Points mesh — a flat grid of
~31k vertices uploaded once. Every frame, the CPU sends only a handful of
uniforms: time, a 4-component state weight vector, a 12-slot ripple
ring-buffer, and the cursor's world position. All displacement happens in
the vertex shader.
Each topography is a pure height function of the point's XZ position: ridged fBm for mountains, quantized fBm for sediment terraces, hashed gap-separated columns for the bar ridge, low-amplitude interference for the calm plane. The visible terrain is their weighted blend — so morphing between sections is just damping four floats toward a new target.
Ripples as a ring buffer
A cursor move (throttled to ~8 Hz) or click writes
(x, z, birthTime, amplitude) into the next of 12 ripple slots.
The shader evaluates every live ripple per vertex: an expanding ring with
a Gaussian wavefront, exponential decay in both time and distance. Ripple
energy also feeds point color and size — the wavefront literally glows lime
and swells as it passes through the grid.
Scroll position never scrubs the terrain directly. Each section sets a target state; a damped exponential (settles in ~0.35 s) chases it. That is what makes the morphs feel mechanical instead of floaty.
float h = 0.0;
if (uWeights.x > 0.001) h += uWeights.x * hMountains(p);
if (uWeights.y > 0.001) h += uWeights.y * hTerraces(p);
if (uWeights.z > 0.001) h += uWeights.z * hBars(p);
if (uWeights.w > 0.001) h += uWeights.w * hCalm(p);
h *= uAmp;
// ripple field: damped expanding rings
float glow = 0.0;
for (int i = 0; i < 12; i++) {
float dt = uTime - uRipples[i].z;
if (dt <= 0.0 || dt >= 5.0) continue;
float r = distance(p, uRipples[i].xy);
float d = r - dt * 4.2; // wavefront radius
float env = exp(-d * d * 0.55) // ring thickness
* exp(-dt * 1.1) // time decay
* exp(-r * 0.05) // distance decay
* uRipples[i].w;
h += env * sin(d * 2.6) * 1.35;
glow += env;
}const STATES = {
mountains: { w: [1, 0, 0, 0], cam: { y: 6.9, z: 15.6 } },
terraces: { w: [0, 1, 0, 0], cam: { y: 6.1, z: 14.6 } },
bars: { w: [0, 0, 1, 0], cam: { y: 7.8, z: 16.2 } },
calm: { w: [0, 0, 0, 1], cam: { y: 3.4, z: 13.2 } },
}
// per frame — settles in ~0.35s, mechanical not floaty
const k = 1 - Math.exp(-dt * 9)
uniforms.uWeights.value.lerp(targetW, k)[ 04 ] Asset pipeline
ZERO AI IMAGES · BY DESIGN
This site ships no generated imagery at all — the brief demanded pure WebGL and typography, and the constraint is the point: every pixel of atmosphere is computed, not composited.
- Terrain — procedural, in-shader, this page and the home page.
- Grain — inline SVG
feTurbulence, data-URI, ~300 bytes. - Favicon — hand-written SVG: dot grid, one lime displaced point.
- Fonts — Archivo (variable wdth 62–125, wght 100–900) and Martian Mono (wght 100–800), self-hosted woff2 via the repo's getfont tool.
- OG image — a rendered frame of the hero terrain, captured from the build's own QA screenshot harness and cropped to 1200×630. The share card is the product.
- Terminal session — scripted DOM typing, no video, no gif.
[ 05 ] Iteration diary
THREE PASSES · LOGGED
Structure
Full build stood up, then the screenshots argued back: the headline overflowed at every width, the terrain was rendering at near-invisible additive brightness, and the benchmark bars were animating a zero-width flex box. Retuned the type scale, the point colors and alpha floor, and rebuilt the bars as absolute fills. Kept the mobile guide under the 8k-pixel capture ceiling.
Craft
Art direction pass. The mountains got flank-weighting — calm behind the headline, towering at the edges — and the camera dropped so ridgelines climb into the hero's negative space. Killed a ghost artifact: the grid column at x = 0 aligned with the camera axis and 150 additive points stacked into a fake vertical line — fixed by baking yaw into the geometry. Stitched the grain tile seams, unstretched the install box, rendered the OG frame from the site's own hero.
Complexify & refine
Hostile-critic pass. The terrain's state machine was doing its best work invisibly — so it got a TOPOLOGY readout that scramble-decodes to the new height function on every morph. The primitives sector's flat plateau became a visible interference field. Terminal replay was rewritten with token cancellation so it can never race an in-flight session, and the small annotation text got a contrast bump.
[ 06 ] Credit
COLOPHON
Designed & built autonomously by Claude Fable 5 (Anthropic) — one of fifteen sites in a single autonomous build run.