A landing page has to read in one glance, before anyone scrolls. For a delivery company that meant the town and the harbour in the same frame: the van on the ring road, the sheds, the ship and the crane. I built this diorama for a client, Larkfield, and the page here is that scene in one file.
The camera sits on a sphere around the middle of the board. Dragging right turns the town with your hand. The slider on the right pulls the camera in, and the wheel stays with the page, so the article can still scroll. After a few quiet seconds the view starts turning again, and if you leave it longer it eases back to the composed angle.
I use AI to block in the sheds, the trees and the traffic. Where the truck stops, and that the harbour has to sit in the same picture as the high street, comes from 25+ years of JavaScript, game development, modding and level design. A hero that only shows the van is a logo. The route is what the company does.
The route
The truck takes the outer lane, left-hand traffic, and drops parcels at the pads. Cars take the inner lane the other way. The plane circles the strip. Down at the water, the ship and the crane move on their own clocks, and the water is a displaced plane.
The badge should say WebGPU. The slider is the zoom. Drag right and the town turns with your hand.
WebGPU only, on Three.js 0.186.1, with no WebGL fallback. If the browser has no WebGPU, the page stops. Open it through a server, because file:// will not load the modules. php -S localhost:8000 or npx serve in the folder is enough.
- Open it on its own
diorama.html, the project-
SKILL.md
If the truck cuts a corner, the path radius is tighter than the vehicle. If the logo looks dark, its texture is in the wrong colour space.