Colophon
How this page builds itself.
The idea is not mine. Avi Vashishta published how he made a page that a swarm of named cursors builds live, with his code and his prompt. This is a new build of that idea for my own site: the same block states and camera rules, written from scratch, with everything below added on top.
Read Avi’s postEvery block has four states.
A block on the page
It keeps its size in every state, so nothing around it ever moves.
The real content lands: typed, decoded, counted up, resolved from a mosaic or filled with pixels.
What I added.
- 01
A blueprint first
The whole page starts as a dashed plan, so scrolling ahead of the crew shows the plan and not a void.
- 02
Wires
A cursor drags a wire from its last block to its next, like pulling an edge in a node editor. A pulse runs down it when the block lands.
- 03
A minimap
The console holds a miniature of the page. Every block is a tick that fills in as it gets built.
- 04
Mosaic sampling
Paintings resolve from a coarse mosaic to sharp in nine steps, the way an image model samples.
- 05
A living painting
The hero is a shader over two matching plates, a depth map and a cloud mask. The clouds breathe, and they parallax by depth.
- 06
Clouds you can stir
A GPU fluid solver reads your pointer, and its velocity pushes the clouds around like a brush through wet gouache. The crew leaves a faint wake too.
- 07
A human in the loop
When QA passes, the build waits for approval. Click it yourself, or I come in and sign it off.
- 08
The sunrise
Approval runs the shader from night to dawn, outward from the sun, while every colour on the page moves from the night palette to the day one.
- 09
An honest QA line
Broken images and layout shift in the log are read from your browser while the page builds. They are not typed in.
The colours are dyes, not a brand kit.
- Neel
#14123AInk. Indigo dye, not black. - Night
#070D24The page before sunrise. - Mist
#F5F1F9The page after it. Sampled from the morning painting. - Marigold
#FFB000Actions, the sun. - Rani
#E0167AVoice. - Peacock
#14C2B3Scanning and scraping. - Neel bright
#5546FFWorkflows. - Sindoor
#FF5426Warm accent.
What it is made of.
- Astro
- Static HTML on every page. With no JavaScript the finished site is simply there.
- GSAP
- SplitText, ScrambleText and ScrollTrigger for the type and the scroll work.
- Lenis
- Smooth wheel scrolling once the show has handed over.
- WebGL2
- The painting and the fluid, written by hand with no 3D library.
- MediaForge
- Every painting, the night versions, depth maps and cloud masks, generated with Gemini image models.
- Gloock, Hanken Grotesk, Martian Mono
- Headlines, reading text and everything technical.