Catalogue / Plate 14← All plates

Built from nothing, layer by layer

Built from nothing, layer by layer: the desk, then the person, then the screens.

14 / WebGL · scroll

An empty home office: a leather chair at a long wooden desk with a mug, pens and a notebook, shelves and plants behind, and a window.

As the page scrolls, an empty desk is built up: two monitors, a keyboard, a mouse and a small computer go in as bare circuit boards, then are closed up with their screens dark. Then a man is built at the desk: a skeleton in the chair, nerves spreading from the brain, blood vessels from the heart, muscle, skin and a T-shirt, then his jacket. Last, the screens switch on.

COR IntelligenceAn empty desk

Built, layer by layer.

Scroll to build it, or press play. Rest the pointer anywhere for an x-ray.

layers decoded … · built 0%

Remake it

Build one interactive web page: An empty desk is built up as you scroll: two monitors, a keyboard, a mouse and a small computer go in as bare circuit boards, tile by tile, and are closed up. Then the person is built at it: bone from the hips, nerves from the brain, blood from the heart, then muscle, skin and clothes, each layer spreading through the body from where it starts. Last, the screens switch on. Resting the pointer is an x-ray: bones and boards under whatever is there.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A founder or team page with a sense of humour, a product launch that wants to show what is inside, a studio's about page. Anything where how it is made is the story. Do not let it fail the way this kind of piece usually does: Layers that do not line up, or a front that jumps across a gap. Here every layer is an edit of the one photograph, measured to within 0.7px before use; each layer spreads along a shortest path inside the figure's outline, so it never jumps from an arm to the chest; and outside the figure and the kit the photograph itself shows throughout.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
When it suits
A founder or team page with a sense of humour, a product launch that wants to show what is inside, a studio's about page. Anything where how it is made is the story.
When it does not
A serious or clinical subject where anatomy would jar, and anywhere a visitor needs the person or the product at once rather than after a scroll.
How it fails
Layers that do not line up, or a front that jumps across a gap. Here every layer is an edit of the one photograph, measured to within 0.7px before use; each layer spreads along a shortest path inside the figure's outline, so it never jumps from an arm to the chest; and outside the figure and the kit the photograph itself shows throughout.

Measured on: landonorris.com · T9 · landonorris.com · T11. Built from scratch on Pete's own photograph, at his request; nothing here comes from the site studied.