Blueprint,
in motion.

The object is
the argument.

The home page refuses a conventional product image. Its central object is a sectional drawing of the Gannet Tidal Ratchet, a mechanism intended to harvest the small reversal of a harbour tide. It has five separate pieces because the site is about the explanation of a machine, not the hero shot of one.

Technical lettering is intentionally quiet around the drawing while the condensed titles are large enough to feel like labels stamped onto a plan chest. Red is reserved for measurements, status, and things that have changed.

Exploded view,
actually calculated.

The illustration is inline SVG—not a poster with an animation laid over it. Each component begins from its engineering position and carries a prescribed x/y travel vector. The animation updates those transforms at a constant rate, then recalculates the dimension endpoints and their numeric readouts from the resulting spread.

function setDash(line, length, reveal = progress) {
  line.style.strokeDasharray = String(length);
  line.style.strokeDashoffset = String(length * (1 - reveal));
}

function draw(p) {
  progress = Math.max(0, Math.min(1, p));
  const leaderReveal = Math.min(1, progress * 1.55);
  const left = 387 - 154 * progress - 80;
  const right = Math.max(829, 738 + 150 * progress);

  parts.forEach(({part, dx, dy}) =>
    part.setAttribute('transform',
      `translate(${dx * progress} ${dy * progress})`));
  mainDim.setAttribute('d', `M${left} 524H${right}`);
  leaderPaths.forEach(({line, length}) => {
    setDash(line, length(progress), leaderReveal);
    line.style.opacity = String(Math.min(1, progress * 2.2));
  });
  measure.textContent = `${Math.round((right - left) * 1.26)} MM`;
}

The range control is a genuine inspection tool: drag it to stop on any intermediate assembly state. The drawing starts only while in view and pauses when the page is hidden or the section leaves view. A reduced-motion preference opens it already separated rather than running the motion.

Ink, chalk,
and correction.

The title face is Barlow Condensed, a compact engineering sans with enough structure to survive very large type. IBM Plex Mono carries measurements, archive numbers, controls, and body copy; its mechanical rhythm makes each annotation feel accountable.

What changed
on the board.

Pass 1 — correctness

• Animation lifecycle: the hero now waits for a visible drawing zone, starts after a 120 ms handoff, completes in 2.2 seconds, and pauses without leaving a live animation frame when the tab or drawing is hidden. It resumes from its current position when visibility returns; the range control deliberately keeps its manually selected position.
• Motion safety: the code now has an IntersectionObserver fallback and listens for a live reduced-motion preference. Reduced motion renders the final exploded state and never starts the animation.
• Drawing and controls: leader dash lengths are calculated from the changing paths instead of reusing stale lengths. The main measurement and dimension strokes now reveal with the separation, while the range and Replay controls have 44 px targets.
• Small screens and access: the tablet breakpoint is 800 px, not a narrow 760 px gap. Fine SVG engraving is intentionally hidden below that breakpoint rather than rendered at sub-legible sizes; the main measurement remains. Skip links, reliable grid stacking, and 44 px footer/header links were added.
• Known limitation: secondary SVG callout text is omitted below 800 px to protect legibility, so the compact drawing prioritizes the mechanism, travel axes, and main measurement over every archival note.

Pass 2 — design depth

• Weak moment 1 — repeated section cadence: archive and method both arrived as the same modest section label, display heading, and regular grid. The archive is now a bleeding flat-file drawer with a red catalogue spine, while the method becomes a measured three-part header and deliberately uneven stage matrix.
• Weak moment 2 — a timid type and spacing hierarchy: the display faces had too little contrast after the hero, and every section was given the same generous pause. Titles now use tighter engineering tracking, balanced wrapping, and a larger scale ceiling; a named spacing scale gives the premise, archive, method, and inquiry desk distinct intervals.
• Weak moment 3 — the blueprint stopped at its frame: its axes and dimensions were precise, but the five components were not individually asserted. Red travelling part markers now move with every component, the figure metadata states its five-part/two-axis construction, and red catalogue and inquiry tabs extend the drawing’s annotation language into the rest of the page.

Pass 3 — complexify

• New interactive layer — raking-light reader: the archive now opens onto a second, below-fold inspection moment. Visitors choose one of three recovered marginal notes, then sweep a red scan blade across a technical detail to reveal its exact trace. The overlay uses an SVG clipping window, not a swapped image, so the light angle can be held at any point.
• An honest edge state: the reader begins as clean glass, with no note pinned and the light disabled. “Clear the glass” returns to that state after an inspection; the copy makes the absence feel like archival restraint rather than an abandoned interaction.
• Finish work: animated leader and dimension layers now begin hidden in the SVG, preventing their first frame from flashing before JavaScript takes control. Page and build-record metadata were rewritten for the invented archive and given Open Graph titles and descriptions. The new reader follows the existing focus treatment and immediately reveals a stable partial trace when reduced motion is requested.