Gus & Spark: How a 25-Minute Anime Was Coded With Claude (and the 3 Repos to Set It Up)

What Happened?

In October 2026, creator Ziwen (X: @ziwenxu_) posted something that got the internet talking: a 25-minute animated episode called Gus & Spark — claimed to be the first anime made entirely by Claude. No AI-generated video. No Sora, no Runway. Just code.

Claude Opus 5.5 MAX worked on the episode for 15+ hours, writing code block by block, until it produced roughly 34,000 lines that rendered into a watchable anime episode. The total token usage came to 986 million, with an estimated API cost of "about $370" — Ziwen's own estimate, not a billing statement.

Some props were built in Blender via Blender MCP, and Claude wrote the animation engine itself in code. Ziwen is open that quality still needs work — he has said the quality of the episodes still needs work.

"It's the first Claude-made anime — 25 minutes, written code by code with 0 AI-generated video." — @ziwenxu_ on X

Why This Is Different From "AI Video"

Most AI video tools (Sora, Runway, Kling) generate pixels directly from a text prompt. You describe a scene, the model hallucinates frames, you get a video. You have almost zero control over what actually happens in each frame.

The Gus & Spark approach flips this. Claude writes code — JavaScript animation logic, React components, timing functions — and that code gets rendered into video frames deterministically. You control the characters, the motion, the timing. Everything is inspectable and editable.

This is slower and more expensive for a long episode, but it means the creator owns every frame of the output logically, not just aesthetically.

The 3 Repos That Make This Possible

These are Claude Code agent skills — mini toolkits you install once and then Claude can use them to write better animation code. Think of them as giving Claude a cheat sheet for each library.

The 4-Step Setup

This is the approach the creator used in principle. Your results will vary based on your story length, complexity, and model usage.

1. Install the 3 skill sets in Claude Code
   
   npx skills add remotion-dev/skills npx skills add heygen-com/hyperframes
   For Anime.js, add the community skill manually. You can also install HyperFrames via the plugin marketplace:
   claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes
2. Open Claude Code and write your story
   Describe your characters, scenes, and dialogue in plain text. Claude reads your story and starts generating animation code — React components for Remotion, or HTML/JS compositions for HyperFrames.
3. Let Claude generate the animation code
   With the skills installed, Claude knows the APIs, best practices, and render patterns for each library. It writes code for each scene, builds the animation engine, handles timing and transitions. For a long episode this takes many iterations and a significant number of tokens.
4. Render with one command
   For HyperFrames:
   npx hyperframes init my-video npx hyperframes preview npx hyperframes render
   For Remotion, use its built-in render CLI (see Remotion docs).

What About Cost?

Ziwen estimated "about $370 at API prices" for the 25-minute episode — his own ballpark, not a confirmed bill. That figure reflects a specific story length, a specific model (Opus MAX), and many iterative coding passes.

Do not assume you can build a 25-minute anime for $370. Your cost depends entirely on how long and complex your story is, how many revisions Claude needs to make, and which model you use. Shorter experiments can be done for much less. Long-form professional output may cost more.

FAQ

Does this work with any story I write?

In principle, yes — Claude will try to animate whatever you describe. In practice, the output quality depends on how clearly you define scenes, characters, and transitions. The simpler and more structured your story description, the better the generated code tends to be.

Do I need to know React or JavaScript?

Not necessarily — Claude handles the code. But knowing the basics helps you review what Claude writes, catch errors, and guide it when something breaks. Completely zero-code usage is possible for simple demos; a 25-minute episode will almost certainly require some manual debugging.

Is HyperFrames free?

HyperFrames is open-source (GitHub). The CLI and local rendering are free. Cloud rendering via HeyGen's platform may have its own pricing — check hyperframes.dev for current details.

Can I use Remotion and HyperFrames together?

They are separate frameworks with different output targets. Remotion is React-based and renders video through its own pipeline. HyperFrames is HTML/CSS/JS-based and renders via a headless browser. Choose one for your project — they are not typically combined in a single render pipeline.

Will the Anime.js official skills land soon?

As of October 2026, PR #1177 is still open. Until it is merged, use the community alternatives linked above. Keep an eye on the main Anime.js repo for updates.

Where can I watch Gus & Spark?

Ziwen shared details on X at @ziwenxu_. Follow him there for updates on the project.