# claude-animated-shorts: Remotion + three.js Skill for Agent-Built Story Shorts

> Source: <https://explainx.ai/blog/claude-animated-shorts-remotion-threejs-agent-skill-github-trending-guide-2026?utm_source=rss&utm_medium=feed&utm_campaign=blog>
> Published: 2026-11-08 00:00:00+00:00

The [mromidev/claude-animated-shorts](https://github.com/mromidev/claude-animated-shorts?ref=explainx) repository gained about **2,200 GitHub stars** in the first week of November 2026. It is not a model release and not a hosted video API. It is a **Claude agent skill** that encodes a full production path for **55–70 second vertical story shorts**: 2D ink-outline characters in a colourful painted 3D town, lens blur, gliding cameras, march music and sound effects, all rendered with **three.js inside [Remotion](https://www.remotion.dev/?ref=explainx)** on your PC.

If you already track [agent skills](https://explainx.ai/blog/what-are-agent-skills-complete-guide), this repo is a useful contrast to skills that only restyle UI or pixel art. It bundles measured style rules, a complete template short, audio synthesis, frame QA helpers and dozens of reference frames so the agent can compare its output against a fixed look target.

## TL;DR

| Question | Answer | 
|---|---|
| What ships? | `SKILL.md` , bridge template, audio templates, style bible, seven measurement reports, 1,200 reference frames | 
| Install path | `~/.claude/skills/cartoon-3d-short/` | 
| Runtime stack | Remotion + `@remotion/three` , Node, Python 3, ffmpeg | 
| Output shape | Vertical short, roughly 55–70s, 2K final render with mixed audio | 
| Stars (Nov 8, 2026) | About 2.2k on the repo page | 
| License | MIT on code and docs; reference frames restricted to style study | 

## Why this skill trended

Short-form history and explainer channels on vertical video keep growing, and many builders now ask coding agents to **produce motion**, not just React landing pages. Tools such as [benjitaylor/skills Stageshow](https://explainx.ai/blog/benjitaylor-skills-stageshow-faux-product-ui-agent-skill-react-github-trending-guide-2026) and [rea-video](https://explainx.ai/blog/rea-video-reverse-engineer-any-video-shot-by-shot-agent-skill-live-ai-code-apache-2026) sit on different parts of that curve: Stageshow fakes product UI in the browser; rea-video reverse-engineers existing footage shot by shot.

**claude-animated-shorts** targets narrated **story shorts** with a specific cartoon-3D look. The README credits a workflow video titled *How to Make Viral Animated Shorts Using Claude (Full Workflow)* and documents a finished piece, *The Bridge That Fell for a Song*, at 67 seconds about the 1831 Broughton bridge. That proof short is not a marketing mockup; the `templates/bridge/` tree is the full source.

The traction is the combination of **open templates** plus **hard measurement docs**. The `references/reports/` folder lists seven reports on motion, depth, textures, characters, lighting, outlines and grade. The `references/frames/` folder holds 38 full-size 540×960 frames, and `references/sheets/` holds 20 contact sheets with 60 frames each. An agent with vision or frame-export scripts can tighten output against those anchors instead of guessing.

## What is inside the repository?

According to the [README](https://github.com/mromidev/claude-animated-shorts?ref=explainx#readme), the layout is deliberate:

| Path | Role | 
|---|---|
| `SKILL.md` | Full pipeline, rules, fixes and final look values | 
| `templates/bridge/` | Complete bridge short: world, characters, ink, lens blur, grade, `story.ts` camera plan | 
| `templates/audio/` | Synthesized SFX, march music, ducking and loudness mix | 
| `templates/scripts/` | Stills, side-by-side sheets, shot merge and frame-by-frame QA helpers | 
| `references/STYLE_BIBLE.md` | Script and visual formula measured from 20 reference shorts | 
| `references/reports/` | Seven measured reports across the visual stack | 
| `references/frames/` and`references/sheets/` | 1,238 reference frames for comparison | 

The skill name inside Claude is **`cartoon-3d-short`**. That naming matters when you have several skills installed; [pixelfx](https://explainx.ai/blog/pixelfx-244-pixel-art-effects-claude-code-skill-mit-github-trending-guide-2026) and [Scenario Labs skills](https://explainx.ai/blog/scenario-labs-skills-agent-skills-scenario-mcp-game-art-blender-unity-install-github-trending-2026) use other folders and triggers.

## The pipeline the agent follows

The README compresses the workflow into one sentence for users: say *"Use the cartoon short skill and make a short about …"* and Claude follows `SKILL.md` through topic and facts, script, voice, the shot plan in `story.ts`, stills, renders, agent frame checks against reports and references, then a final **2K render and sound mix**.

That ordering matters for anyone who has watched agents skip straight to code:

1. **Topic and sourcing.** Historical or factual shorts need a defensible script. The skill treats the bridge example as a pattern, not a license to copy narration.
2. **Script and voice.** Spoken pacing drives shot count in a 55–70 second window.
3. **`story.ts` camera plan.** Camera glides and beats are data, not improvised in the renderer.
4. **Stills and QA.** Helpers in`templates/scripts/` support side-by-side review before you commit to a long render.
5. **Final render and audio.** March score and SFX come from the audio template folder with ducking rules baked in.

Remotion is the frame clock. **@remotion/three** embeds a three.js scene per composition so the agent can keep vector-style characters on cards while the town stays a 3D painted set. That is the same broad family as local 3D codegen tools such as [Qwen3.5 4B GLB coder](https://explainx.ai/blog/qwen3-5-4b-glb-3d-coder-threejs-godot-export-apache-2026), but here the scene graph is hand-authored TypeScript rather than a exported GLB from a small model.

A branching diagram on stacked pages suggests shot planning before a Remotion render pass

## Install and hardware expectations

**Install.** Clone or copy the repo to `~/.claude/skills/cartoon-3d-short/`. Dependencies are Remotion with `@remotion/three`, plus Node, Python 3 and ffmpeg on PATH.

**Disk.** The README is explicit: set `REMOTION_TMP` to a folder on a large drive because each bundle copies `public/` at about **1.3 GB** into the temp directory. On a laptop with a small system SSD, default temp paths fill quickly during iterative renders.

**Originality.** Story, characters and voice must be your own. Reference material teaches **look**, not plot. That reduces legal risk and matches how other creative skills, such as [Lemo Opuscar for short films](https://explainx.ai/blog/lemo-opuscar-claude-code-skill-short-films-no-video-model-43-styles-2026), draw a line between style references and copy-paste content.

## How this compares to nearby skills

| Skill / repo | Output | Video API? | Best for | 
|---|---|---|---|
| claude-animated-shorts | Vertical narrated story short, cartoon-3D look | No | History explainers, fable-style shorts | 
| Stageshow | Faux product UI loops in React | No | Landing heroes and feature cards | 
| rea-video | Shot-by-shot reconstruction notes | No | Studying how a published video was built | 
| Lemo Opuscar | Short-film workflows with many styles | No | Broader film styles, not one measured 3D town | 
| pixelfx | Pixel post effects on stills | No | Retro game visuals, not full motion shorts | 

None of these replace a general [3D simulator teardown skill](https://explainx.ai/blog/teardown-claude-code-skill-3d-simulator-offline-html-github-trending-2026) for physics demos. They overlap in **agent orchestration**: long `SKILL.md` files, templates the agent must not freestyle away from, and scripts that turn subjective "does it look right?" into checklists.

## Remotion and @remotion/three setup notes

The README does not pin a single Remotion major version; you should align with whatever your Claude Code project already uses, then add **`@remotion/three`** so compositions can mount a WebGL scene per frame. In practice that means:

- A **Remotion root** that registers the short composition at the target fps and duration (roughly 55–70 seconds).
- A **three.js scene** exported as a React component Remotion can render frame by frame, not a pre-baked video file.
- **ffmpeg** on PATH for the final mux once video and the synthesized audio bus are ready.

If you have never used Remotion outside agents, their docs describe bundling `public/` assets into each render — which is why this skill's **`REMOTION_TMP`** warning matters. Developers who only know [MLX on Apple Silicon](https://explainx.ai/blog/mlx-apple-silicon-run-llms-complete-guide-2026) for local models still face a separate **Node render farm** problem here: the bottleneck is frames, not token generation.

Python 3 shows up for helper scripts in `templates/scripts/` (stills, contact sheets, merge and QA). You do not need a GPU model server; you need disk, CPU and patience.

## Audio stage: march, SFX and ducking

The `templates/audio/` tree is not background music looted from a stock site. The README describes **synthesized** sound effects, **march music**, and a **mix with ducking and loudness** rules so narration stays intelligible over percussion. For agents, that is another checklist: generate voice, generate score, duck under speech, normalize, then attach to the Remotion composition.

Teams comparing this to [rea-video's shot reconstruction](https://explainx.ai/blog/rea-video-reverse-engineer-any-video-shot-by-shot-agent-skill-live-ai-code-apache-2026) should note the direction of travel: rea-video explains an existing cut; cartoon-3d-short **authors** a new one from facts and measured style targets.

## Limits and risks

**Render time and GPU.** three.js inside Remotion still costs real minutes per pass at 2K. The skill does not magically parallelize on cloud GPUs; you own the queue.

**Audio quality.** The repo ships synthesized march and SFX templates. They are consistent for the style bible; they are not a replacement for licensed stock music on monetized channels unless you swap the audio stage.

**Agent drift.** Without the frame QA pass the README describes, agents may wander off the measured outline weights or grade. The reports exist because that drift is common.

**Skill path confusion.** The folder name `cartoon-3d-short` differs from the GitHub repo name. Document your install in team notes so [Claude Code plugins](https://explainx.ai/blog/anthropics-claude-plugins-official-directory-structure-install-submit-trust-guide-2026) and personal skills do not collide.

Layers of server blocks with green airflow lines suggest iterative render passes cooling down between QA retries

## Who should try it this week?

- **Claude Code users** making educational Shorts who want a reproducible look without paying per-second video APIs.
- **Remotion developers** who want an agent-facing spec (`SKILL.md` +`story.ts` ) instead of ad-hoc prompts.
- **Teams comparing agent skills** after reading our[floorplan codebase map skill](https://explainx.ai/blog/floorplan-claude-code-codex-codebase-map-health-check-github-trending-2026) or other trending SKILL.md repos — this one is heavier on media QA than on repo cartography.

## Related reading

## Checklist before you publish a short

Run through this list once the agent claims the render is done:

1. Confirm **story rights** — your script and voice, not a copied reference short.
2. Spot-check **outline weight and grade** against`references/frames/` stills.
3. Listen for **loudness spikes** after ducking; re-run the audio template stage if speech hides under percussion.
4. Archive **`REMOTION_TMP`** logs if a bundle failed mid-copy — the 1.3 GB` public/` copy error is almost always disk, not mystery "AI slop."

*Star counts and tree layout match the GitHub repository on November 8, 2026.*