Create Animated Videos with Claude Code and Remotion

The concept: AI-animated videos

With Claude Code and Remotion, you can generate professional animated videos video editing, product animations, explainer videos for software. All without knowing how to code or edit video.

What makes the difference today is prompting - knowing how to talk to AI - and the ability to use the right tools together.

What is Remotion?

Remotion is a framework that lets you create animated videos in code. We'll install it in Claude Code, which will let us develop animations with artificial intelligence.

In practice: you describe what you want, and the AI generates the code needed to create the animation.

Setting up the environment

Step 1: Install VS Code (or Antigravity)

Download and install a code editor like VS Code or Google Antigravity. Open it and create a new folder for your project (e.g., remotion-test).

Step 2: Install Claude Code

In the editor, go to Extensions and search for "Claude Code". Install the extension. Once installed, you'll have access to the Claude Code chat at the bottom left or top right of the interface.

Step 3: Install Remotion

Go to the Remotion website, copy the install command, and paste it into the Claude Code chat:

npx create-video@latest

Accept the requested permissions. When asked for a template, choose "Blank template" to start from scratch.

Step 4: Install the Remotion skill

A "skill" is a set of instructions that guides the AI in generating animations. Search for github skill remotion and copy the repository URL.

In Claude Code, ask:

Installe ce skill : [URL du repo GitHub]

This will create a folder .claude/skills with rules in Markdown format that will guide the AI in creating your animations.

Creating your first animation

Prepare the prompt file

Create a folder prompt and inside it a file prompt.md. This file will contain your generation instructions.

You can use a 300-line template that automatically structures your animations. The idea is to describe what you want to create.

Launching the generation

Example prompt:

J'aimerais une animation qui explique le fonctionnement de Claude Code.
Utilise le fichier prompt.md pour generer l'animation et utilise aussi le skill remotion.
Je veux 12 scenes sur 30 secondes.

Claude Code will:

1. Create a scene plan (intro, explanations, conclusion)
2. Generate the code for each scene (several hundred lines per scene)
3. Structure everything in JSON format

Preview and export

Once the generation is complete, ask Claude Code to:

Lance l'application

Authorize the command npm start. A localhost link will appear - click it to open Remotion Studio.

You'll see a timeline-style interface with your video. Start playback to see the render.

Export to MP4

To export, click Render then Render video. Your video will be exported in MP4 format.

Improving your animation

This is where "vibe coding" comes in: you discuss with the AI to refine your video.

Examples of improvement requests:

• Add two scenes and improve the transitions between them
• Remove the left-to-right transitions and use different ones
• The icon is compressed - it should match the image's dimensions

The appearance of text in the motion design is particularly professional - it's the kind of effect motion designers create.

Adding assets

To improve your animations, bring your own elements:

• Icons - download PNG icons with a transparent background
• Logos - the brand or product logo
• Screenshots - dashboards, interfaces
• Icon libraries - install packages like react-icons

Place your images in the public folder of the Remotion project. Then ask Claude Code to integrate them:

Integre l'icone qui est dans le dossier public pour la mettre en introduction

Alternative method with the Antigravity agent

If you're low on Claude Code credits, you can use the agent built into Google Antigravity to keep developing.

Example prompt for generating an animation from a website:

Cree-moi une animation explicative de [URL du site] en mode douleur/benefice.
Utilise le skill remotion et le prompt.md.
Les transitions doivent etre diverses et en rapport avec la DA du site.
Je veux 15 scenes sur 30 secondes.
Je te donne l'icone en fichier joint.

The agent will fetch information from the website, extract the data, and generate a matching animation.

Tips for successful animations

• Iterate - the first render is a starting point, refine it through conversation
• Bring in graphic elements - icons, UI images, logos
• Be precise about your transitions - specify which transition for each scene
• Use icon libraries - install packages to have more options
• Practice - like any tool, mastery comes with practice

It really takes much less time than doing it by hand, and there's no need to know how to edit.