Making / 04

A grid in motion.

The site is an archive interface before it is a gallery: words, measurements, and a coordinate system for looking closely at public typography.

01 / Concept

A poster archive without poster pictures.

Basel Signal borrows the moral clarity of the posters it documents without pretending to reproduce them. Type is the only image. The page’s visible twelve-column grid makes its system legible, while the copy speaks to paper, scale, printing, and the formal decisions that scans routinely erase.

02 / Technique

Type enters on a single axis, then locks.

Each headline is measured at load, once after fonts settle, and on resize. Scroll position produces a 0–1 local progress value. That value reduces either an X or a Y offset to zero; it never combines them. The red block uses the same scroll progress to walk a route whose every leg is horizontal or vertical.

function pointOnRoute(progress) {
  const scaled = clamp(progress, 0, 1) * (route.length - 1);
  const leg = Math.min(Math.floor(scaled), route.length - 2);
  const local = scaled - leg;
  const from = route[leg];
  const to = route[leg + 1];
  return { x: from.x + (to.x - from.x) * local,
    y: from.y + (to.y - from.y) * local };
}

const progress = clamp((window.scrollY - (item.top - viewport * .76)) /
  (viewport * .58), 0, 1);
  const offset = (1 - easeOut(progress)) * item.distance *
  (item.axis === 'x' ? track : row);
item.element.style.setProperty(item.axis === 'x' ? '--slide-x' : '--slide-y',
  `${offset}px`);

03 / Tokens

Only paper, ink, signal.

Paper
#FFFFFF

Ink
#111111

Signal red
#E1140A

Helvetica Neue / Helvetica / Arial / Roboto
300 · 400 · 500 · 700 · 900

04 / Passes

What changed in three passes.

Pass 1 — correctness

Replaced invalid parsing of the CSS clamp() gutter with measured viewport values, restoring all 13 grid lines and the red marker route.
Re-measure after fonts settle; cancel a queued frame while hidden and resume only when the document is visible.
Added 44 px link targets, mobile-safe code scrolling, landmark navigation, and this page’s reduced-motion rule.

Pass 2 — design depth

Repeated section rhythm: the archive, reading room, principle, and visit sections all staged a large heading above supporting copy. The index is now a full-width catalogue, the reading room is organised around a cropped format measurement, the principle becomes an overlapping manifesto, and visit is pinned by a red appointment flag.
Underpowered type: display copy relied on natural wrapping. Every key headline now has intentional lines, tighter display tracking, deeper scale contrast, and controlled edge bleed.
Passive signal red: the travelling block read as a small ornament. It is now a chapter-aware locator, scaled to the grid, while the red is carried into the stage line, the word “noise,” and the opening-hours flag.

Pass 3 — complexify

Added a second encounter: “Set a signal” turns the grid into a small typesetting bench. On larger screens, picking any of 36 intersections moves the word vertically to its baseline, then horizontally to its column; the path never cheats diagonally. The phone version samples every other column so each control stays at least 44 px wide.
Designed the empty state: the sheet begins quiet, names the required action, and offers a disabled clear control until a coordinate exists. Reset returns both the word and every pressed cell to zero.
Finished the delivery: added share metadata, protected the interaction from resize drift and reduced-motion settings, and re-checked the mobile clipping rules, focus visibility, and final copy.