A building that exists only as volumes.

Vantage Point Studio is an architecture portfolio with no photographs at all. The work is argued the way architects argue it — massing studies and drawings — in one HTML file, one stylesheet, one script, and one three.js scene.

The idea

Architecture portfolios lean on photography, which a fictional practice doesn't have. But the tools architects use before photography exist are actually better on the web: a massing model rotates, a plan is an SVG. So the site treats the browser as a drafting table. The hero is an abstract white massing study on warm concrete; the project index is pure typography; and hovering a row rebuilds the model into that project's volumes. Six projects, one scene, zero images.

The stack

Plain HTML/CSS/JS — no framework, no build. The page is readable with scripts off: a hand-drawn SVG axonometric stands in for the model.
three.js 0.160 via an import map and a guarded import('three') — if the import fails, WebGL is missing, or the visitor prefers reduced motion, the SVG stays.
Archivo 200–400 / Inter / Space Mono — a thin refined grotesque for display, a workhorse for body, a mono for coordinates, areas and plate numbers. Facts live in mono everywhere, the way they do on a drawing's title block.

Signature technique — procedural massing + hover-swap morphs

Every project is just an array of volumes — centre, footprint, height, base level — in abstract site units on an 8×8 plot:

{ name: 'TERRASSHUSET',
  vols: [ // [cx, cz, w, d, h, yBase]
    [0,    0,   4.6, 3.2, .75, 0   ],
    [0.4,  0.3, 3.6, 2.5, .75, .75 ],
    [0.85, 0.6, 2.6, 1.9, .75, 1.5 ],   // terraces step up…
    [1.3,  0.9, 1.6, 1.3, .75, 2.25],
    [-1.6,-0.9, .75, .75, 3.4, 0   ],   // …around one core
] }

The scene owns a fixed pool of eight unit cubes, each with an EdgesGeometry line child so the thin ink edges scale with the box for free. A composition is applied by scaling and positioning the pool — volumes a project doesn't use collapse to zero inside the new footprint:

const m = new THREE.Mesh(boxGeo, white);
m.add(new THREE.LineSegments(edgeGeo, inkLine)); // edges ride along
m.scale.set(w, h, d);
m.position.set(cx, yBase + h/2, cz);

Hovering (or focusing — keyboard users get the same swap) a row in the index tweens every cube from its current transform to the next composition with a 45 ms stagger and a quint-out curve — precise and architectural, nothing bounces:

row.addEventListener('pointerenter', () => select(i));
row.addEventListener('focus',        () => select(i));
// in the render loop, per cube:
const k = 1 - Math.pow(1 - t, 5);          // ease-out quint
m.scale.x = from.sx + (to.sx - from.sx) * k; // …and so on

The rest of the scene is deliberately cheap: an orthographic camera (an axonometric drawing, not a fly-through), a hemisphere + directional light on near-white MeshStandardMaterial, a contact shadow that is one radial-gradient canvas texture on a ground plane, and a hairline LineLoop square as the site boundary. A very slow turntable (0.11 rad/s) runs until you drag, and the same viewer stays position:sticky beside both the hero and the index, so the model never leaves the page while you read the work.

Details that matter

The fallback is drawn, not apologised for. No WebGL, failed CDN, or reduced motion → a static SVG axonometric of the same massing language, present in the markup from the first byte.
Plates are authored SVG. Six plans/sections drawn with a five-stroke vocabulary (wall / thin / faint / dashed / poché) plus one convention borrowed from real practice: new work is drawn in red. Each plate carries a mono title block, and the gallery is a drag strip — pointer-drag on mouse, native scroll on touch, arrow keys when focused, with a hairline progress rule.
Discipline in the renderer. Device-pixel-ratio capped at 2, the loop pauses when the viewer scrolls off-screen or the tab hides, and geometry, materials, textures and the renderer are disposed on pagehide.
Idle rows dim; the active row carries a sienna numeral — state is opacity, not ornament. Sienna appears exactly four ways on the whole site: kickers, the active index number, north arrows, new-work lines.

Ship it on GitHub Pages

Every path is relative and there is no build step, so deploying is three commands:

gh repo create vantage-point-studio --public --source . --push
gh api --method POST /repos/USER/vantage-point-studio/pages \
  -f 'source[branch]=main' -f 'source[path]=/'
# live at https://USER.github.io/vantage-point-studio/ in ~1 min

A .nojekyll file keeps Pages from processing the folder. That's the whole deploy.

Vantage Point Studio is a design-showcase concept — the practice, projects, awards and addresses are fictional. See the repository README for the demo-vs-real map.

← Back to Vantage Point Studio