One idea, one page, one transformation
The premise is simple to say and awkward to build: on every page of this site, a machine sits full-screen and transforms into a different machine as you scroll. The home page turns a turbine into a drone. Projects turns a rally car into a robotic arm. Principles turns an atom into a planet. This blog turns a microscope into a telescope. Kharon turns a chronometer into a compass. The scroll bar is the timeline. You are not scrolling past the object — you are scrubbing through its transformation.
Two rendering universes, one skeleton
The site is built twice, and compared side by side. Version A renders the objects as machined parts, annotated like an engineering drawing — dimensions, tolerances, section cuts. Version B renders the same transformations as LiDAR point clouds, annotated like scan metadata — point counts, confidence values, sweep rates. The trick is that the two versions share every line of layout code. The only differences are which image sequences load and how the floating labels read. One skeleton, two skins, an honest A/B test.
It is a video, scrubbed frame by frame
There is no 3D engine here. Each transformation is rendered ahead of time to a sequence of still frames, and the page draws the frame that matches your scroll position onto a single canvas. Frame one loads instantly as a plain image so the page is meaningful before anything else arrives; the rest decode in the background, nearest-to-your-position first, so scrubbing never flashes black. It is the oldest trick in cinema — a strip of frames pulled past a light — wearing a scroll bar instead of a projector.
The engineering-document aesthetic
The whole site reads like a technical document that happens to move. Monospaced type for anything that measures or labels. A near-black background with a single accent red. Hairline connector lines from each label to the part it names. Copy that pins to specific moments in the transformation and fades out when that moment passes. The goal was never decoration for its own sake — it was to make the interface feel like an instrument, precise and legible, where every element looks like it is reporting a real number.
Built to swap in the real thing
This page is part of the skeleton. Right now it runs on placeholder frames — a red element orbiting a dark field, stamped with a frame number — so the whole experience works end to end before the real renders exist. When those land, nothing in the code changes: the frames drop into place on disk and a single manifest file updates its counts. The architecture's one job was to make the real machines a content change, not a rebuild. That constraint is why the site could ship as a working shell first, and become cinematic second.