Dev.to AI πŸ€– Ai πŸ‘ 0 πŸ“– 9 min read

Build an AI Animation Studio with Claude Code & Antigravity

A coding agent can do much more than write a React component. With the right skills and rendering tools, it can inspect an existing asset repository, plan scenes, animate reusable characters and environments, and render

A coding agent can do much more than write a React component. With the right skills and rendering tools, it can inspect an existing asset repository, plan scenes, animate reusable characters and environments, and render a finished video.

The interesting part? You don't have to rebuild your visual world for every video.

If your repository already contains characters, 3D models, props, textures, backgrounds, rigs, animation clips, or scene components, you can build a code-driven animation workflow around those assets.

In this guide, we'll explore open-source agent skills and animation engines that work with Claude Code and Google Antigravity, then assemble them into a practical AI animation studio.

1. First, understand the three parts

An AI animation pipeline is easier to reason about when you separate three responsibilities:

Part Responsibility
Agent skills Teach the coding agent how to plan and execute an animation workflow
Asset library Help it find, organize, version, and reuse existing assets
Rendering engine Turns scene code, models, images, and animation instructions into frames and videos

A skill is not an animation engine by itself. It gives the agent a repeatable workflow. The engine renders the result.

That distinction matters: installing an animation skill does not automatically rig every model or make every image animate.

2. Start with CStack: animated-video + asset-library

Repository: goodnight000/cstack

CStack is the most interesting starting point I found for this particular workflow because it has two complementary skills.

animated-video

The animated-video skill creates animated videos in code using Remotion, React, SVG, and Three.js. Its documented workflow covers explainers, character stories, motion graphics, kinetic typography, and animated infographics in 2D or 3D.

It doesn't jump straight from a prompt to a final render. The workflow includes:

  • Brainstorming visual concepts.
  • Comparing style frames.
  • Planning and approving a key-frame board.
  • Timing scenes around a voiceover.
  • Building animation and synchronizing sound cues.
  • Reviewing rendered frames and audio.

This is useful because a good animation is not just a sequence of moving objects. It needs timing, composition, visual clarity, and review.

asset-library

The asset-library skill addresses the other half of the problem: reuse.

The repository describes a local asset library backed by SQLite and files. It can organize footage, images, music, sound effects, characters, animation code, and 3D sets.

Reusable characters, code, and 3D sets can be registered as versioned bundles, including dependencies, examples, previews, and validation commands. That gives a production workflow a record of which version of an asset was used.

In practice, this means an agent can search for an existing character or environment before sourcing or building a replacement.

Important: the library is a catalog and reuse workflow, not a magic importer. Your agent still needs to inspect your repository, understand each file format, and register or reference the assets that should be reused.

Repository: https://github.com/goodnight000/cstack

3. More open-source skills and engines

CStack is a strong workflow foundation, but different kinds of videos benefit from different tools.

3.1 iart-ai/motion-skills: a broad motion-design skill collection

GitHub: iart-ai/motion-skills

This collection lists 56 skills across 19 installable packs. The packs cover areas such as:

  • Explainer videos.
  • TikTok, Reels, and Shorts.
  • Kinetic typography.
  • Data animation.
  • WebGL and Three.js.
  • Manim and mathematical animation.
  • Motion design and generative illustration.

Each skill is designed to teach an agent a focused workflow. The repository also emphasizes a render-and-review loop: render a frame, inspect it, and verify the result instead of assuming the code looks correct.

You can install an individual pack, for example:

npx skills add iart-ai/explainer-video-skills

Browse the packs before installing: https://github.com/iart-ai/motion-skills

3.2 Blender Skills: for existing 3D models and rigs

GitHub: EL4CTEO/blender-skills

If your repository contains Blender scenes or 3D character assets, this is worth exploring.

The project provides 28 Blender agent skills covering workflows such as:

  • Modeling and scene setup.
  • UVs, textures, and PBR materials.
  • Character rigging and facial shape keys.
  • Skeletal animation and motion retargeting.
  • Environments and stylized looks.
  • Lighting, rendering, and video editing.
  • Export pipelines and asset quality checks.

The current repository targets Blender 5.2 LTS and documents an installer for supported coding agents.

git clone https://github.com/EL4CTEO/blender-skills
cd blender-skills
./install/install.sh

Repository: https://github.com/EL4CTEO/blender-skills

3.3 VideoZero Skills: Motion Canvas with agent control

GitHub: VideoZero/skills

