We measured Clayzo's .clayzo file against an MP4 of the same scene. With shapes only it is 66 times smaller. Add Korean text and it is 7 times larger.
Clayzo is a tool for writing animations in code and shipping them as a single .clayzo file for the web and apps. It is made by puravp, and the first release went out on August 25. This article covers three packages, all at version 0.3.20 from October 28: the clayzo command line tool, @clayzo/animation for writing and validating documents, and the web player @clayzo/webgl-player.
On Product Hunt, as of November 3, it has 191 votes and ranks 6th for the day, with 338 followers and 1 review. The maker says a .clayzo file is up to 40 times smaller than the same video. This article records what we measured when we tested that claim on one scene.
The license is the Clayzo SDK License for a closed SDK. The videos and animations you make belong to you and can be distributed without royalties. Bypassing authentication, redistributing the SDK, and building a similar engine are prohibited.
Image: clayzo.com
Clayzo is a tool that writes animation as code instead of as a picture file. You write a scene in TypeScript, bundle fonts, images, and sound into one .clayzo file, and play it the same way on the web and in apps. Running npx clayzo@latest init installs the packages and also installs guides (skills) for coding agents.
What Clayzo does
| How you make it | You write nodes and keyframes in TypeScript |
| Effects | The documentation covers glass refraction, duotone dither, your own shaders (custom-sksl), and a 2.5D camera |
| Interaction | Reacts to hover, press, and drag, and can hold a state machine with states such as idle and hover |
| Playback | On the web (a WebGL player, a React component, a web element) and on iOS and macOS (a Swift package) |
| Export | mp4, mov, gif, webm, webp, PNG sequence, svg |
What we used ourselves for this article is scene writing, review (review), packaging, export, and the size of the web player. We only read the documentation for interaction bindings and for iOS and macOS playback, and did not try them.
A scene is written in TypeScript. You build nodes and keyframes in code, and clayzo package bundles a validated document into one .clayzo file. Fonts, images, and sound go into the same file. On the web, a player reads that file and draws it.
- Scene code → clayzo file (clayzo package)
- clayzo file → Web player (drawing on screen)
The account requirement is split. Writing and validating documents, and playing them in the web player, work without an account. Preview, frame rendering, review, packaging, and export need clayzo login (approved in the browser) or a CLAYZO_TOKEN.
The web player comes in three forms: createPlayer(), the React component ClayzoPlayer, and the web element <clayzo-player>. It supports state machines (states such as idle and hover) and releases GPU memory when the animation is off screen. checkCoverage() tells you ahead of time whether the player cannot draw something in a document.
The 4 second sample below was also made in Clayzo. It is a shapes-only scene in which three faces scatter and come back as a gem, with no text and no sound. The .clayzo file is 2,364 bytes. The MP4 exported from the same document with clayzo export is 57.5 KB (draft), 237.7 KB (review), or 350.4 KB (final) depending on the quality tier, so the file is about 24 to 148 times smaller. clayzo review passed this document with no warnings and the loop point closed.
Video: a sample we made in Clayzo while writing this article
We made one 15 second vertical reel (1080×1920, 30 fps) in Clayzo with the same structure as our own showreels. We bundled that single scene with clayzo package into a .clayzo file, exported the same document with clayzo export as an H.264 MP4 (--tier final), and compared the byte counts. We also built variants without text or sound to separate what decides the size.
- Shapes only66x
.clayzo is smaller than the MP4
- With Korean text7x
.clayzo is larger than the MP4
One scene, file sizes
| Shapes only (no text, no sound) | 2.8 KB | 184.6 KB | 66x smaller |
| Korean text (system font bundled, no sound) | 5.33 MB | 0.77 MB | 7x larger |
| Korean text and narration (WAV) | 5.92 MB | 0.90 MB | 6.5x larger |
| Korean text (Pretendard bundled, no sound) | 2.06 MB | 0.79 MB | 2.6x larger |
| Shapes and a shader background (no text, no sound) | 14.0 KB | 27.2 MB | about 1,950x smaller |
With shapes only, the maker's claim held. The sizes are 2,802 bytes and 184,551 bytes, about 66 times smaller, which is wider than the stated maximum of 40.
Add text and the result flips, because a .clayzo file carries the whole font the document uses. The first Korean font we used (Apple SD Gothic Neo) made the file 5.33 MB, while the MP4 of the same scene was 0.77 MB. That font is a system font, though, and the Clayzo documentation says system fonts such as SF Pro cannot be redistributed and should not be named. So we measured again with Pretendard, an OFL font that may be redistributed. The file shrank to 2.06 MB, which is still 2.6 times the MP4.
Laying a moving dot field under the shapes with a shader makes the MP4 27.2 MB, so the gap to .clayzo widens to about 1,950 times. Dense motion is what video handles worst.
Narration adds another 0.59 MB, because the .clayzo file stored the sound as uncompressed WAV.
The Pretendard variant had one more problem. The web player's checkCoverage() reported 14 text nodes as "not encoded" and returned supported as false. The variant with the system font bundled and the shapes-only variant both passed. We did not find the cause. We only suspect the variable font (woff2) format.
The review tool pointed at the same thing. clayzo review warned that the animation downloads 9.7 MB before it plays fully, and named a 3 MB font as the largest asset.
We also measured the web player. In the installed 0.3.20 package, the entry file element.js is 2.0 KB gzipped (1.8 KB brotli), and the largest chunk, which looks like the engine, is 361 KB gzipped (283 KB brotli). The maker's figures of about 3 KB for the first load and about 350 KB for the engine are consistent with this on a gzip basis. We did not add up the small chunks the entry file loads.
Our first attempt used a fixed template: a question, three step cards, and two bars. That template fits any subject, so nothing showed what is particular to Clayzo, and the first frame carried no information, so we threw it away. The reel we made again puts a film strip (the video) and a hexagon gem (the .clayzo file) on a scale, and the gem side stays behind a ? so the answer lives in the article. We built the Clayzo side and our showreel side separately.
Reels made in the two tools
| Background | A teal and white dot field drawn with a custom-sksl shader | White ground with shapes only, no shader |
| Render time | Export took 22.9 seconds (with the shader, on the GPU in a headless browser) | Landscape at 60 fps took 2 minutes 8 seconds, vertical 44 seconds |
| MP4 size | 27.6 MB original, 2.4 MB after we re-encoded it for sharing | 2.7 MB landscape, 2.3 MB vertical |
| .clayzo size | 5.93 MB (with a Korean font), 14.0 KB without text and sound | Not applicable |
| Automatic review | review found no motion warnings, in 8.4 seconds | A person looks at the storyboard |
| Clipping and overlap | Caught text off screen, missed text laid over text (one test) | No automatic check |
| Captions, hidden answer, approval | None, we would have to add them | Already exist (this reel uses no narration or captions) |
The shader background is where Clayzo's strength showed most clearly. Once the effect names match the documentation and capability is filled in, a flowing dot field costs a few KB of file. Exporting the same background as MP4, however, grew to 27.6 MB. Dense moving texture is the content video handles worst.
clayzo review was useful. It found the 20 one frame fades (8 ticks) that we had set too short, and when we pushed text off screen on purpose it reported 65% of it cut off. It did miss the test where we laid one line of text over another. That was a single test, so it does not generalize.
We also hit a snag while building. If the z value of a position is not 0, the node draws nothing, and no error appears. The first render was a white screen, and finding the cause took a while.
Clayzo is clearly light when a scene is only shapes and motion. If a 2.8 KB scene stands in for 184.6 KB of video, the difference is large. Once text appears, though, one font (2 MB) is more than 700 times the size of the whole shapes scene. For a team that writes in Korean, this matters more.
For reels we make again and again, we would keep the current method, for two reasons. Our reels end up as MP4, so the strengths of .clayzo (small files, interaction) are not used. And we would have to rebuild the checks we already have, such as the answer leak check, the approval hash, and captions with credits, on the Clayzo side.
A shader texture widens the gap to video, but for reels that end up as MP4 that gap is no gain. The top of a deep dive article is worth one trial. A shape animation with almost no text, or an element that reacts to hover, would use what .clayzo is good at. We would first check that it passes checkCoverage().
A closed SDK that needs a login is a burden for a tool we would rely on for long. A 0.3 version number, where rules may change, is the same kind of burden. The numbers above come from one scene on one computer, so another scene may give different results.
- Clayzo website, the maker
- Clayzo on Product Hunt, checked on November 3
- @clayzo/webgl-player, npm package 0.3.20
- File sizes, render times, and review results were measured by us on November 3. The scene is one 15 second vertical reel, and the MP4 is H.264 (
--tier final).
This article covers a single subject.