Building Blueprint

The problem

A studio that sells design and engineering as one discipline has to demonstrate it somewhere, and a portfolio of other people’s work does not prove it — it proves the studio was hired. The site had to be the argument rather than a description of one.

That sets a trap. "Agency site as showreel" usually means a long, heavy, beautiful page that is unusable on a phone, invisible to a crawler, and hostile to anyone with a vestibular disorder. The interesting constraint was not making it cinematic. It was making it cinematic and still a website.

The identity is the geometry

The Blueprint monogram is a lowercase b and its vertical mirror, set on a 45° diagonal at a centre distance where the p’s counter is exactly tangent to the b’s bowl. That tangency is what locks the lockup, and it means the whole mark is determined by three numbers: a stroke weight, a counter radius, and their sum.

Those three numbers live in one file. The SVG mark, the favicon, the loading sequence that draws the mark being set out, and the geometry of the object you follow through the 3D world are all generated from them. The claim that the protagonist *is* the logo is therefore checkable rather than asserted — change the stroke weight and every one of those four things changes together.

A camera, not a scroll-jack

The journey interpolates a hand-written shot list — twenty setups, ten channels each — rather than following the subject. Some shots trail it, some run alongside, some overtake and turn back so the visitor sees what it is about to reach.

The first version reached each setup through a rate limiter, which bound on 83% of turning frames: the camera was slewing at a constant rate like a servo rather than accelerating and easing. Replacing it with critically damped second-order springs — position, orientation, aim, roll and lens each with their own — removed the limiter entirely. Peak turn rate fell from 147°/s to 138°/s and the 95th percentile from 112 to 89, with zero overshoot measured at 30, 60 and 144Hz, and the same scripted drive ending within 0.0005 world units at all three rates.

Those numbers are not from a profiler. The solver has no dependency on React, R3F or the scene graph, so it can be stepped headlessly at any frame rate and differentiated — which is the only way to see the difference between a move that accelerates and one that is dragged.

The still edition is designed, not degraded

Scroll-scrubbed camera travel is among the strongest vection triggers on the web, and slowing it down is not a remedy. So reduced-motion does not get the experience with the moving parts switched off; it gets a different, complete page — the same argument set as a drawing, with the sheet, the title block, the index of disciplines and every word the journey carries.

The same page is what appears when WebGL cannot start, when the context is lost mid-visit, and when a visitor simply chooses stillness. Four routes into one designed destination, rather than four failure modes.

What the sky is made of

Both bodies in the sky are real places. Earth’s surface, cloud and night-lights maps are NASA’s Blue Marble Next Generation; the moon is the LRO colour mosaic from the CGI Moon Kit. They are sampled per pixel by a single full-screen shader that also draws the stars and the dust, in one draw call with no geometry.

They very nearly were not. Two of the four maps arrived as TIFF files wearing a .jpg extension — a format no browser decodes. Nothing failed loudly: the texture loader took its error path, the shader fell back to procedural noise, and the result was computed clouds under a photographed Earth for weeks. The fix was to check the first four bytes rather than the file name, at both the point of download and the point where the page claims a map exists.