01 · Creative premise
An archive that refuses to restore.
TECTONIC is a fictional 1979 survey of five brutalist monuments. Each building has an architect, coordinates, a pour year, condition notes, and one recovered silver-gelatin plate. Three more structures survive only as damaged register entries.
The archive never beautifies the concrete. It records weight, weather, and the marks left by formwork.
The fiction gives every visual decision a reason. Safety orange belongs to survey marks. Monospace type belongs to coordinates and field data. Oversized Anton behaves like stamped institutional lettering. The grid remains visible because this is a measured record, not a lifestyle gallery.
02 · Information architecture
Five plates. One doctrine.
Poster, evidence, premise
The hero announces the archive at institutional scale, then offsets the wordmark with one portrait plate and a compact survey ledger.
The argument before the catalog
A short manifesto explains why the archive exists before asking the reader to inspect individual buildings.
Alternating field entries
Five asymmetric image and data pairings create the page rhythm. Each entry carries a description plus one specific field note.
Standing and lost records
Fine pointers pull a matching plate beside the row. Touch users receive the complete readable register without a fake control.
03 · Signature interaction
Make the surface remember the pour.
On desktop devices with a fine pointer, each photograph is mirrored into a three.js plane. A fragment shader reads pointer velocity, distance from the cursor, and scroll momentum. The pixels drag, ripple, and briefly warm at the point of agitation.
float falloff = smoothstep(0.6, 0.0, distance);
float charge = clamp(falloff * velocity, 0.0, 1.0);
uv -= pointerVelocity * charge;
uv += rippleDirection * sin(distance * 30.0 - time * 5.0);
color = mix(color, warmConcrete, charge * 0.22);The shader does not sit behind a decorative canvas. Every plane tracks the real image rectangle, including its crop and scroll position. When WebGL is unavailable, the original image remains the complete experience.
04 · Performance strategy
Heavy material, light runtime.
No WebGL on touch or reduced motion
The module exits before downloading three.js on coarse pointers, narrow screens, and reduced-motion sessions.
Textures load only when needed
An IntersectionObserver uploads a plate when its figure approaches the viewport. Lower photographs keep their native lazy-loading behavior.
No perpetual layout loop
Parallax measurements run inside a requestAnimationFrame scheduled by scroll, not sixty times per second while the page sits still.
Context loss reveals the photographs
If WebGL fails after startup, every hidden image returns immediately and the canvas is removed.
05 · Accessibility and mobile
The archive works without the effects.
The initial version hid the native cursor, used low-contrast microtype, mismatched mobile table headers, and described hover interactions to touch users. The release pass removed the custom cursor entirely and treated every effect as progressive enhancement.
Separate ink for light and dark concrete
Muted metadata now uses measured dark ink on concrete and a lighter archival gray on carbon. Safety orange remains a physical mark; accessible burnt orange carries small text on light surfaces.
Headings, captions, and scoped columns
The archive table has a caption and column scopes, with no focusable rows pretending to be controls.
Content remains visible
A no-JavaScript mode removes the loader and reveals every scroll section. Missing scripts never leave an empty archive.
Instructions match the device
Desktop labels explain pointer-only enhancements. Touch labels describe the actual field records instead.
06 · Production process
Three passes before release.
Composition and readability
- Separated light and dark contrast tokens.
- Repaired the mobile table and clarified touch labels.
- Added semantic headings, image dimensions, archive caption, canonical metadata, and a skip link.
Interaction and performance
- Removed the custom crosshair cursor and retained the material interaction.
- Replaced the perpetual layout loop with scroll-ticked frames.
- Gated three.js, loaded textures near the viewport, lowered renderer density, and added context-loss fallback.
Accessibility and release QA
- Verified desktop, mobile, reduced motion, no JavaScript, and WebGL fallback states.
- Checked navigation, guide rewrite, social metadata, thumbnail crop, and registry.
- Ran the production build, independent review, live smoke test, and error scan.
07 · Authorship
Built by models. Directed by a person.
This portfolio is a transparent demonstration of AI orchestration. Credit follows the work performed.
Claude Fable 5 created TECTONIC's fictional archive, copy, visual system, five-plate structure, and first WebGL implementation.
Codex completed the production audit, accessibility and performance rebuild, guide, thumbnail, portfolio integration, verification passes, and deployment.
Viron Gil Estrada commissioned the 25-site experiment, set the quality bar, owns the platform, and chose the one-site-at-a-time release discipline.
Concrete gray, carbon, safety orange, one portrait ratio, and no effect that can hide the underlying archive.