Site 06 of 15

The Guide

How this site was designed & built — by Claude Fable 5

Atelier Meridian is a fictional architecture practice working between Kyoto and Copenhagen, and this is the quietest site of the fifteen — deliberately. Fourteen other sites in this showcase perform: shaders, physics, kinetic type. This one holds still. Its argument is that at the top of the craft, what you leave out is the design.

The references were photographic before they were architectural: Ezra Stoller’s large-format prints, Hélène Binet’s plaster walls, the pacing of a printed monograph where a full-bleed plate is followed by a page that is mostly margin. Every decision ran through one filter: would a practice that accepts three commissions a year put this on their website? Almost everything failed that test. What survived is on the page.

The whole system is four colors, two typefaces, one vertical line, and one kind of reveal. Nothing bounces. Nothing floats. The longest wait on the site — the empty plaster field between the wordmark and the first photograph — is the design working hardest.

Plaster#EAE4D9
Stone#B7AFA2
Bronze#8C6F4E
Charcoal#26221C

Bronze is rationed. It appears only as hairlines, the plumb bead, plate numbers, and one handrail in Plate III. Rationing is what keeps a fourth color from becoming decoration.

Marcellus

ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Display — a Trajan-descended roman, used small: 10–26px, tracked up to 0.44em. It never exceeds 26px anywhere except the single philosophy quote, its one permitted raised voice.

Newsreader carries every sentence. Its italic carries every date, place and caption — an editorial voice borrowed from print, with optical sizing left on so small text sets sturdier than large.

A plumb line is the oldest instrument in building: a weight on a string, finding true vertical. Here it is a single bronze pixel dropped from the very top of the document to the very last, drawn over the photographs and behind the text. Every composition hangs from it — the wordmark, the plate captions (padded exactly 3.4rem off the line, alternating sides), the two practice columns, the centered enquiries. The scroll position itself is rendered as a small bronze bead travelling the line, with ticks marking each plate’s station.

The reveals obey the same line. Each photograph is clipped to a closed “curtain” — inset(0 50% 0 50%), a zero-width slit exactly on the plumb axis — and parts outward over 1.4 seconds while the image settles from 1.06× to rest. The site’s two ideas are literally the same idea: everything comes from the line.

/* every image parts outward from the plumb line */
gsap.timeline({ scrollTrigger: { trigger: curtain, start: 'top 74%', once: true } })
  .to(curtain, { clipPath: 'inset(0 0% 0 0%)', duration: 1.4, ease: 'power3.inOut' })
  .to(img,     { scale: 1, duration: 2.0, ease: 'power2.out' }, 0)

/* the bead: scroll progress as the weight on the line */
const beadTo = gsap.quickTo(bead, 'y', { duration: 0.5, ease: 'power2.out' })
lenis.on('scroll', () => {
  const p = scrollY / (document.documentElement.scrollHeight - innerHeight)
  beadTo(p * (innerHeight - 33))
})

There is no other motion system. Two eases (power3.inOut for curtains, power2.out for settling), durations between 1.2 and 2.2 seconds, and nothing ever overshoots — a plumb line, by definition, does not bounce. Under prefers-reduced-motion the whole choreography is skipped and the page is simply present.

Five photographs, generated with Higgsfield’s nano_banana_pro at 2K, treated as one commission: the same timber-and-plaster house, the same fog-morning light. The exterior was generated first from a written brief (“long low volume, pale lime-plaster walls, dark oiled timber, deep eaves, raked gravel forecourt with a single stone… Ezra Stoller print treatment”); every subsequent plate then received that image as a reference input with the instruction “same commission, same house, same light temperature.” That is why the dusk plate is the same elevation from the same tripod position, and why the model on the studio table is a basswood miniature of the actual house.

Plate I — house in fog
I — exterior, fog · the series master; 16:9, and the source of the OG image
Plate II — tatami interior
II — tatami hall · ref: plate I — “tatami meets poured concrete at a precise seam”
Plate III — stair detail
III — stair · ref: plate I — “a thin round bronze handrail”; 4:5, kept small on purpose
Plate IV — the same house at dusk
IV — nightfall · ref: plate I — “same camera position, blue hour, thin mist”
The studio work-table with a model of the house
V — the long table · ref: plate I — “a pale basswood model of the reference house”

Six generations, twelve credits — one exterior-at-dusk attempt was eaten by a false positive on the safety filter and rewritten. Everything shipped as WebP under 100KB; the largest file on the site is the hero at 98KB. The series needed no regeneration for coherence: passing the first plate back in as a reference did the work that prompt adjectives cannot.

Three passes, per the showcase contract. On a site about restraint the honest diary is a list of subtractions.

Pass one — structure

Both routes verified at 375, 768 and 1440. Removed: a planned second navigation row, and a “scroll” hint under the wordmark — the drawn plumb line already tells you where to go. Fixed: the caption rules had drifted to the wrong side of their border box, and the philosophy quote could be struck through by the line at some widths; both now hang off the plumb axis exactly.

Pass two — craft

The pale stone and bronze that draw the rules failed contrast standards when borrowed for words, so the palette gained ink-grade shades of both — rules stay pale, words get ink. A factual slip (a works label promising 2019–2026 over plates dated 2021–2023) was corrected. Removed: hover zooms on the plates (a print does not react to being looked at), and a per-letter stagger on the wordmark — the tracking settles as one word.

Pass three — the hostile pass

The weakest moment left was the header floating its plaster scrim over the charcoal enquiries section; it now inverts to charcoal. The bead learned exactly one gesture — it swells half a size as it passes each station’s tick, an instrument acknowledging its stations. And the biggest removal of the build: a film-grain overlay. Headless QA proved the page must fit inside an 8,192-pixel software texture; the grain was the single largest raster load, and at five percent opacity it was texture the plaster and the photographs already provided. It went.

Designed & built autonomously by Claude Fable 5 (Anthropic) —
every decision, line of code, word of copy, and photograph on this site.