This repository focuses on Motion Canvas and includes three useful skills:

  • motion-canvas: framework references for components, signals, layout, transitions, filters, gradients, cameras, and more.
  • motion-canvas-agent: programmatic editor control for seeking, screenshots, scene-graph inspection, settings, and rendering.
  • animation-basics: guidance based on the 12 principles of animation.

Install it with:

npx skills add videozero/skills

This is especially interesting for structured visuals and educational animations.

3.4 Remotion: React-based video composition

Website: Remotion Β· GitHub

Remotion lets developers create videos and motion graphics with React. A video becomes a set of code-defined compositions, components, timelines, and media layers.

It is useful for:

  • Product explainers.
  • UI walkthroughs.
  • Kinetic typography.
  • Data-driven videos.
  • Reusable video templates.
  • Batch rendering.

Remotion also documents an agent-skill installation flow:

npx -y skills@latest add remotion-dev/skills -g -y

Licensing note: Remotion is not simply an MIT-licensed dependency. Its current terms provide a free license for individuals and companies with up to three employees, while other organizations may need a Company License. Check the official license and pricing before using it in a commercial production pipeline.

3.5 Motion Canvas: TypeScript animations

Website and docs: Motion Canvas

Motion Canvas is a free, open-source TypeScript library that uses generators to program animations and includes an editor for real-time preview.

It is particularly suited to informative vector animations and visuals synchronized with voiceovers. It is not intended to replace a full video-editing application.

4. How to make the agent reuse your existing assets

Before asking for a video, ask the agent to audit the repository.

For example, a project might contain:

project/
β”œβ”€β”€ assets/
β”‚   β”œβ”€β”€ characters/
β”‚   β”‚   β”œβ”€β”€ baby/
β”‚   β”‚   β”‚   β”œβ”€β”€ model.glb
β”‚   β”‚   β”‚   β”œβ”€β”€ textures/
β”‚   β”‚   β”‚   └── animations/
β”‚   β”‚   └── character-02/
β”‚   β”œβ”€β”€ environments/
β”‚   β”‚   β”œβ”€β”€ forest/
β”‚   β”‚   └── classroom/
β”‚   β”œβ”€β”€ objects/
β”‚   β”‚   β”œβ”€β”€ laptop.glb
β”‚   β”‚   └── books/
β”‚   β”œβ”€β”€ audio/
β”‚   └── sprites/
└── src/

Your actual directory structure may be completely different. Let the agent discover it rather than forcing your repository into this example.

Create an asset manifest

An inventory helps the agent refer to assets consistently. A simplified manifest might look like this:

{
  "characters": [
    {
      "id": "baby",
      "model": "assets/characters/baby/model.glb",
      "availableAnimations": ["idle", "walk", "run"]
    }
  ],
  "environments": [
    {
      "id": "forest",
      "path": "assets/environments/forest/"
    }
  ],
  "objects": [
    {
      "id": "laptop",
      "path": "assets/objects/laptop.glb"
    }
  ]
}

This is an illustrative schema, not a format required by CStack. Generate the real manifest from your repository and verify that each path and animation actually exists.

Choose the right adapter for each asset

Existing asset Possible workflow
PNG, JPG, or sprite sheets Canvas, SVG, or Remotion image layers
GLB or glTF models Three.js / React Three Fiber
Rigged characters and complex scenes Blender
SVG illustrations SVG animation
React components Remotion compositions
Audio and voiceovers Timeline and audio synchronization

Keep source assets unchanged. Store generated scenes, previews, renders, and manifests separately.

Also remember that a static image is not a rigged character. A 3D model needs a suitable skeleton and animation data for skeletal movement. Some assets will need preparation before they can be animated.

5. One asset library, multiple visual styles

The same character can appear in several visual treatments without changing its underlying identity.

For example:

  • Cinematic 3D: detailed materials, depth, dramatic lighting, and camera choreography.
  • Isometric: miniature environments and fixed-angle compositions.
  • Cartoon: simplified shapes, expressive movement, and stylized shading.
  • Hand-drawn: sketch textures, irregular lines, and illustration-like motion.
  • Pixel art: sprite-based characters and retro environments.
  • Paper cutout: layered artwork, parallax, and paper-like shadows.
  • Editorial motion graphics: typography, diagrams, transitions, and data visualization.

These are possible creative directions, not a guarantee that one renderer can produce every style automatically. Some styles need different shaders, textures, scene construction, or rendering engines.

A reusable style preset could describe the treatment:

{
  "id": "isometric-miniature",
  "renderer": "threejs",
  "camera": "orthographic",
  "lighting": "soft",
  "materials": "stylized",
  "shadows": true,
  "motion": "smooth"
}

