# How we built clayzo.com with Clayzo

> Every animation on our site was written by a coding agent with Clayzo, and most of it plays live instead of as video. Here's how it came together.

By Clayzo Labs · 2026-09-27 · 3 min read · https://www.clayzo.com/blog/how-we-built-clayzo-com

Every moving thing on clayzo.com was made by a coding agent using Clayzo, mostly Opus. Nothing was keyframed by hand, and almost none of it is a video file. It's the engine drawing each frame live, in your browser, as you scroll.

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.

![Live Clayzo animation: The closing scene: bricks hop up and click onto the stack under the contact button.](https://www.clayzo.com/blog/posters/closing.jpg)

## 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.

*(it's all code!!)*

## 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.

![Live Clayzo animation: A 4:5 launch film.](https://www.clayzo.com/showcase/posters/launch.jpg)
![Live Clayzo animation: A logo sting.](https://www.clayzo.com/showcase/posters/sting.jpg)

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 Clayzo animation: New flavours](https://www.clayzo.com/showcase/posters/flavours.jpg) 
## 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.

- **1.48 MB**: the MP4 that used to close the page
- **34 KB**: the live Clayzo scene that replaced it
- **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. 
<br> </br>
*(try hovering over the animations below with your cursor)*

![Live Clayzo animation: Move your pointer over it.](https://www.clayzo.com/showcase/posters/tilt.jpg)
![Live Clayzo animation: The halftone lens follows you too.](https://www.clayzo.com/showcase/posters/portrait.jpg)

## 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](https://www.clayzo.com/404) has a minifig in the same room, waving you off. Its head turns toward your cursor.

![Live Clayzo animation: The 404 minifig, 35 KB and looping.](https://www.clayzo.com/blog/posters/notfound.jpg)

## 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](https://docs.clayzo.com) have the rest.