How this museum was built

The concept

One thesis, locked before any code: a museum for artifacts that cannot exist. Everything obeys it. The palette is a dark hall (charcoal walls, bone inscriptions, brass plates); the typography is lapidary Marcellus over Newsreader; the light is diegetic, always a spotlight pool, never a glow. A design document fixes tokens, type scale, motion vocabulary and five banned patterns before the first component is written.

The hall

The signature moment is one CSS mechanism. The hall section is 550vh tall and exposes a named view-timeline. Inside it, a sticky 100vh pin holds a horizontal track. The track's keyframes travel from zero to the track's own overflow:

.hall { height: 550vh; view-timeline: --hall block; }
.hall-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }

@keyframes hall-glide {
  to { transform: translateX(calc(-100% + 100vw)); }
}
@supports (animation-timeline: scroll()) {
  .hall-track {
    animation: hall-glide linear both;
    animation-timeline: --hall;
    animation-range: contain 0% contain 100%;
  }
}

In modern engines the browser drives the glide off the scroll position, off the main thread, with no JavaScript at all. Engines without scroll-driven animations are feature-detected with CSS.supports and get a small requestAnimationFrame driver with lerp smoothing that writes the same transform through the CSSOM. Each plinth is lit by an IntersectionObserver as it enters the viewport, in both modes; focusing a plinth link with the keyboard scrolls the page to the offset that brings that plinth into the pin, so tab order and the glide never disagree. Underprefers-reduced-motion the hall collapses into a calm vertical gallery: every object visible, nothing moving, nothing lost.

The morph

Clicking an object hands it to the View Transitions API. Each artifact image carries the same transition:name in the hall and on its catalogue page (obj-{slug}), so Astro's client router morphs the object from its plinth into the plate while the rest of the page dissolves around it. Browsers without view transitions simply navigate; the museum works as plain multi-page HTML.

The objects

The six artifacts are an AI image family (Recraft v4.1, the two heroes on the pro model), held together by one rigorously repeated prompt formula: the object changes, the museum never does.

museum artifact photograph, [the impossible object],
displayed on a dark charcoal plinth,
single warm spotlight from upper left,
deep near-black background,
faint dust motes in the light beam,
hyperdetailed, museum catalogue photography

Every candidate was inspected at full resolution; weak or incoherent takes were regenerated rather than masked, because a consistent near-black ground is what lets the images sit in the hall as if lit by the same lamp. Every prompt, model, size and curation decision is captured verbatim in the repository's prompts/ folder: the design brief, the technical brief and the full image log.

The three passes

1. Pass I · The fine comb

   A defects pass. Every screenshot studied at two viewports: spacing breaks, contrast edges, load order, console noise, the reduced-motion state. Anything that stands between the visitor and "finished" is fixed first.

2. Pass II · Complexify

   The inverse question: where does the site deserve more depth, more layering, more nerve? Light pools, glass reflections, the progress rail, the register, micro-movements in the inscriptions. This is the pass that turns a tidy site into a showcase.

3. Pass III · Cohesion and reduction

   Does everything speak with one voice? Whatever pass two made too busy is taken out again. The end check runs against the locked design document: banned patterns respected, signature moment intact, copy gates green.

Only after pass three does a human see the site. The hard gates never move: Lighthouse accessibility 100, zero axe violations, AA contrast on all running text, a complete reduced-motion experience, a strict content security policy and a payload budget the spotlights have to live inside.