Test Animation
Two rounded boxes floating in the void. The first scene this portfolio ever rendered, and the story of how the rest of it got built.
You scrolled past an agent hypergraph and a statue of Themis, and you clicked on two boxes. Respect.
This was the first scene on the site. Its only job was to prove a card could hold a live 3D scene and grow into a full page without breaking. It worked, so it stayed.
How the site works
Every card has its own WebGL canvas. It renders while you can see it, pauses when it's just off screen, and gets thrown away when it's far. Until a scene draws its first frame you see a still of it, captured by a script in headless Chrome. On phones, or with reduced motion on, you only get the still.
Clicking a card turns it into its own page with Motion's layout animations, and the back button folds it back into place. Pages are prerendered with TanStack Start and served from Cloudflare Workers.
Things that broke on the way
The site started with one canvas behind the whole page, each card a window into it. Bloom and shadows don't work through those windows, so it ended up with three canvases anyway, and I deleted the shared one. The first JavaScript download dropped from about 430 KB to about 160 KB.
Closing a project used to leave the hypergraph frozen, because its first frame ran before the graph library had built its layout. And for a while the statue scene had fog, clouds and stars, and no statue.