Build guide · Site 27 of 27

One canvas,
three storms.

FARSIDE is the last of 27 sites built by Formwork. Its hero is a single particle field that doesn't switch between weather effects — it interpolates between them, so pressing a terrain toggle re-tunes the storm, the photograph, and a line-drawn tent all at once.

The idea

Expedition gear pages usually show you a hero photo and a spec sheet. FARSIDE tries to make the spec sheet reactive: one control — the terrain segmented control — is the spine of the whole page. Move it and three things answer in lockstep: the weather over the ridge, the environment photo, and an SVG diagram of how the shelter is actually pitched for that ground. The mood is a field manual crossed with safety gear: Anton caps, Space Mono coordinates, one signal-orange accent, cut-tarp edges.

The stack

Weather engine A single 2D <canvas> particle field, delta-timed and DPR-capped.
Diagram Inline SVG, three tent configs redrawn with stroke-dashoffset.
Controls A real tablist segmented control and a keyboard stepper — no framework.
Type Anton (display caps) + Chivo (body) + Space Mono (eyebrows, coords, spec).
Host Static files on GitHub Pages — relative paths, no build step.

Signature technique: the weather engine

Each regime is a small bag of numbers — colour, speed, wind angle, streak length, turbulence, density. The trick is that the live state is never set to a regime; it is lerped toward one. Every frame the current state eases a little further from where it was to where it's going, over about 800 ms, so snow slows and warms into dust instead of cutting to it:

const REGIMES = {
  alpine:  { color:[236,240,236], speed:46,  angle:1.94, streak:5,  turb:1.1  },
  desert:  { color:[226,178,122], speed:20,  angle:0.24, streak:0,  turb:0.6  },
  coastal: { color:[176,206,216], speed:168, angle:2.16, streak:20, turb:0.28 },
};

// on toggle: snapshot where we are, aim at the new regime, restart the fade
function setRegime(name){ from = cur; to = REGIMES[name]; tt = 0; }

// every frame: ease the whole parameter bag from → to
if (tt < 1){ tt = Math.min(1, tt + dt/0.8); cur = mixState(from, to, easeIO(tt)); }

Particles read from cur, so one pool of ~260 dots becomes snow streaks, floating dust motes, or driven rain depending on where the fade is. Streak length drives the look: above 1 the particle is drawn as a line back along its velocity (rain, snow); at 0 it's a soft dot (dust). Coastal adds a periodic gust envelope that briefly surges speed and density; desert adds warm horizontal heat-shimmer bands behind the motes. The pointer nudges the wind vector. It's delta-timed so speed is frame-rate independent, capped at devicePixelRatio 2, and paused by an IntersectionObserver the moment the hero leaves the screen.

The SVG configuration morph

The tent diagram is three <g> groups in one SVG. Every path carries pathLength="1", so a single CSS rule can draw any line regardless of its real length. Switching terrain removes the active class from all groups, forces a reflow, then adds it to the new one so the stroke-dashoffset transition replays from scratch — the tent redraws itself:

.js .tent-svg path        { stroke-dasharray:1; stroke-dashoffset:1 }
.js .tent-config.is-active path { stroke-dashoffset:0;
  transition:stroke-dashoffset .7s var(--ease) }

configs.forEach(c => c.classList.remove('is-active'));
void g.getBoundingClientRect();   // force reflow → transition restarts
g.classList.add('is-active');     // members, then highlights, then callouts

Staggered transition-delays draw the structural poles first, then the orange-highlighted reinforcements (storm guys, shade spar, storm skirt), then the mono callouts fade in last.

The interactive patterns

Three controls carry the page, each grounded in a shipped product pattern:

Segmented control → Webflow / Amplemarket

A real role="tablist" with a machined pill and a sliding thumb (a CSS transform:translateX(calc(var(--seg-i) * 100%))). It uses roving tabindex and arrow keys, and selection follows focus — the Webflow-pricing / Amplemarket move where one tab swaps the whole panel below it. Here that panel is the photo, the diagram and the spec list, all at once.

Numbered rail → Sequence / Fourmula AI

Big Anton numerals 01–06 on a rail, the active one signal-orange with a hatch underline, done steps dimmed. It auto-advances every 6 s behind a thin delta-timed progress bar that pauses on hover, focus, offscreen or reduced-motion — and any step is one click or arrow-key away, carrying aria-current="step". It's the Sequence stepper crossed with Fourmula's oversized numbers.

Tier cards → Grok products

Flat, hairline-divided cards — one photo, mono model number, a short line, a mono spec table and a single CTA each. The middle card carries an EXPEDITION PICK flag and a thin signal top rule. Dark, quiet, one accent: the Grok-products pattern.

Details that matter

JS-off is whole — the first terrain config and all six pitch steps render from HTML/CSS; a .js class is what collapses the stack into interactive controls.
Scramble, not everywhere — eyebrows, stat values and spec readouts scramble from random glyphs to final text (a weather-radio static feel). Never body copy.
Reduced motion — the canvas paints one static scatter, text renders final, and every toggle swaps instantly with no crossfade.
Cut-tarp edges — a 1.2° clip-path on alternating sections, with a sliver of safety-tape hatch in one corner. Used sparingly on purpose.
Performance — DPR capped at 2, delta-timed motion, and every animation loop stops when its section is off screen.

[ 90.00°S / 0.00°E ] — one particle pool, three regimes, and a tent that redraws itself. The weather isn't waiting.

One canvas,three storms.