Create Vertical Animated Story Shorts with Claude, Three.js, and Remotion

What Is Claude Animated Shorts?

Claude Animated Shorts is a free Claude skill based on the workflow demonstrated in How to Make Viral Animated Shorts Using Claude (Full Workflow). It helps create 55–70 second vertical animated story shorts without relying on an AI video generator.

The project combines 2D characters with a colorful 3D environment. Its target style includes ink outlines, painted towns, lens blur, gliding camera movement, a march-style score, and synchronized sound effects. Rendering runs on your own computer with three.js inside Remotion.

The workflow was proven on The Bridge That Fell for a Song, a 67-second short about the 1831 Broughton bridge.

Key Features and Repository Contents

The repository contains the production skill, a complete example project, audio assets, quality-assurance tools, and measured visual references.

• SKILL.md: The main skill definition, including the complete pipeline, production rules, fixes, and final visual values.
• templates/bridge/: Full source for the bridge short, including its world, characters, ink treatment, lens blur, color grade, story, and camera work.
• templates/audio/: Synthesized sound effects, march music, and the final mix with ducking and loudness processing.
• templates/scripts/: Helpers for generating stills and side-by-side sheets, merging shots, and performing frame-by-frame quality assurance.
• references/STYLE_BIBLE.md: A script and visual formula measured from 20 reference shorts.
• references/reports/: Seven reports covering motion, depth, textures, characters, lighting, outlines, and color grading.
• references/frames/: 38 full-size reference frames at 540 by 960 pixels.
• references/sheets/: 20 contact sheets with 60 frames per reference short, totaling 1,200 frames.

Prerequisites

Before installing the skill, prepare the local tools required by its rendering and audio workflow.

• Claude Code for invoking the skill and coordinating the workflow.
• Node for the JavaScript and Remotion environment.
• Remotion with @remotion/three for video composition and three.js rendering.
• Python 3 for the included helper scripts.
• ffmpeg for video and audio processing.

Follow the official Remotion documentation when setting up Remotion and its three.js integration. You can also confirm that the supporting command-line tools are available:

node --version
python3 --version
ffmpeg -version

Install the Claude Skill

1. Clone the repository or download its ZIP archive.

2. Place the complete project folder at the following Claude skills path:

   ~/.claude/skills/cartoon-3d-short/

3. Confirm that SKILL.md, templates/, and references/ remain inside that directory. Preserve the repository structure because the skill relies on these resources for its workflow and visual comparisons.

4. Make sure Remotion, @remotion/three, Node, Python 3, and ffmpeg are available on your computer before starting a production.

Configure Remotion Temporary Storage

Set REMOTION_TMP to a folder on a drive with plenty of free space. Each Remotion bundle copies the approximately 1.3 GB public/ directory into temporary storage.

On a Unix-like shell, you can set the variable for the current session with:

export REMOTION_TMP=/path/to/large-drive/remotion-tmp

Choose a location on a large drive rather than a small system disk. Persistent environment-variable configuration depends on your operating system and shell.

Create Your First Animated Short

1. Choose a Topic

Decide on the historical event, story, or subject you want to explain. The project is designed around short narrative productions, so a focused topic that can fit into approximately one minute is the best starting point.

2. Invoke the Skill in Claude Code

Open Claude Code and request the skill directly. Replace the placeholder with your subject:

Use the cartoon short skill and make a short about [your topic].

For example:

Use the cartoon short skill and make a short about the Broughton bridge collapse.

3. Let the Skill Follow the Production Pipeline

Claude follows the instructions in SKILL.md. The workflow proceeds through these main stages:

1. Topic and facts: Establish the subject and factual foundation.
2. Script: Shape the facts into a short narrative.
3. Voice: Prepare the narration for the story.
4. Shot plan: Define the sequence and camera plan in story.ts.
5. Stills: Generate representative frames before committing to final rendering.
6. Rendering: Produce the animated shots locally through Remotion and three.js.
7. Quality checks: Compare frames with the measured reports and supplied reference frames.
8. Final output: Produce the final 2K render and sound mix.

Understand the Visual and Audio Workflow

The supplied bridge template is a complete example of how the project organizes a finished short. Study templates/bridge/ to see how the environment, characters, outlines, depth effects, color grade, camera movement, and story timing work together.

For sound, inspect templates/audio/. It demonstrates the synthesized effects, march score, loudness treatment, and ducking used in the proven production. Ducking helps balance the soundtrack around narration or other important audio.

The project also includes scripts for still generation, shot merging, comparison sheets, and frame-by-frame checks. These tools support an iterative workflow in which visual problems can be identified before the complete production is finalized.

Use the References Correctly

The reference materials are intended to guide the visual treatment rather than supply story content.

• Read references/STYLE_BIBLE.md to understand the measured script and visual formula.
• Consult the reports when tuning motion, depth, textures, character treatment, lighting, outlines, or grading.
• Compare generated stills against the 38 full-size reference frames.
• Use the contact sheets to evaluate pacing and visual consistency across complete sequences.

Story, characters, and voice should always be your own. Use the included references for the look, not for the content.

Advanced Tips

Review Stills Before Full Renders

Use the still-generation and comparison workflow before spending time on complete renders. Representative frames make it easier to assess composition, outlines, lighting, depth, blur, and grading early in production.

Use the Reports as Targeted Checklists

When a shot looks wrong, consult the report that matches the problem instead of changing every visual setting at once. For example, examine the motion report for movement issues or the outline report when the ink treatment does not match the intended style.

Study the Complete Bridge Template

The bridge project is more than a visual sample: it is the full source of a finished 67-second short. Use it to understand how story.ts, cameras, characters, environmental elements, post-processing, and audio contribute to one production.

Plan Disk Space Before Rendering

Because every Remotion bundle copies roughly 1.3 GB of public assets into its temporary folder, repeated bundles can place significant pressure on limited storage. Point REMOTION_TMP at a suitably large drive before beginning a render-heavy session.

Keep Original Creative Elements

Create a new story, original characters, and your own voice treatment for each project. The supplied frames are licensed for style study only, even though the repository code and documentation are available under the MIT License.

Licensing

The project code and documentation are licensed under the MIT License; consult the repository’s LICENSE file for details. The included reference frames have a narrower purpose and are provided only for studying the visual style.

Conclusion

Claude Animated Shorts provides a structured local workflow for turning a topic into a polished vertical animated story. After installing the skill and its dependencies, you can prompt Claude Code with a subject and follow a pipeline covering research, scripting, voice, shot planning, still reviews, frame comparisons, rendering, and sound mixing. The included bridge production and measured references offer a practical foundation for building original shorts with a consistent look.