How it’s built
How andrewreff.com is made: one block, one scroll loop, the way from page to page, and the checks every deploy runs.
This site is a design file I could walk through. Everything in it is built from one block, and everything is measured before it goes out. Here is how.
One object. The block.
Everything on the site is built from one block or drawn from it. In the tunnels it is built in three.js, every block on one two-unit grid so no half tile stands at a corner. On the paper it is drawn, cube by cube, in an isometric hand of my own. The full stop of the opening’s sentence becomes the first cube, and the same marked block comes back over the door of the approach, down the awards, in the finale and at the foot of every page.
The opening. Held by position.
One masonry of some three thousand blocks, four rooms with their films, and a camera on a smooth path through poses placed by hand. The stage is held fixed through its room, not by sticky positioning, which slipped a pixel on alternate frames in an iPhone’s momentum scroll. Every program is compiled before it is seen, and each frame is painted inside the animation’s own frame, so the blocks never step at half the rate.
One scroll loop. For the whole shell.
The masthead, the progress line, the floating Let’s talk, the fold’s record of where you are and a case’s scenes all read the page once a frame, then write once. Nothing reads the layout after something has written to it, so the browser never lays the page out twice inside a frame.
Page to page. Paper, or the film.
A page change is two sheets of paper that carry the arriving page’s name. From a room or a card to its case, the way in is through the film itself, and Back comes out the same way. Scrolling is restored by the site, not the browser, so Back puts you where you were, behind the cover, once the page can take it.
Measured. On every deploy.
A deploy builds the site, then holds it to the bar before anything is sent: WCAG 2.2 AA over every kind of page at two widths, and Lighthouse over the home and a case, as a phone and as a desktop. A failure sends nothing. Real visits are measured in the visitor’s own browser too, how soon the page appeared, whether anything jumped, how quickly it answered, and kept in my own dashboard.
The words. Baked in.
Every word comes from the studio and is baked into each page’s own document when the site is built, so the first frame is drawn before any script asks for anything. A moment later one small request asks whether the studio has changed since, and only then is anything fetched again.
The assistant. Grounded.
Ask Andy answers with Claude, only from the published cases it reads when you ask, and its quotes are checked against them before you see them. It describes my part in a project in the case’s own words, never more.
Made with.
- React and Vite
- three.js
- GSAP
- Sanity
- Söhne
- Lucide
- Claude, for the assistant
- ElevenLabs, for its voice
- Vercel and DreamHost
andrewreff.com