# Clayzo

> Clayzo is an animation engine built for coding agents. Agents like Claude Code, Codex and Cursor use it to write motion graphics, product animations and interactive web animations, check their own frames, and ship them to play live on the web or natively in Swift.

## At a glance

- **What it is:** an animation engine and CLI designed agent-first. Animations are typed documents your agent writes and edits as code.
- **Who it's for:** developers and teams who want animation for sites, apps, launches and social without hand-keyframing in an editor.
- **Get started:** run `npx clayzo@latest init` in a project, then ask your agent for what you want in a sentence.
- **Works with:** Claude Code, Codex, Cursor, and any agent that can run commands and load skills. In our experience Opus 5.5 and Fable 5.1 are the strongest at UI and motion.
- **Plays on:** the web (plain HTML, React, Next.js) through a lightweight WebGL player or a full-fidelity CanvasKit player, and natively in Swift on iOS and macOS.
- **Exports:** MP4, MOV, WebM, GIF or a PNG sequence, and portable `.clayzo` bundles with fonts and images embedded.
- **Price:** free for animations on your own sites and apps. Building a product on top of Clayzo, such as an agent that generates Clayzo animations for your users, needs a license (team@clayzo.com).
- **Made by:** Clayzo Labs.

## How it works

1. `npx clayzo@latest init` installs the Clayzo packages and agent skills in your project.
2. You describe the animation. Your agent writes it as an animation document in TypeScript, using your own images, fonts, brand and even your existing components.
3. The agent checks its own work: it renders single frames, contact sheets of the whole timeline and the loop seam, and revises before you look.
4. You ship it: play it live on your site (it can respond to the cursor and to your app's inputs), play it natively in Swift, or export video and GIFs.

Because every animation is a text file, changing colors, copy or timing, or making a variant, is a matter of asking your agent.

## What makes it different

- **Agent-first.** Rive and Lottie animations are built by hand in an editor. Clayzo is designed for an agent to write, check and edit.
- **Real GPU effects.** Glass, refraction, dithering, halftones and custom shaders, which Lottie can't express.
- **Live, not video.** Live playback stays sharp at any size, can be interactive, and is usually far smaller than the same animation as a video file. Clayzo's web player is less than half the size of Rive's.

## What people make with it

Every example below was made from the prompt shown, and plays live on https://www.clayzo.com.

### Social posts

Stories, covers and product posts, cut to the shape the platform wants and on brand every time.

- **Skincare post** (4:5): "A calm, Aesop-style post for our serum: slow push-in on the bottle, a serif headline rising word by word, ingredient callouts and a shop pill."
- **Sneaker drop** (9:16): "Make an Instagram story for our sneaker drop: big condensed model name over the floating shoe, release date and price like a Nike SNKRS post."
- **Magazine cover** (9:16): "Design a fashion magazine cover post from this portrait: serif masthead, cover lines in the margins, issue number, colours pulled from the photo."

### Ads and launches

Launch films, flavour spots and logo stings, from one sentence to every placement.

- **Feature launch** (4:5): "A launch post for our Stack feature: loose shapes snap into an auto-layout grid, then teammates resize and duplicate them live."
- **New flavours** (1:1): "A punchy square ad for three new flavours: each can floods in on its own colour, the name tucked behind it rolls over, a stamp keeps turning."
- **Logo sting** (4:5): "A logo sting for Quarto: four quarter tiles swing in and lock into the mark, the wordmark rises under it, then it all clears."
- **Stroke sting** (4:5): "A logo sting for "lune": one white stroke on red draws a crescent mark, writes the wordmark in one line, then rewinds."

### Product UI

Your interface in motion for the landing page: real states, real data, the moment it clicks.

- **Analytics card** (4:5): "Animate our analytics card for the pricing page: a cursor switches 7D to 30D and the chart and totals re-flow."
- **AI assistant** (4:5): "Show our assistant at work: the prompt is sent, tool calls tick off, the answer streams in and a code diff opens into place."
- **Checkout** (16:9): "A checkout moment for the homepage: the cursor taps Pay $248.00, the button turns into a spinner, a check pops and the balance rolls down."

### Interactive

Pieces that answer the cursor, running live on your site at a fraction of a video’s weight.

- **Halftone lens** (4:5, interactive): "Render this portrait as a halftone screen, with a lens that follows the cursor and shows the photograph underneath."
- **Pointer field** (4:5, interactive): "A field of split discs that turn to face the cursor and flare hot where it passes. A click sends a ripple through them."
- **Tilt card** (1:1, interactive): "A premium card that tilts toward the cursor, with a highlight that slides across the metal and a shadow that follows."

## Questions

### What is Clayzo?

The only animation engine built agent-first. It gives your coding agent everything it needs to make real web animation (including interactive pieces), and lets it see its own frames instantly, so it checks and refines the motion before you ever look. ([How it works](https://docs.clayzo.com/authoring/agents))

### How do I get started?

Run npx clayzo@latest init, then ask your agent for what you want in a sentence. It takes it from there. ([Quickstart](https://docs.clayzo.com/quickstart))

### Which models work best?

In our experience, Opus 5.5 and Fable 5.1 are the most creative, and the strongest at UI and motion. Most of the animations on this site were made with Opus.

### Can I use my own images, fonts or components?

Yes. Hand your agent photos, logos and brand fonts and it builds them into the animation, and they travel with it when it’s packaged. It can also read your existing components and code, and animate your actual UI instead of a mockup. ([Fonts and assets](https://docs.clayzo.com/authoring/fonts-and-assets))

### Which agents does it work with?

Claude Code, Codex, Cursor, and any agent that can run commands and load skills.

### Is it really free?

Yes, for making animations for your own sites and apps. We may add paid features, but the core will always stay free, and we’ll let you know before anything changes. Building a product on top of Clayzo, like an agent that generates Clayzo animations for your users, is welcome but needs a license.

### Where can I play Clayzo animations?

Anywhere on the web, from plain HTML to React and Next.js, and natively in Swift on iOS and macOS. More platforms are on the way. ([Players in the docs](https://docs.clayzo.com/playback/choosing-a-renderer))

### How is it different from Rive or Lottie?

Both are built by hand in an editor, and Lottie can’t express GPU effects like glass, refraction, dithering or custom shaders. Clayzo is designed for your agent to write and edit animations, and our web player is less than half the size of Rive’s.

## Links

- Website: https://www.clayzo.com
- Documentation: https://docs.clayzo.com (Markdown index: https://docs.clayzo.com/llms.txt)
- Blog: https://www.clayzo.com/blog
- X: https://x.com/useclayzo
- LinkedIn: https://linkedin.com/company/clayzo
- Contact: team@clayzo.com