The agent can use this as a starting point and adapt the scene to the actual assets.

6. Install CStack for Claude Code or Antigravity

Clone the repository:

git clone https://github.com/goodnight000/cstack.git
cd cstack

Claude Code: global installation

Claude Code discovers personal skills under ~/.claude/skills/.

mkdir -p "$HOME/.claude/skills"

for skill_name in animated-video asset-library; do
  target="$HOME/.claude/skills/$skill_name"
  if [ ! -e "$target" ]; then
    ln -s "$PWD/skills/$skill_name" "$target"
  fi
done

Google Antigravity: workspace installation

Antigravity discovers workspace skills under .agents/skills/. Run this from the CStack directory and replace the project path with your own:

PROJECT="/absolute/path/to/your/project"

mkdir -p "$PROJECT/.agents/skills"

for skill_name in animated-video asset-library; do
  target="$PROJECT/.agents/skills/$skill_name"
  if [ ! -e "$target" ]; then
    ln -s "$PWD/skills/$skill_name" "$target"
  fi
done

For global Antigravity installation, its documented skill location is ~/.gemini/config/skills/.

References:

7. Give your agent a production brief

After installing the skills, start with a repository audit rather than immediately asking for a complete film.

Here is a prompt you can adapt:

You are my code-driven animation production studio.

Use the animated-video and asset-library skills.

This repository already contains characters, environments,
objects, models, textures, rigs, animation clips, and other
visual assets.

Do not unnecessarily recreate existing artwork.

PHASE 1: ASSET DISCOVERY
- Inspect the repository and identify reusable assets.
- Record file formats, dependencies, rigs, materials,
  animations, and relationships.
- Generate an asset manifest.
- Create visual previews where possible.
- Preserve original files.

PHASE 2: STYLE AND SCENE PLANNING
- Ask for the target platform, aspect ratio, and duration
  if they are not provided.
- Propose a story and scene breakdown.
- Show style frames before full production.
- Assign existing characters, props, and environments
  to each scene.

PHASE 3: ANIMATION
- Choose the right renderer for the assets.
- Animate characters, objects, and cameras.
- Synchronize voiceover, music, and sound effects.
- Reuse existing rigs and animation clips where possible.

PHASE 4: QUALITY REVIEW
- Render preview frames.
- Inspect composition, continuity, timing, and asset identity.
- Fix visual defects before the final render.

DELIVERABLES
- Asset manifest
- Reusable scene components
- Style presets
- Project source code
- Preview renders
- Final MP4

Start with the asset audit. Do not render the full video
until I have reviewed the asset inventory and style frames.

8. What a finished workflow could look like

Imagine giving the agent this request:

Create a 45-second animated short. Baby discovers an abandoned library and finds a mysterious book. Use the existing Baby character, the library environment, and the book props. Add expressive movement, cinematic camera work, sound effects, and a 16:9 final render. Use an isometric miniature 3D style.

The agent should:

  1. Find the existing character, library, and book assets.
  2. Check whether the character has usable rigging and animations.
  3. Plan scenes and camera movements.
  4. Show style frames and a storyboard.
  5. Build the scene code and synchronize audio.
  6. Render a preview and inspect it.
  7. Correct continuity or visual issues.
  8. Produce the final MP4 and reusable source.

Then you can request another version in a hand-drawn style, reusing the same source assets wherever the format and rendering workflow allow it.

9. A few things to get right

Asset compatibility: A PNG illustration, GLB model, Blender scene, and animated FBX file need different handling.

Character consistency: Preserve the same model, proportions, textures, and rig across scenes. Avoid regenerating a character from a text description for every shot.

Rendering performance: High-resolution textures, complex lighting, particles, and long timelines can increase rendering time and memory use.

Deterministic production: Keep scene code, asset versions, dependencies, and render settings under control so you can reproduce a result.

Quality checks: A successful render command does not mean the video looks good. Inspect frames, transitions, audio levels, and the final export.

Licensing: Check the licenses of the skills, rendering engines, dependencies, fonts, music, sound effects, and source assets. A repository's license does not automatically cover every bundled asset or dependency.

10. The bigger idea

The goal is not to generate a new character for every video.

It is to build a reusable visual world once, let an AI agent understand that world, and create different stories inside it.

A repository can become more than a collection of assets. With a manifest, versioned bundles, animation workflows, and rendering tools, it can become the foundation of a repeatable video-production pipeline.

Build the world once. Reuse the assets intelligently. Tell unlimited stories.

Useful repositories and documentation

πŸ“° Read the original article on Dev.to AI

Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.