Site guide · one of 25 sites by Sapience Analytics

Magma — how it was made

A fictional volcanology field station whose researchers camp beside a live fissure. The page has one job: make you feel radiant heat through a screen, then read three field reports as if you found them in a tent.

Concept

Heat as interface

MAGMA is a seasonal research camp on the invented Vatnsfell Rift. The audience is anyone who has ever wanted to stand slightly too close to something dangerous and call it work. Every design decision flows from one physical fact: black basalt crust with incandescence underneath. The lava is not a backdrop — it is the site's temperament, and the typography, palette and copy all defer to it.

Palette

Basalt, then fire

Basalt#100C0APage ground. Warm near-black — cooled rock, not designer charcoal.
Crust#2E241ESolidified surfaces: cards, borders, the shader's cooled skin.
Incandescent#FF3D00 → #FFC530The only loud thing on the page. Reserved for heat: cracks, CTAs, live data.
Ash#9A938CInstrument labels and metadata — the grey of settled tephra.
Bone#EDE6DFHeadlines and lede copy. Warm white, high contrast on basalt.
Type

Compressed heat, exact instruments

Anton — the pressure

Display only, always uppercase. Its compressed, heavy forms read like something under geological pressure. The hero wordmark gets the one moment of typographic bravery: a vertical gradient clipped into the letterforms, so MAGMA appears to stand shin-deep in the flow, heat climbing the stems.

Inter — the notebook

Body, labels and data, with tabular numerals for every reading. Letterspaced uppercase at ~0.7rem does the instrument-panel voice: station codes, UT timestamps, flux figures. The contrast between Anton's roar and Inter's restraint is the whole typographic system.

Techniques

What is actually running

The lava shader (signature)
Raw WebGL — no three.js — drawing one fullscreen triangle with a fragment shader. A 5-octave value-noise fbm is domain-warped twice (q then r fields, the classic Quílez construction) to produce a slowly churning heat field. Cooler regions solidify via smoothstep into a crust rendered in basalt tones; a second, ridged fbm (1−|2·fbm−1|) lays a seam network over that crust, and a spatially-offset sine gate widens and narrows the seam threshold over a ~14-second cycle — so the crust visibly cracks orange, seals grey, and cracks again, each region on its own phase. Heat maps through a three-stop palette: deep red → #FF3D00#FFC530. The pointer injects a local heat plume that lowers the crack threshold under the cursor, so the crust opens where you touch it. Rendered at 0.8× of a DPR-capped-at-2 buffer, paused when off-screen or the tab hides, one static frame under reduced motion, and a layered CSS-gradient scene stands in if the context fails.
Seismograph strip
Canvas 2D ring buffer. Background tremor is a mean-reverting random walk; every 6–20 s an event fires — a decaying two-frequency sinusoid with noise — annotated with a magnitude marker and logged with a UT timestamp and depth. Roughly once a minute a "harmonic tremor" episode swells the background noise for several seconds. Two stroke passes (wide low-alpha, thin core) fake a phosphor glow cheaply.
Burnt-edge field reports
No images: each report card is clipped by a ~50-point irregular polygon (torn paper), darkened at the rim by stacked radial gradients and an inset shadow (char), with a notch bitten out of the top-right corner where a radial ember gradient smoulders on a slow pulse. Hovering lets an ember creep along the bottom edge.
Choreography
GSAP + ScrollTrigger. One orchestrated load sequence (eyebrow → wordmark → lede → readouts → cue), then quiet single-purpose reveals per section, ember divider lines that draw themselves, and counters on the station stats. Everything on power3/power4 eases; nothing loops except the lava and the ground itself.
Iteration log

Three passes with a fine-tooth comb

Pass 1 · Craft

  • Rendered the shader to a pixel histogram and found only 29% dark crust — the field read as "molten with islands" rather than "crust barely holding". Raised the solidification threshold (smoothstep(0.60, 0.44)) to 36% crust; the veins now read as cracks in rock, and the hero text sits on more quiet dark area.
  • Fixed the min-height fallback order on the hero — 100vh was declared after 100svh and silently won, which would have caused address-bar jump on mobile.
  • Tightened copy: cut two adjectives from the lede, renamed report FR-043 from "Listening to glass" to "Glass on the wind", made every stat label concrete (elevation "camp A", samples "archived").

Pass 2 · Depth

  • Enriched the signature: the pointer now injects a local heat plume into the shader — the crust melts open under your cursor and re-seals when you leave, with the strength eased in and out so it feels thermal, not digital.
  • Added the second-read detail: about once a minute the seismograph enters a "harmonic tremor" episode — the background trace visibly swells for eight seconds and a tremor onset line appears in the event log. You only notice if you stay.
  • Verified the reduced-motion seismogram: its archived event marker was floating mid-strip away from the actual waveform; pinned it to the ringdown at the left edge.

Pass 3 · Hardening

  • Both canvases now pause via IntersectionObserver when scrolled out of view, on top of the document.hidden pause — scrolling the reports section costs no shader time.
  • Chanel rule: removed the ember drop-cap on the station paragraph. It was a third voice the type system didn't need; Anton and Inter argue better alone.
  • Re-checked 375 px: wordmark clamps to 80 px and fits with margin, nav collapses to brand + Index, report cards stack single-column, instrument rows re-stack with status first. Ran the inline script through a syntax checker and compiled the GLSL against a live WebGL context: clean.