How we set № 17.

Every site in this collection starts from a place, not a wireframe. Ours was a working letterpress on Lebuh Chulia, Penang — a shop that has stood at one address since 1938. The whole page had to prove one thing: that a website can set your words in lead and pull you a proof while you watch.

Movable-type kinetic assembly. Not a typing animation on top of a picture — a real type case that composes what you write.

The upper case holds every capital, figure and point in its historical order — that's where the name comes from. As you type, the page diffs your line against the sorts already set in the stick. A new letter flies out of its own box in the case and lands in the composing stick; a deletion settles back. Every sort is cast mirror-reversed — scaleX(-1) — exactly as metal type sits before it prints, so the stick reads backwards and the proof reads right. Pull the press and an ink-roller sheen sweeps the set line, the platen kisses, and the proof drops with a real letterpress bite — ink pressed into the sheet, not laid on top.

The clever part is the diff. Rather than rebuild the whole line on every keystroke, the engine finds the common prefix and only adds or removes the sorts that actually changed — so an append flies one new letter, a grapheme-safe backspace settles one complete character, and only a mid-line edit rebuilds. Letters and ornaments share one 22-character measure without splitting joined emoji. That is the true heart of the assembly, pulled straight from the shop's own source:

/* sync engine — single source of truth is the input value */
function sync(){
  var want = normalize(inp.value);
  var canonical = want.join("");
  if(inp.value!==canonical) inp.value=canonical;
  var cur  = chars.map(function(o){ return o.ch; });
  // how much of the line is unchanged?
  var common=0;
  while(common<cur.length && common<want.length && cur[common]===want[common]) common++;

  if(common===cur.length && want.length>cur.length){
    // pure append — fly the new sorts in from the case
    for(var i=cur.length; i<want.length; i++) addChar(want[i]);
  } else if(common===want.length && cur.length>want.length){
    // pure delete — settle the last sorts back
    for(var j=cur.length; j>want.length; j--) removeLast();
  } else {
    // a mid-line edit — reset the stick and re-compose
    slots.innerHTML=""; chars=[];
    want.forEach(function(c){ /* place each sort */ });
  }
  updateMeta();
}

Excerpt from the shop's own index.html. The comments are the printer's: a compositor only touches the sorts that changed.

The first draft is never the reason these pages look the way they do. The loop is. Each pass shoots the real page on desktop and mobile, reads it like a hostile art director, fixes everything, then adds one deliberate upgrade.