{"slug": "claude-animated-shorts-remotion-three-js-skill-for-agent-built-story-shorts", "title": "claude-animated-shorts: Remotion + three.js Skill for Agent-Built Story Shorts", "summary": "The mromidev/claude-animated-shorts repository gained about 2,200 GitHub stars in the first week of November 2026 for a Claude agent skill, named cartoon-3d-short, that encodes a full production path for 55–70 second vertical story shorts rendered with three.js inside Remotion. The MIT-licensed repo ships SKILL.md, a complete bridge template short (The Bridge That Fell for a Song, 67 seconds, about the 1831 Broughton bridge), audio templates, a style bible measured from 20 reference shorts, seven measurement reports and 1,238 reference frames, installed to ~/.claude/skills/cartoon-3d-short/ and run on Node, Python 3 and ffmpeg. The traction reflects builders asking coding agents to produce motion rather than just React landing pages, with the open templates plus hard measurement docs letting an agent compare its output against fixed look anchors instead of guessing.", "body_md": "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.\n\nIf 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.\n\n## TL;DR\n\n| Question | Answer | \n|---|---|\n| What ships? | `SKILL.md` , bridge template, audio templates, style bible, seven measurement reports, 1,200 reference frames | \n| Install path | `~/.claude/skills/cartoon-3d-short/` | \n| Runtime stack | Remotion + `@remotion/three` , Node, Python 3, ffmpeg | \n| Output shape | Vertical short, roughly 55–70s, 2K final render with mixed audio | \n| Stars (Nov 8, 2026) | About 2.2k on the repo page | \n| License | MIT on code and docs; reference frames restricted to style study | \n\n## Why this skill trended\n\nShort-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.\n\n**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.\n\nThe 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.\n\n## What is inside the repository?\n\nAccording to the [README](https://github.com/mromidev/claude-animated-shorts?ref=explainx#readme), the layout is deliberate:\n\n| Path | Role | \n|---|---|\n| `SKILL.md` | Full pipeline, rules, fixes and final look values | \n| `templates/bridge/` | Complete bridge short: world, characters, ink, lens blur, grade, `story.ts` camera plan | \n| `templates/audio/` | Synthesized SFX, march music, ducking and loudness mix | \n| `templates/scripts/` | Stills, side-by-side sheets, shot merge and frame-by-frame QA helpers | \n| `references/STYLE_BIBLE.md` | Script and visual formula measured from 20 reference shorts | \n| `references/reports/` | Seven measured reports across the visual stack | \n| `references/frames/` and`references/sheets/` | 1,238 reference frames for comparison | \n\nThe 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.\n\n## The pipeline the agent follows\n\nThe 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**.\n\nThat ordering matters for anyone who has watched agents skip straight to code:\n\n1. **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.\n2. **Script and voice.** Spoken pacing drives shot count in a 55–70 second window.\n3. **`story.ts` camera plan.** Camera glides and beats are data, not improvised in the renderer.\n4. **Stills and QA.** Helpers in`templates/scripts/` support side-by-side review before you commit to a long render.\n5. **Final render and audio.** March score and SFX come from the audio template folder with ducking rules baked in.\n\nRemotion 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.\n\nA branching diagram on stacked pages suggests shot planning before a Remotion render pass\n\n## Install and hardware expectations\n\n**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.\n\n**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.\n\n**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.\n\n## How this compares to nearby skills\n\n| Skill / repo | Output | Video API? | Best for | \n|---|---|---|---|\n| claude-animated-shorts | Vertical narrated story short, cartoon-3D look | No | History explainers, fable-style shorts | \n| Stageshow | Faux product UI loops in React | No | Landing heroes and feature cards | \n| rea-video | Shot-by-shot reconstruction notes | No | Studying how a published video was built | \n| Lemo Opuscar | Short-film workflows with many styles | No | Broader film styles, not one measured 3D town | \n| pixelfx | Pixel post effects on stills | No | Retro game visuals, not full motion shorts | \n\nNone 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.\n\n## Remotion and @remotion/three setup notes\n\nThe 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:\n\n- A **Remotion root** that registers the short composition at the target fps and duration (roughly 55–70 seconds).\n- A **three.js scene** exported as a React component Remotion can render frame by frame, not a pre-baked video file.\n- **ffmpeg** on PATH for the final mux once video and the synthesized audio bus are ready.\n\nIf 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.\n\nPython 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.\n\n## Audio stage: march, SFX and ducking\n\nThe `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.\n\nTeams 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.\n\n## Limits and risks\n\n**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.\n\n**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.\n\n**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.\n\n**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.\n\nLayers of server blocks with green airflow lines suggest iterative render passes cooling down between QA retries\n\n## Who should try it this week?\n\n- **Claude Code users** making educational Shorts who want a reproducible look without paying per-second video APIs.\n- **Remotion developers** who want an agent-facing spec (`SKILL.md` +`story.ts` ) instead of ad-hoc prompts.\n- **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.\n\n## Related reading\n\n## Checklist before you publish a short\n\nRun through this list once the agent claims the render is done:\n\n1. Confirm **story rights** — your script and voice, not a copied reference short.\n2. Spot-check **outline weight and grade** against`references/frames/` stills.\n3. Listen for **loudness spikes** after ducking; re-run the audio template stage if speech hides under percussion.\n4. 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.\"\n\n*Star counts and tree layout match the GitHub repository on November 8, 2026.*", "url": "https://wpnews.pro/news/claude-animated-shorts-remotion-three-js-skill-for-agent-built-story-shorts", "canonical_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_at": "2026-11-08 00:00:00+00:00", "updated_at": "2026-11-09 02:01:42.133157+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "generative-ai", "developer-tools", "artificial-intelligence"], "entities": ["mromidev/claude-animated-shorts", "Claude", "Remotion", "three.js", "@remotion/three", "cartoon-3d-short", "The Bridge That Fell for a Song", "benjitaylor/skills Stageshow"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/claude-animated-shorts-remotion-three-js-skill-for-agent-built-story-shorts", "markdown": "https://wpnews.pro/news/claude-animated-shorts-remotion-three-js-skill-for-agent-built-story-shorts.md", "text": "https://wpnews.pro/news/claude-animated-shorts-remotion-three-js-skill-for-agent-built-story-shorts.txt", "jsonld": "https://wpnews.pro/news/claude-animated-shorts-remotion-three-js-skill-for-agent-built-story-shorts.jsonld"}}