Clayzo makes it incredibly easy for your coding agents like Claude Code, Codex and Cursor to create web animations & motion graphics. Your agent writes it in code and reviews every frame; you export a video or play it live on your site. And it’s free!
This is the 2nd launch from Clayzo. View more
Clayzo
Launched this week
Clayzo makes it incredibly easy for coding agents like Claude Code, Codex and Cursor to create web animations and motion graphics. Your agent writes it in code and reviews every frame; you export a video or play it live on your site. And it’s free!
Free
Launch Team / Built With
Atlassian LoomShow, don't just tell with Loom
Promoted
Hi Product Hunt!
We built Clayzo as a way to solve our own problems as design engineers/video editors, where creating good motion graphics & animations were hard with agents. We wanted to create an optimized way for agents to create anything (all in code!), such as launch videos, social media posts, and interactive web animations.
With Clayzo, agents write animations as code against our format, which covers shapes, text, keyframes, springs, custom effects/shaders, camera moves, audio, and interactive states like hover, press and drag. Use it with your own coding agents (Claude Code, Cursor, Codex, etc.).
Our CLI lets agents instantly preview any frame, review their own work, and fix what looks off. Animations & assets bundle into a single .clayzo file (up to ~40x smaller than videos). We currently have optimized WebGL/Swift players for any web/iOS/Mac app (working on more), and you can also export to MP4, GIF, WebM or any other video format.
Super simple setup:
Run npx clayzo@latest init
Run the command: clayzo login
Access Clayzo with your agent using 2 skills:
/clayzo-animation-authoring (to create the animation)
/clayzo-authoring-shipping (for preview and fast export)
Some of the ways we've seen Clayzo being used:
Interactive web animations
Launch videos (entire video made using clayzo!)
Clayzo is free to use! Test it out and let us know what you think!
What would you like to see in Clayzo?
Congrats on the launch @janani_prasad!
Congrats on the launch! We’ve been using Clayzo to make explainer videos for our recent projects (example below) and the results have been excellent. Before this I always tried to prompt smith my way to a motion video I saw online but got disappointing results. Clayzo just works, and it feels like giving Claude or Codex a superpower. Highly recommend everyone giving it a try.
A couple feature requests / ideas for the Clayzo team:
A references / mood board to "make a video like this" or remix inspirations from my swipefiles, beyond my own brand guidelines. I'd like the result to be faithful not only to my product, but to the vibe or structure I'm looking for in the animation/video.
Easily annotate visually so I can watch through a 1st draft, pause, mark up what's on screen to convey my feedback directly, in as few review-and-fix passes as possible.
I was also curious about the bet you're making on doing everything in code. What are the advantages & trade-offs of this approach vs. image/video gen? Are there times a hybrid approach works best?
@sfoscar Thank you! Really glad that you’ve found it useful :)
Also, really appreciate the feedback! We’ve actually been working on a reference library that agents can pull from. Something I’ve also found helpful is pointing Claude Code / Cursor to certain videos I like, and it’s able to understand & create similar content very easily with Clayzo. Also, I definitely think visual annotation can improve the editing experience.
On code vs. image/video gen: gen models are really great for a lot of things (like realistic content), which can’t be created with code. Creating animations/motion graphics in code, however, is a better experience, since you can get more finer/precise control. It's also generally much more lightweight & performant for web animations compared to videos.
There's definitely a lot of use cases for a hybrid approach! Clayzo supports image and video assets, so you can easily add animation/shaders/effects on top of anything you already have!
How is this different from Remotion? That's what I use with Claude Code for short videos right now.
@adamvisu Remotion is awesome for making videos with React! The biggest difference is design quality. With Remotion, agents build each animation from scratch in React and CSS. Clayzo gives agents a dedicated motion engine plus skills that teach motion design taste (timing, easing, typography, composition), so the results look a lot more polished.
A few other differences:
A built-in review tool catches issues like overlapping text or cut-off elements automatically, so agents fix them before you see anything
The same animation exports to video, plays live on the web or in an iOS app, and can be interactive (reacting to tap/hover states, etc.)
Rendering is really fast
Would love to hear how it compares for your short videos!
@patelpurav Haven't tried it yet, I'll give it a go on my next short video
Congrats on the launch. We built our own Claude skills for our app's drawings and animations, and the hardest part was keeping the same character and style across every new piece. Would love a way to lock a character or style so every animation matches. Can Clayzo do that today?
@dan16 Thank you! And yes, definitely! You can point your agent at existing assets / skills you have, and keep things consistent across all Clayzo animations (our /clayzo-animation-authoring skill should help out with this).
@patelpurav Nice, that's exactly what I was hoping. Going to try it with our art skill.
@dan16 Awesome! Would love to see what you make!
congrats on the launch!
weight is the thing i keep running into. we cut our 1st screen bout 40% for users in europe and half of that was one lib that only mattered on a single page, so i'm wary of anything that ships a player..
whats the webGL player cost on first load, and can i hold it back untill the animation is actually on screen?
@seenew Thank you! The <clayzo-player> element is only ~3 KB on first load. It shows a poster image right away and only fetches the engine (~350 KB brotli) once the animation is about to scroll into view. It also handles multiple animations on one page smoothly. Our website uses our WebGL player.
Let me know if you have any other questions!
@nicholas_zakas Opus is pretty great at animation and design on its own (one of our favorite models to use with Clayzo)! Clayzo gives it a much better foundation to work with:
A motion engine with effects and shaders built in (glass, blur, masks, 2.5D camera, etc.), so it doesn’t have to rebuild them from scratch every time
A framework designed for agents, so results are more consistent from run to run
A built-in review that catches issues like overlapping text or cut-off elements automatically, so it fixes them before you see anything
One animation that exports to video, plays live on the web or in an iOS app, and can be interactive (reacting to tap/hover states, etc.)
The result is generally more polished, production-ready animations in fewer tries!
Seems like an awesome alternative to remotion! Setup might be a bit easier especially for folks that don't often run agents locally, but so far so good.
Pretty good for the first prompt. Definitely replacing remotion with clayzo.
https://youtu.be/5zzvYgJZlys