Clayzo - Create animations and motion design with your coding agent
by•
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!
Replies
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!
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
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!
The single-frame preview caught my eye. Being able to inspect the awkward moment in an animation seems useful when you're giving the agent its next instruction.
@oleksii_sekundant yes that's been super helpful for us!
For many people, creating videos for product launches is the most challenging part. Now there's an easy solution!
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
Been super useful to use when making creatives
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!
Congratulations on the launch! I've been obsessed with motion graphics recently because of Claude Motion, so it's always cool to check out alternatives. plus, it's free! claude motion is only accessible through claude team or enterprise.
@heyitsirenechan Thank you!!
Good luck with the launch, guys!