How this site is made
Five worlds, one camera
A walk through the drawn routes of this site - what each one is, why it scrolls sideways, and the small rule that keeps every one of them moving.
There is no scroll bar on this site's front page. There is a scroll, and it goes sideways, and what it moves is a rainforest. Four more routes do the same thing with four other places. This is a walk through all five - what each one is for, what it is made of, and the one rule they all live by - written mostly so I stop explaining it in messages.
The rule the worlds live by
The rule is short and it decides everything downstream: nothing moves for decoration. A candle burns down because you have been reading beside it. Fireflies drift because a forest floor at night has fireflies. The one thing that moves because you moved is the camera, and the camera is the whole trick - a few kilobytes of plain JavaScript that reads how far you have scrolled and slides a handful of layered planes by different amounts, the near ones faster than the far ones, so a flat picture gets depth for free.
Parallax is the boring word for it. What makes it feel like a place rather than a slideshow is that the planes are drawn to be seen at different speeds - the fore plane is sparse and large, the far plane is dense and small - and that the camera never snaps. It eases toward where you are, at a rate corrected for your frame rate, so a fast wheel and a slow trackpad arrive at the same picture.
Everything else follows from that. The worlds are drawn as flat shapes rather than photographed or generated, because flat shapes stay crisp at any width and cost the browser almost nothing to move. There is no GSAP, no Lottie, no scroll library - the whole camera is a few kilobytes of the site's own code, which means every line of it is a line I can read. One requestAnimationFrame loop drives every world's camera and the cursor together, and when nothing is moving it stops asking for frames at all.
A page is a room you carry with you.
That sentence is on the wall of the reading room you are in now, and it is the reason the reading pages - this one - do not scroll sideways. A room you read in should hold still.
The rainforest
The front page, a third of the way along. Three depths of trunk, and a floor that is busier than it looks.
The home route is the rainforest, and it is the loudest of the five by design: it is the first thing anyone sees, so it carries the whole argument at once. Big trunks in the fore plane, a canopy that closes over you, a floor of ferns and fungi, and - if you wait - the fireflies. The stations along the walk are the site's own pitch: what I build, who for, how to reach me. The dock at the far end holds the contact form.
It is also the world that taught me the most about cost. Every plane in it is a stack of SVG paths, and every path with a curve in it costs the rasteriser more than a polygon does. The rainforest is nearly all curves. Two full passes of measuring later, its fast planes came back down toward the floor of what a laptop can redraw between two frames - not by drawing less, but by letting the camera decide what is off-screen and hiding it before the browser has to think about it.
If you want to see the machine work, hold a fast wheel-scroll and watch the far trunks. They move, but they move less than the near ones - that ratio is the only 3D there is.
Or don't take my word for it. Twenty frames of the walk, played back:
Eight seconds of scroll, sampled twenty times. Watch any single trunk and you can pick which plane it is on by how fast it leaves.
That is the whole trick, and it is worth saying plainly how little is in it: no library, no 3D, no compositing. Every plane is one translate3d written by one loop, and the depth is nothing but the ratio between the numbers.
What the drawing is arguing with
The worlds are drawn, and drawn is not the same as invented. Before the rainforest was flat shapes it was a place someone stood in, and the parts of it worth keeping had to be found there first.
The reference, not the site. Trunks at three distances, a floor that is busier than the eye first reports, and the fog doing the work that the far plane's low contrast does in the drawing. Video by Juan Camilo Trujillo Botero on Pexels.
Put that beside the world above and the choices stop looking arbitrary. The near trunks are dark and high-contrast because the near trunks in the footage are; the far ones wash out toward the canopy colour because fog does exactly that, and a flat plane at low contrast is the cheapest possible way to say "far away" to a rasteriser. The undergrowth is dense at the bottom of the frame and thins upward for the same reason it does on a real trail.
None of that is a photograph on the site, and none of it will be. But the drawing is an argument about which parts of a place matter, and an argument needs something to be about.
The library
The reading room, mid-walk. The book standing proud of the row is a post.
The journal lives in a castle library - Gothic shell, Persian furnishing, candles that never quite go out. The shelves are generated: every spine is a small rectangle in one of a few dye colours, and the whole field is merged into a handful of paths so the browser can carry it. Published entries map into fixed slots the art thins itself around, which is why the room looks the same whether the journal holds one post or twelve - the count never changes, only which books stand forward. Click one and you are here, on a page that is that book taken down and opened.
The room's own list of what is on the shelves is a small JSON file the panel serves; the site pulls it into the build, so the world learns about a new entry on the next pull and never has to fetch anything at runtime.
The street
The portfolio: a covered street of stalls, one per piece of work.
The portfolio is a street - a covered arcade of stalls under strings of lamps, one stall per piece of work, each with its own awning and its own light. It is the most literal of the five, and on purpose: a portfolio is a shop window, so it is drawn as one. The stations here are the case studies, and the street is long enough that walking it is a small commitment, which is also on purpose.
What is drawn. Every awning, lamp, wall tile and stacked crate is a shape placed by hand in a scene file. Nothing here is a photograph and nothing is generated on the fly.
What is generated. The repeating textures - the tiled walls, the runs of lamps - are written once as a rule and unrolled at build time, so the source stays readable and the output stays fast.
The desert
The about page. Two pyramids, not four - it took three passes to get the count right.
The about page is a desert at night, and it is the world that has changed the most since it was drawn: a pyramid field at the mouth of the walk, then two pyramids instead of four, then those two moved right and given three times the surface, because most of a far plane is unreachable and things placed there are invisible forever. There is a lesson in that which deserves its own entry.
The desert is also where the next drawings are going. Three sketches - a saucer, a stand of cacti, two mesas - are sitting in a folder waiting for a place in it:
The sketches came out of the drawing tool as one 2.4 MB SVG. That is a fine file to draw in and a poor one to ship - the whole desert page, drawings and all, weighs less. Each will be traced into flat shapes and placed on a plane it can actually be seen from before it goes anywhere near a page.
The garden
The garden, late in the walk: a footbridge, a lantern, and maples the colour of a struck match.
The fifth route is a prototype - a garden in autumn, maples over a pond, a footbridge and a lantern - and it is where new ideas get tried before they are allowed near the other four. It is the newest of the five and the least settled, which is exactly what makes it useful as a bench: when a change makes the garden slower, the change is wrong, and there is nothing precious in the way of finding out.
Here is roughly what happens when I add a beat to any of them:
Draw it flat
Every element is a shape in a scene file, placed by hand at a known depth. Curves are spent carefully; polygons are nearly free.
Put it on a plane
Each plane moves at its own speed. Anything that has to be read goes on a slow plane; anything that has to feel near goes on a fast one, and it goes big.
Give it a reason to move
If it moves, the movement has to mean something - a night passing, a reader reading. If there is no reason, it does not move.
Measure it
Not with a stopwatch: wall-clock numbers on this laptop swing by a third between identical runs. The tools read CPU time per frame from the browser's own trace, and a change is real only when the pair inside one run says so.
What it costs
The honest number is the last one. For most of the site's life the worlds felt fine and I could not have said why, or said what would break them. The scroll passes changed that: three small scripts now measure what a frame actually costs the machine, what the tail of the worst frames looks like under a real gesture, and how many compositor layers a page is asking for. Every world got faster after that, and - more usefully - every proposed change since has had to prove it did not make one slower.
| Route | World | Light | What it is for |
|---|---|---|---|
/ |
Rainforest | daylight under canopy | The pitch |
/journal/ |
Library | candlelight | Entries like this one |
/portfolio/ |
Street | lamplight | The work |
/about/ |
Desert | a full moon | The person |
/prototype-1/ |
Garden | autumn afternoon | The bench |
Four of them, at their edges - the frames a walk ends or begins on:
That last drawing is a raw block - the one place in an entry where markup goes in as typed, unescaped and unwrapped. It exists so a post can carry a diagram the editor has no button for; it is logged every time it is used, and it is used exactly here.
Drawn, not generated. Built in Astro with no animation library - the camera that moves this landscape is five kilobytes of plain JavaScript.
Questions people actually ask
Does it work without JavaScript?
Yes. Without the script every route is an ordinary vertical page: the same drawings, stacked, and every station readable in order. The camera is an enhancement, not the page.
What about phones?
On a touch screen you swipe and the world walks. If your device asks for reduced motion, you get the vertical version - the choice is structural, not a media query fighting the layout.
Why sideways at all?
Because a place has a horizon and a page does not. Walking along a landscape is a different feeling from scrolling down a document, and I wanted the site to feel like the first thing.
Can I have one of these?
That is what the street is for. Walk it, find the stall that looks like your problem, and write to me from the dock - or from the form below.