Making aging legible in a browser.

Continuum looks like a clinical product — a rotating drug molecule, a live biomarker panel, a phased pipeline. Under it: one HTML file, one stylesheet, one ES module, and no build step. Three ideas carry the whole page.

The idea

A longevity company sells one uncomfortable, hopeful premise: that biological age is a number you can move. So the site has to feel measured and instrumented, not aspirational. Every hero claim is a readout — a modelled biological age with a signed delta, a biomarker graded against its optimal band, a program plotted on a development rail. The molecule at the top is the therapeutic made tangible before a single word of copy is read.

The stack

Plain HTML / CSS / vanilla ES module. No framework, no bundler. The page is fundamentally text, SVG, and one WebGL canvas — a build step would only add weight.
three.js 0.160 (via an importmap + dynamic import()) for the molecular model — loaded only when WebGL is present and motion is allowed.
Hanken Grotesk / Inter / IBM Plex Mono — a tight geometric grotesque for display and big data numerals, Inter for reading, and a mono for every clinical label, code, and axis tick.
Signature easing cubic-bezier(.22,.86,.16,1) — a fast departure with a long, clinical settle, used on every reveal, fill, and marker.

Signature technique — the rotating molecular model

The hero is a procedurally generated molecule. A CatmullRomCurve3 through six random control points becomes a smooth backbone; atoms are sampled along it, side-chains branch off every third atom, and bonds connect the graph:

const curve = new THREE.CatmullRomCurve3(seed, false, 'catmullrom', 0.5);
for (let i = 0; i < 26; i++) {
  const p = curve.getPoint(i / 25);           // backbone atom
  atoms.push({ pos: p, r: i % 6 ? 0.24 : 0.34, glow: i % 6 === 0 });
  if (prev >= 0) bonds.push([prev, i]);       // bond to previous
}

Every atom is one draw call, not dozens: a single InstancedMesh holds all spheres, with a per-instance matrix and colour. Bonds are a second instanced mesh of unit cylinders, each rotated onto its bond axis with a quaternion:

q.setFromUnitVectors(up, dir.normalize());     // align +Y to the bond
m4.compose(midpoint, q, scale.set(0.05, length, 0.05));
bondMesh.setMatrixAt(i, m4);

Depth Fog in the steel background colour sinks the far side of the molecule; a cyan and a mint PointLight plus additive halo spheres give the clinical glow. The group auto-rotates slowly and accepts pointer-drag with inertia. The loop caps devicePixelRatio at 2, pauses on visibilitychange, and disposes geometries and materials on pagehide — it holds 60fps with no console noise.

Feature gate: the model is only created when webglOK() passes and the visitor hasn't asked for reduced motion. In every other case a hand-authored static SVG molecule — already in the DOM — is what shows. No JavaScript, no WebGL, reduced-motion: all fall back cleanly.

The other two moving parts

The biomarker trend chart is pure SVG built from a 12-point array. A target band is a dashed rect; the line is drawn on by animating stroke-dashoffset from its total length to zero when it scrolls into view; dots fade in on a stagger. Reduced motion skips straight to the final frame.
The pipeline reads each program's phase from a data-phase scalar, maps it to a percentage of the five-phase rail, and animates the fill width and phase node into place. The axis columns and the row track share the same --lead column so they line up exactly.
Biomarker cards position an optimal band and a "you are here" marker as percentages of each marker's own reference range — so a value inside the green band reads as optimal at a glance.

Details that matter

Progressive enhancement. The .js class gates every reveal; with scripts off, all content — pipeline, cards, chart labels — is present and readable.
Reduced motion disables the molecule entirely, freezes reveals, and renders the chart and pipeline in their resolved state.
Accessibility. Real aria-labels on the model and chart, decorative layers marked aria-hidden, visible :focus-visible rings, and WCAG-contrast text on the steel palette.
Honest instrumentation. The numbers are illustrative of a concept — the biological-age figure, biomarker values, and pipeline positions are modelled, not clinical.

Ship it on GitHub Pages

Every path is relative and there is no build, so deploying is three commands:

gh repo create continuum-health --public --source . --push
gh api --method POST /repos/USER/continuum-health/pages \
  -f 'source[branch]=main' -f 'source[path]=/'
# live at https://USER.github.io/continuum-health/ in ~1 min

A .nojekyll file keeps Pages from touching the folder structure. That is the whole deploy.

Continuum Health is a design-showcase concept. It runs no clinical trials, collects no data, and provides no medical service. See the repository README for the full demo-vs-real map.

← Back to Continuum Health