That was the point of building the site this way. If Clayzo is the animation engine for agents, our own page had better be the proof.
The hero is a drawing, not a render
The scene at the top of the page is a warm room drawn clean: one paper sweep, sun through a window, sprigs of leaves. On it, a LEGO stair and a glass marble are printed in two inks, graphite and teal, as a halftone where the size of each dot carries the light. The marble rolls down the stair, the steps dissolve into sparks, the dots ring out into a horse galloping over grass, and a wave washes it all back to the start.
The halftone is a custom shader, written by the agent and layered over the vector scene. That's the kind of effect you can't get out of a timeline editor, and it's why the whole site shares one look: the same room and the same print come back at the bottom of the page and on our 404.
Agents that can see their own frames
The part that makes this work is that the agent never animates blind. Clayzo lets it render any frame, a contact sheet of the whole timeline, or the loop seam side by side, and look at the result before we ever do. So a request like "make it start lower, I only want to see the bricks landing" turns into the agent reframing the scene, rendering sheets, checking each landing, and coming back with something that already works.
It also means taste still wins. We asked for snappier physics on the closing scene, got a faster version with bounces and settling, and didn't like it. The agent put the old one back in one step. Having every version be plain text you can diff makes that kind of back-and-forth cheap.
The showcase: thirteen pieces, one engine
The "What Clayzo makes" section is thirteen pieces across social posts, campaigns, product UI and interactive work. Each one started as a prompt, the one typed out on the left of that section.
Product shots in those pieces are real images, generated with an image model and built into the animation. Type is set from real font files, converted to vector outlines with kerning, so it renders crisply at any size. Everything a piece needs ships in a single .clayzo bundle: the document, its images and its fonts.
Live instead of video
Playing an animation live is usually far lighter than shipping it as video. Across the vector and UI pieces on our page, a web-quality H.264 export came out around ten to twelve times larger than the Clayzo document it was made from.
- the MP4 that used to close the page
- 1.48 MB
- the MP4 that used to close the page
- the live Clayzo scene that replaced it
- 34 KB
- the live Clayzo scene that replaced it
- all thirteen showcase pieces, images included
- 2.0 MB
- all thirteen showcase pieces, images included
Live also means it can respond. Some pieces follow your cursor, which a video never could.
The small things
A few details we're fond of:
- The handwritten notes are a single-stroke felt-tip hand, drawn as paths and written on with a little tremor and ink pooling, so they look like they're being written as you arrive.
- The contact card reuses the closing scene with a different crop, so it costs nothing extra to load.
- Our 404 page has a minifig in the same room, waving you off. Its head turns toward your cursor.
Every one of these is a text file an agent can open, change and check.
That's the part we care about most. Nothing here is locked in an export. Any of it can become a new color, new copy, new timing, or a GIF for a tweet, just by asking.
If you want to try it, run npx clayzo@latest init and ask your agent for something. The docs have the rest.