Claude Code can now make videos, here’s how

Cloth Code & Remotion: AI-Powered Video Creation - A Detailed Summary

Key Concepts:

• Remotion: A Rust-based framework for programmatic video creation, treating video as code (React components).
• Agent Skills: Instruction files enabling AI agents (Cloth Code, Open Code, etc.) to utilize specific tools like Remotion.
• Progressive Disclosure: A technique where AI agents only load relevant skill instructions based on the task, optimizing context window usage.
• React Components: The building blocks of Remotion videos, allowing for dynamic and reusable video elements.
• FFmpeg: A tool used by Remotion to screenshot frames and stitch them into an MP4 video file.
• Storyboarding: The process of outlining each scene of a video before prompting the AI.
• Iterative Prompting: Refining prompts through multiple iterations to achieve desired results.

1. Introduction: The Power of AI-Generated Video

Cloth Code now integrates with Remotion, enabling the creation of professional-quality animations directly from plain English prompts. The entire video the viewer is watching was generated using this method, demonstrating the technology’s capabilities. This represents a significant shift, allowing users without animation or design skills to produce marketing materials and product videos. The speaker emphasizes the timeliness of this development, stating, “It has never been a better time to start your own business.”

2. What is Remotion?

Remotion is a framework for creating videos programmatically using the Rust programming language. It functions by treating video creation as a website that is recorded frame by frame. Data is sourced from APIs, databases, or user input, and each render produces a unique video. Remotion’s strength lies in its compatibility with AI agents, which excel at writing code but struggle with traditional graphical user interfaces (GUIs) like After Effects or Premiere Pro. Remotion bridges this gap by converting video creation into React components, allowing agents to generate videos through code. An example of Remotion code was shown, illustrating its structure.

3. Agent Skills & Progressive Disclosure

The integration between Cloth Code and Remotion is facilitated by “Agent Skills.” These are instruction files that teach AI agents how to interact with Remotion’s API. A key feature of Agent Skills is “Progressive Disclosure.” Instead of loading all instructions at once, the agent only loads the relevant skills when the task requires them. This optimizes the context window and improves efficiency. Agent Skills are an open standard, being adopted across the AI ecosystem, and currently work with Cloth Code, Agent Zero, and Open Code, among others. The Remotion skill specifically contains API patterns, component conventions, and reference documentation for 3D audio and captions.

4. Best Practices for Effective Remotion Prompts

The speaker outlines several best practices for achieving optimal results with the Remotion skill:

• Clear Storyboarding: Describing each scene in detail before prompting Cloth Code.
• Iterative Approach: Starting with small prompts, reviewing the results, and refining the prompt in multiple iterations (typically 5-10 prompts).
• Modular Compositions: Building reusable components for intros, transitions, and outros to avoid monolithic code.
• High-Quality Assets: Providing high-resolution images, sprites, or product photos to enhance the visual quality of the animation.

5. Setting Up Remotion & Cloth Code

The speaker provides a step-by-step guide to setting up Remotion and integrating it with Cloth Code:

1. Remotion Project Creation: Using the command unpx create remotion in the terminal, selecting a blank template, adding Tailwind CSS, and enabling agent skills.
2. Skill Installation: Using the skills.sh page (linked in the video description) to copy and paste a terminal command to install the Remotion skill.
3. Agent Selection: Choosing Cloth Code as the agent during the installation process.
4. Launching Cloth Code: Running the command cloth in the terminal to launch the Cloth Code interface.
5. Skill Verification: Using the SLSkill command within Cloth Code to confirm the Remotion skill is installed.
6. Project Directory: Creating a dedicated folder for the Remotion project to maintain organization.

6. Practical Examples & Demonstrations

Several examples were showcased, all created using Cloth Code and Remotion:

• Pythagorean Proof Animation: A complex animation replicating the style of the YouTube channel "3Blue1Brown," generated from a detailed 400-line prompt. The process involved approximately 10 minutes of rendering time.
• Cloth Code Advertisement: A short advertisement for Cloth Code itself, created with a simpler prompt and assets (a screenshot of the Cloth Code UI). This animation was generated in under 2 minutes.
• Video Game Animation: An example of using Remotion to create animations for a video game, utilizing provided sprites.
• Email Marketing Animation: A professional-looking animation showcasing an email interface, highlighting features like a moving cursor and text.

7. Technical Details: How Remotion Works Under the Hood

The speaker explains the technical workflow of Remotion:

• Sequence Components: These components define the timing and placement of elements within the video, similar to a timeline in traditional video editing software.
• Development Server: Running npm rundev launches a local host player allowing real-time previewing of the video.
• Rendering Process: When rendering, Remotion captures screenshots of each frame and stitches them together into an MP4 file using FFmpeg.

8. Notable Quotes

• “It takes 2 seconds [to subscribe] and it helps out a lot.” (Encouraging viewers to subscribe)
• “In 2026, you really cannot afford to fall behind.” (Emphasizing the importance of adopting AI tools)
• “If you're not using cloth code in 2026, you are falling behind.” (Reinforcing the value proposition of Cloth Code)

9. Conclusion

Cloth Code and Remotion represent a paradigm shift in video creation, democratizing access to professional-quality animation. By leveraging the power of AI and programmatic video generation, users can create compelling marketing materials and product videos without requiring specialized skills. The speaker encourages viewers to explore the technology and emphasizes the importance of staying current with AI advancements, particularly in the context of business and innovation. The iterative prompting process, combined with high-quality assets, is key to unlocking the full potential of this technology.