Créer des vidéos animées avec Claude Code et Remotion

Le concept : vidéos animées par l'IA

Avec Claude Code et Remotion, vous pouvez générer des vidéos animées professionnelles : montage vidéo, animations produits, vidéos explicatives pour des logiciels. Le tout sans savoir coder ni monter de vidéo.

Ce qui fait la différence aujourd'hui, c'est le prompting - savoir parler à l'IA - et la capacité à utiliser les bons outils ensemble.

Qu'est-ce que Remotion ?

Remotion est un framework qui permet de créer des vidéos animées en code. On va l'installer dans Claude Code, ce qui nous permettra de développer des animations avec l'intelligence artificielle.

En pratique : vous décrivez ce que vous voulez, et l'IA génère le code nécessaire pour créer l'animation.

Installation de l'environnement

Étape 1 : Installer VS Code (ou Antigravity)

Télécharger et installer un éditeur de code comme VS Code ou Google Antigravity. Ouvrez-le et créez un nouveau dossier pour votre projet (ex: remotion-test).

Étape 2 : Installer Claude Code

Dans l'éditeur, allez dans Extensions et cherchez "Claude Code". Installez l'extension. Une fois installée, vous aurez accès au chat Claude Code en bas à gauche ou en haut à droite de l'interface.

Étape 3 : Installer Remotion

Allez sur le site de Remotion, copiez la commande d'installation, et collez-la dans le chat Claude Code :

npx create-video@latest

Acceptez les autorisations demandées. Quand on vous demande un template, choisissez "Blank template" pour partir de zéro.

Étape 4 : Installer le skill Remotion

Un "skill" est un ensemble d'instructions qui guide l'IA dans la génération d'animations. Cherchez github skill remotion et copiez l'URL du repository.

Dans Claude Code, demandez :

Installe ce skill : [URL du repo GitHub]

Cela créera un dossier .claude/skills avec des règles en format Markdown qui guideront l'IA pour créer vos animations.

Créer votre première animation

Préparer le fichier prompt

Créez un dossier prompt et à l'intérieur un fichier prompt.md. Ce fichier contiendra vos instructions de génération.

Vous pouvez utiliser un template de 300 lignes qui structure automatiquement vos animations. L'idée est de décrire ce que vous voulez créer.

Lancer la génération

Exemple de 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 va :

Créer un plan de scènes (intro, explications, conclusion)
Générer le code pour chaque scène (plusieurs centaines de lignes par scène)
Structurer le tout dans un format JSON

Prévisualiser et exporter

Une fois la génération terminée, demandez à Claude Code :

Lance l'application

Autorisez la commande npm start. Un lien localhost apparaitra - cliquez dessus pour ouvrir Remotion Studio.

Vous verrez une interface de type timeline avec votre vidéo. Lancez la lecture pour voir le rendu.

Exporter en MP4

Pour exporter, cliquez sur Render puis Render vidéo. Votre vidéo sera exportée en format MP4.

Améliorer votre animation

C'est la que le "vibe coding" entre en jeu : vous discutez avec l'IA pour affiner votre vidéo.

Exemples de demandes d'amélioration :

Rajoute deux scenes et ameliore les transitions entre les scenes
Enleve les transitions de gauche a droite pour des transitions differentes
L'icone est compressee, il faut que la taille fasse la taille de l'image

L'apparition des textes en motion design est particulièrement professionnelle - c'est le genre d'effet que font les motion designers.

Ajouter des assets

Pour améliorer vos animations, apportez vos propres éléments :

Icônes - téléchargez des icônes PNG avec fond transparent
Logos - le logo de la marque ou du produit
Captures d'écran - dashboards, interfaces
Libraries d'icônes - installez des packages comme react-icons

Placez vos images dans le dossier public du projet Remotion. Ensuite, demandez à Claude Code de les intégrer :

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

Méthode alternative avec l'agent Antigravity

Si vous êtes sature en crédits Claude Code, vous pouvez utiliser l'agent intégré a Google Antigravity pour continuer à développer.

Exemple de prompt pour générer une animation à partir d'un site web :

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.

L'agent ira chercher les informations sur le site web, extraira les données et générera une animation adaptée.

Conseils pour des animations réussies

Iterez - le premier rendu est une base, améliorez-le par la conversation
Apportez des éléments graphiques - icônes, images UI, logos
Soyez précis dans vos transitions - spécifiez quelle transition par scène
Utilisez des libraries d'icônes - installez des packages pour avoir plus d'options
Entrainez-vous - comme tout outil, la maitrise vient avec la pratique

Ça prend vraiment beaucoup moins de temps que de faire ça à la main, et pas besoin de savoir monter.

Aujourd'hui, vous pouvez deja commencer a generer des videos animees grace a l'intelligence artificielle avec seulement deux outils : Claude Code et Remotion. Et je parle de vraies videos animees - montage video, animations produits, videos explicatives pour des logiciels.

La majorite passe a cote en pensant qu'il faut etre developpeur ou etre motion designer. Mais c'est faux, les barrieres sont en train de tomber grace a l'IA. Aujourd'hui, ce qui fait la difference, c'est le prompting - savoir parler a l'IA - et la capacite a utiliser les bons outils.

Remotion permet de faire des videos animees grace a l'IA. On va venir l'installer dans Claude Code ce qui va nous permettre de developper avec l'intelligence artificielle car en fait c'est du code qu'on va developper.

Pour installer Claude Code dans votre editeur, allez dans Extensions et tapez "Claude Code". Installez-le. Ensuite, allez sur le site de Remotion, copiez la commande d'installation, collez-la dans le chat Claude Code et lancez. Quand il vous demande un template, choisissez "Blank template".

Ensuite, installez le skill Remotion. Un skill, c'est du code, des instructions qui permettent a l'IA de savoir comment generer votre animation. Cherchez "github skill remotion", copiez l'URL et dites a Claude Code de l'installer.

Pour generer votre premiere animation, creez un dossier "prompt" avec un fichier "prompt.md" dedans. Decrivez ce que vous voulez - par exemple "j'aimerais une animation qui explique le fonctionnement de Claude Code, utilise le skill remotion, je veux 12 scenes sur 30 secondes".

Claude Code va creer un plan de scenes, generer le code pour chaque scene, et structurer le tout. Une fois termine, dites "lance l'application". Un lien localhost apparait, cliquez dessus pour ouvrir Remotion Studio et voir votre video.

Pour ameliorer, discutez avec l'IA : "rajoute deux scenes", "ameliore les transitions", "l'icone est comprimee, agrandis-la". C'est le vibe coding - vous itérez par la conversation.

Apportez vos propres elements : icones, logos, captures d'ecran. Mettez-les dans le dossier "public" et demandez a Claude Code de les integrer. Vous pouvez aussi installer des packages comme react-icons pour avoir plus d'options.

Ca prend vraiment beaucoup moins de temps que de faire ca a la main et pas besoin de savoir monter au final. A vous de discuter avec l'IA pour lui dire ce qu'elle doit faire et ce que vous voulez qu'elle change.

Essayer Remotion

Le framework pour créer des vidéos en code, maintenant accessible via l'IA.

Site officiel Remotion