Comment j'ai créé une vidéo de motion design pro avec Claude Code + Remotion (sans montage)

AAndy Lo
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology

Transcript

00:00:00Regardez cette vidéo explicative que nous avons créée.
00:00:02Mars, la planète rouge, un monde qui captive l'humanité depuis des siècles.
00:00:08C'est la quatrième planète à partir du Soleil, située juste après la Terre dans notre système solaire.
00:00:14Ceci n'a pas été édité dans After Effects.
00:00:16Nous n'avons pas touché aux images clés, ni rien animé à la main.
00:00:21Claude a utilisé la nouvelle compétence Remotion Agent pour la construire et la rendre pour nous.
00:00:26Le mouvement, le timing, tout a été fait uniquement par commande textuelle.
00:00:30Mais d'abord, parlons des compétences de Claude.
00:00:33Si vous suivez l'actualité de l'IA, les "skills" de Claude sont le sujet brûlant du moment.
00:00:38Tout le monde en parle, mais voici ce qu'elles sont réellement.
00:00:43Ce sont des manuels d'instructions qui apprennent à Claude à maîtriser des outils et des flux de travail spécifiques.
00:00:49Ce sont des packs de connaissances spécialisées qui transforment Claude d'un assistant généraliste...
00:00:54...en un expert dans des domaines comme la production vidéo, l'analyse de données ou l'automatisation.
00:01:00Et quand on combine ces compétences avec Claude Code et l'outil de codage d'Anthropic,
00:01:05on débloque quelque chose de puissant.
00:01:07Et maintenant, passons à Remotion.
00:01:09C'est un framework qui permet de créer des vidéos en utilisant du code React,
00:01:13la même technologie qui propulse les sites web modernes.
00:01:15Mais voici le problème.
00:01:16Remotion est incroyablement puissant, mais complexe.
00:01:20Il faut comprendre React, les bibliothèques d'animation, les fonctions de timing et le rendu vidéo.
00:01:26C'est un outil de développeur qui est resté hors de portée pour la plupart des gens.
00:01:30C'est pourquoi cette compétence Remotion Agent change la donne.
00:01:33Elle donne à Claude une connaissance approfondie de l'ensemble du framework Remotion,
00:01:37comme la structure des compositions ou la chorégraphie des animations,
00:01:41la gestion du timing, des ressources, bref, tout.
00:01:45Ainsi, au lieu de deviner le code vidéo, Claude comprend désormais le framework...
00:01:50...comme un développeur expert en Remotion.
00:01:53C'est la même configuration que les développeurs utilisent déjà pour auto-générer des vidéos.
00:01:58Et d'ici la fin de cette vidéo,
00:02:00vous serez capable de diriger des graphismes animés professionnels avec de simples instructions.
00:02:04Alors, commençons.
00:02:05Tout d'abord, nous devons installer la compétence Claude pour Remotion.
00:02:08Pour ce faire, nous allons taper cette commande ici.
00:02:11Vous pouvez trouver cette commande sur le site web de Remotion.
00:02:14Nous allons sélectionner tous ces modèles dans la liste en appuyant sur espace, puis entrée.
00:02:19Une fois que la compétence Claude est installée dans le projet,
00:02:22nous allons ouvrir le terminal Claude Code et lui demander de démarrer un nouveau projet Remotion.
00:02:28Attendons qu'il termine la configuration.
00:02:30L'installation du projet et du modèle est maintenant terminée.
00:02:38Suivez simplement ces instructions pour lancer le Remotion Studio.
00:02:42Et voyons à quoi cela ressemble. Super.
00:02:45Voici l'interface de Remotion.
00:02:46C'est comme une application de montage vidéo, mais on programme chaque scène.
00:02:51Maintenant que le projet est installé et que vous connaissez Remotion,
00:02:56passons au développement.
00:02:59Notre processus comporte neuf phases.
00:03:02Les phases 1 à 3 établiront les systèmes dans lesquels Claude opère.
00:03:07Les phases 4 à 7 créent les ressources et définissent les composants utilisables.
00:03:13Et les phases 8 à 9 concernent l'exécution.
00:03:16Cela dit, procédons.
00:03:19Commençons bien sûr par la phase 1.
00:03:21Maintenant que nous avons tout installé,
00:03:25ouvrons ce guide de construction conçu spécifiquement pour la vidéo que nous avons créée.
00:03:29Bien que ce guide serve à développer cette vidéo précise,
00:03:35vous pourrez le réutiliser pour créer d'autres vidéos de votre choix...
00:03:39...une fois que vous aurez compris comment fonctionnent ces instructions.
00:03:42Si vous voulez une copie de ces prompts,
00:03:44vous pouvez consulter notre communauté gratuite où nous publions ces guides.
00:03:48Ainsi, vous aussi pourrez construire avec l'IA.
00:03:51Copions le prompt de la phase 1 et collons-le dans Claude Code.
00:03:56Ensuite, on appuie sur entrée.
00:03:57Ce prompt établit une fondation technique...
00:04:02...que Claude devra suivre tout au long du développement.
00:04:06Pensez-y comme à des règles et des modèles à respecter.
00:04:09C'est très important car la plupart des projets échouent,
00:04:13non par manque de direction visuelle de la part des utilisateurs,
00:04:16mais parce que l'IA ne reçoit pas de règles concrètes et finit par faire ce qu'elle veut.
00:04:23Une fois la phase 1 terminée, voici le résultat.
00:04:27Un fichier markdown de développement sera créé.
00:04:31Claude a fini de poser les bases.
00:04:34Vous pouvez donc passer à l'étape suivante, la phase 2.
00:04:37Nous allons maintenant établir la direction artistique et le système visuel de cette vidéo.
00:04:42C'est une étape cruciale du flux de travail.
00:04:46Jusqu'à présent, nous avons configuré l'environnement et vérifié que Claude comprenne Remotion.
00:04:52Ici, nous disons à Claude comment réfléchir visuellement avant d'écrire le moindre code.
00:05:00Ouvrez à nouveau le guide de construction.
00:05:03Vous y verrez une section intitulée phase 2.
00:05:05Copiez l'intégralité du prompt exactement tel quel.
00:05:10Puis retournez dans Claude Code dans votre terminal.
00:05:15Collez le prompt et appuyez sur entrée.
00:05:17Ensuite, laissez Claude prendre le relais un instant.
00:05:21Je m'arrête ici pour expliquer pourquoi ce prompt est si important.
00:05:25C'est là que beaucoup de gens brûlent les étapes ou essaient de trop tout contrôler.
00:05:30Ce prompt ne demande pas encore à Claude de construire la vidéo complète.
00:05:35Il s'agit d'instaurer une réflexion systémique.
00:05:39C'est comme si nous définissions les règles du monde sur lequel Claude va bâtir.
00:05:43Considérez cela comme une direction créative, pas comme de simples instructions.
00:05:46Nous indiquons à Claude le ton général, les contraintes visuelles,
00:05:52le ressenti des mouvements et la manière de prendre des décisions de design quand rien n'est explicite.
00:06:00C'est essentiel parce que nous n'allons jamais décrire chaque pixel de la vidéo, n'est-ce pas ?
00:06:07Ce serait impossible.
00:06:08Mais en même temps, on ne veut pas que Claude devine au hasard ou invente des styles incohérents.
00:06:15Ce prompt permet de contrôler sans micro-gérer.
00:06:19Il donne à Claude un cadre de travail.
00:06:22Au lieu de deviner ce que signifie "épuré" ou "moderne", il en a une définition partagée avec nous.
00:06:29Au lieu d'halluciner, il possède à la fois la compétence technique
00:06:33et les garde-fous créatifs pour travailler correctement.
00:06:36Appuyons sur entrée et attendons que Claude traite l'information.
00:06:39Une fois que Claude a fini, vous verrez qu'il a créé un fichier de direction artistique,
00:06:44détaillant comment il doit raisonner et exécuter les décisions futures.
00:06:48Lors du développement réel, n'ayez pas peur de faire des allers-retours à cette étape,
00:06:55car vous voulez que votre projet ait exactement la direction artistique souhaitée.
00:06:58Vous devrez peut-être demander à Claude de modifier ou d'ajouter des éléments.
00:07:02Et voilà, nous avons débloqué la phase suivante.
00:07:07Il existe maintenant un langage visuel commun entre vous et l'IA.
00:07:12Claude sait comment aborder cette vidéo avant même d'écrire une seule composition ou séquence.
00:07:18C'est une étape majeure.
00:07:19À ce stade, nous avons établi avec succès la direction artistique et le contrôle visuel.
00:07:24Nous n'avons pas encore construit la vidéo.
00:07:26Mais nous avons posé les bases qui rendront la construction prévisible et professionnelle.
00:07:31La direction artistique étant fixée, l'étape suivante consiste à élaborer l'histoire de la vidéo.
00:07:37Cette étape finalise le système dont nous avons besoin.
00:07:40Nous passons du ressenti de la vidéo à ce qui se passe réellement, moment par moment.
00:07:47L'objectif ici est très simple.
00:07:49Définir les scènes, le flux et le timing.
00:07:52Ainsi, la vidéo aura du sens avant même de commencer l'animation.
00:07:56Retournons au guide de construction pour trouver le prompt de la phase 3.
00:08:02Copions l'intégralité du texte.
00:08:03Une fois que c'est fait, retournez dans Claude Code.
00:08:08Collez le prompt et appuyez sur entrée.
00:08:10Maintenant, attendons que Claude le traite.
00:08:13Claude utilise la direction artistique définie plus tôt pour créer une chronologie.
00:08:18Il décide du nombre de scènes nécessaires, du rôle de chacune,
00:08:23et de la durée de chaque moment à l'écran.
00:08:27C'est ce qui nous permet de construire une vidéo de 10 ou 60 secondes...
00:08:32...qui semble intentionnelle plutôt que précipitée ou aléatoire.
00:08:36Quand Claude aura fini, vous verrez un découpage de la vidéo en scènes.
00:08:40Chaque scène a un rôle précis.
00:08:43Il y a généralement une accroche, un message principal, des moments de soutien et une conclusion.
00:08:52C'est en fait un storyboard, mais sous forme textuelle.
00:08:56Un storyboard écrit plutôt que dessiné.
00:09:02À ce stade, vous pouvez demander à Claude d'ajuster des choses.
00:09:05Si une scène ne correspond pas à ce que vous voulez, dites-le simplement.
00:09:10Si vous voulez réorganiser des sections ou en supprimer une, c'est le moment.
00:09:15C'est un autre point où les gens bloquent parfois,
00:09:17pensant qu'ils doivent accepter le premier résultat.
00:09:20Ce n'est pas le cas.
00:09:21Traitez cela comme un brouillon collaboratif.
00:09:25Et voilà.
00:09:27Dans ce cas, la structure semble solide.
00:09:30Le rythme est bon, les scènes s'enchaînent logiquement et cela correspond à la durée visée.
00:09:37Au lieu de continuer à itérer, nous allons donner le signal de départ à Claude.
00:09:41Dites simplement à Claude de continuer...
00:09:45...et de créer le fichier de storyboard basé sur cette structure.
00:09:48Claude générera alors un fichier dédié
00:09:52qui représente la chronologie complète de la vidéo.
00:09:55Ce fichier devient la source unique de vérité pour ce que nous allons construire.
00:10:00Et voilà, l'histoire de la vidéo est maintenant verrouillée.
00:10:04Nous savons ce qui se passe, quand et pourquoi.
00:10:08Rien n'est encore animé, mais les décisions créatives les plus difficiles sont prises.
00:10:13Le storyboard terminé, nous passons à la phase 4,
00:10:18qui consiste à définir notre inventaire de ressources (assets).
00:10:20C'est une étape qui peut sembler facultative au début,
00:10:24mais elle est pourtant cruciale pour obtenir des résultats propres et cohérents.
00:10:28L'objectif est simple : définir quelles ressources existent,
00:10:33et quel doit être leur aspect avant d'essayer de les créer, les animer ou les placer.
00:10:38Cette étape est capitale car elle sépare les décisions de design de la logique des scènes.
00:10:44C'est cette séparation qui empêche tout de s'effondrer par la suite.
00:10:48Voici pourquoi c'est important.
00:10:50Si vous demandez à Claude de concevoir une ressource, de décider de son apparence,
00:10:54et de trouver sa place dans une scène, tout cela en même temps...
00:10:59...vous cumulez trop de décisions en une seule étape, et c'est là que ça échoue.
00:11:04Vous obtenez des résultats incohérents et de mauvaise qualité.
00:11:07Retournons au guide de construction et copions le prompt de la phase 4.
00:11:11Une fois copié, retournez dans le terminal Claude, collez-le et faites entrée.
00:11:17Attendons maintenant que Claude traite la demande.
00:11:19Pendant ce temps, laissez-moi vous expliquer ce que ce prompt fait en coulisses.
00:11:24Il ne crée pas encore de visuels.
00:11:25Il définit les paramètres de design pour chaque ressource dont nous aurons besoin.
00:11:29Des éléments comme les objets, l'utilisation des couleurs, etc.
00:11:33Une erreur courante ici est de sauter cette étape et de laisser chaque scène inventer ses propres ressources.
00:11:39C'est ainsi qu'on finit avec une vidéo où chaque scène semble isolée et manque de cohésion.
00:11:45Une fois terminé, Claude créera un fichier d'inventaire des ressources très clair.
00:11:53Chaque ressource aura un nom et des paramètres définis.
00:11:57À ce stade, vous n'avez pas grand-chose à changer, sauf si un élément manque ou est inutile.
00:12:04Si vous voulez ajouter ou modifier quelque chose, demandez-le simplement à Claude.
00:12:10Et voilà, nous avons une liste complète de ressources et un système de design pour les régir.
00:12:17Cela signifie que lorsque Claude commencera à générer des composants Remotion,
00:12:22il ne devinera pas leur apparence.
00:12:25Il s'appuiera directement sur cet inventaire.
00:12:28Les spécifications des ressources étant fixées, passons à la phase 5,
00:12:33qui consiste à générer les ressources elles-mêmes.
00:12:36Nous allons maintenant produire les éléments concrets qui seront utilisés dans toute la vidéo.
00:12:42Jusqu'à présent, nous avons délibérément séparé les préoccupations.
00:12:48D'abord le système, puis la direction artistique, le storyboard, et enfin les spécifications des ressources.
00:12:56Cette étape transforme ces définitions en ressources réelles et utilisables sans confusion des rôles,
00:13:04ce qui permet au code de Claude de se développer avec des instructions et un contexte très clairs.
00:13:10C'est pour cela que cette méthode est si fiable.
00:13:13Voyons comment ça se passe.
00:13:15Prenons le prompt de la phase 5 dans le guide, et collons-le dans le terminal Claude.
00:13:20Mais avant d'appuyer sur entrée, voici un point important.
00:13:23Pour les grands projets avec beaucoup de ressources dans différentes catégories,
00:13:29il est préférable de les générer par lots (batches) de catégories.
00:13:33Je veux dire par là qu'on ajoute une règle au prompt demandant à Claude
00:13:37de générer une catégorie de ressources à la fois.
00:13:40Cela réduit les risques d'hallucination de l'IA et limite les chances
00:13:45que Claude mélange les styles entre des ressources sans rapport.
00:13:49Dans notre cas, cette vidéo n'a pas un inventaire énorme.
00:13:53Nous allons donc tout générer en une seule fois.
00:13:57Sachez simplement qu'à mesure que vos projets prennent de l'ampleur, le traitement par lots devient une pratique exemplaire.
00:14:03Cette étape prend généralement un certain temps, alors soyez patient.
00:14:08Une fois l'opération terminée, prenez un court instant pour parcourir le résultat et vérifier que tous les éléments sont là.
00:14:15Normalement, vous trouverez tout dans le dossier « SRC ».
00:14:20Et voilà, nous avons maintenant un ensemble complet d'assets générés et prêts à l'emploi.
00:14:25Ce ne sont plus des idées abstraites.
00:14:28Ce sont de véritables blocs de construction qui seront réutilisés à travers les scènes,
00:14:32ce qui donnera à la vidéo la cohérence visuelle que nous recherchons.
00:14:36Nos assets étant terminés, l'étape suivante consiste à leur donner du mouvement.
00:14:41C'est la phase 6, et l'objectif est de définir le comportement de chacun de nos assets.
00:14:47Pas encore les scènes finales, juste les briques de mouvement qui seront réutilisées partout.
00:14:53C'est ce que l'on appelle des primitives de mouvement.
00:14:56En gros, nous créons un langage de mouvement commun utilisable pour toute la vidéo.
00:15:01Dans le guide de montage, copiez le prompt de la phase 6 et collez-le dans Claude Code.
00:15:07Maintenant, voici un changement de mentalité important.
00:15:10Nous n'avons pas besoin d'être très techniques ici.
00:15:13On ne va pas lister chaque image clé ou décrire chaque animation en détail.
00:15:18Et si nous pouvons nous le permettre, c'est grâce au travail accompli précédemment.
00:15:23Car lors des premières phases du projet, nous avons établi comment Claude doit réfléchir.
00:15:28Nous avons défini les règles de développement, les principes visuels, le storytelling,
00:15:33et les contraintes de design à l'aide de tous ces fichiers Markdown.
00:15:37Cela permet à Claude de bien comprendre le style, le rythme et le ton que nous visons.
00:15:44À ce stade, nous pouvons lui faire confiance pour évaluer le projet dans son ensemble
00:15:48et proposer des modèles de mouvement cohérents.
00:15:50Une fois le prompt collé, vous pouvez appuyer sur Entrée.
00:15:55Claude va commencer à analyser les assets et à générer les primitives de mouvement.
00:15:58Une erreur courante ici est de vouloir trop contrôler cette étape.
00:16:02Si vous tentez de micro-gérer le mouvement à ce stade,
00:16:05vous finirez par figer des mouvements spécifiques à une scène dans votre système global.
00:16:10Et cela rendra les éléments plus difficiles à réutiliser par la suite.
00:16:13Au lieu de cela, nous visons des modèles de mouvement polyvalents et flexibles
00:16:17qui semblent cohérents sur l'ensemble de la vidéo.
00:16:21Cela ne signifie pas que Claude fera tout parfaitement du premier coup.
00:16:25Ce n'est pas grave.
00:16:26Notre rôle n'est pas d'attendre un mouvement impeccable dès le premier passage.
00:16:31Notre rôle est d'obtenir une base solide.
00:16:34Nous reviendrons peaufiner des moments précis plus tard, en voyant le rendu des scènes.
00:16:39Après un peu de traitement, Claude termine son travail.
00:16:42Et voilà, nous avons maintenant un ensemble de primitives de mouvement définies pour le projet.
00:16:47Elles sont réutilisables, cohérentes et alignées avec le système visuel
00:16:52et narratif que nous avons établi plus tôt.
00:16:54C'est une étape majeure.
00:16:57Nous avons les assets et nous avons le mouvement.
00:17:00Nous sommes tout près de transformer tout cela en vidéo.
00:17:04Passons maintenant aux phases 7 et 8.
00:17:06Ce sont les étapes où l'on assemble concrètement le tout.
00:17:09Certaines tâches demandées à Claude par ce prompt
00:17:12ont probablement déjà été prises en compte lors des phases précédentes.
00:17:17Mais il est tout de même important de les exécuter pour créer les composants nécessaires
00:17:22et s'assurer qu'il ne manque rien.
00:17:25Lancez-les simplement dans le terminal Claude Code
00:17:28en demandant à Claude d'ignorer ce qui a déjà été fait.
00:17:31Très bien, maintenant que tout cela est terminé,
00:17:34nous avons enfin le feu vert pour construire les scènes et monter la vidéo.
00:17:40C'est la phase 9.
00:17:42Honnêtement, c'est la partie la plus facile de tout le flux de travail
00:17:46car toute la réflexion complexe a déjà été faite en amont.
00:17:50Alors, continuons sur cette lancée.
00:17:51À ce stade, Claude ne devine plus rien.
00:17:54Il exécute des tâches au sein d'un système que nous avons soigneusement mis en place.
00:17:57Notre objectif ici est très simple.
00:17:59Générer le code de chaque scène.
00:18:02Vérifier le rendu visuel.
00:18:05Puis tout assembler en une seule vidéo finale peaufinée.
00:18:10D'abord, copiez le prompt de la phase 9 dans le guide de montage,
00:18:13collez-le dans le terminal Claude et appuyez sur Entrée.
00:18:17Ce prompt ordonne à Claude
00:18:21de commencer à construire les scènes d'animation réelles
00:18:23en utilisant tout ce que nous avons créé jusqu'ici.
00:18:26La direction artistique, le storyboard, les assets,
00:18:29et les primitives de mouvement se rejoignent ici.
00:18:32Idéalement, surtout pour les gros projets,
00:18:35vous devriez générer les scènes une par une.
00:18:38C'est pour cela que nous avons conçu le prompt ainsi.
00:18:41Même s'il ne s'agit que d'une vidéo d'une minute trente,
00:18:45apprendre cette bonne pratique dès maintenant vous évitera bien des ennuis plus tard.
00:18:49En générant les scènes individuellement,
00:18:52il est beaucoup plus facile de déboguer, d'itérer
00:18:55et d'apporter des modifications ciblées sans casser toute la vidéo.
00:18:59Une fois la scène 1 terminée, on passe à la suivante et on génère toutes les autres.
00:19:04Une fois que c'est fait, nous voulons voir le résultat.
00:19:08Vous pouvez demander à Claude de lancer Remotion Studio pour vous
00:19:10et il vous donnera l'URL.
00:19:12Ou vous pouvez simplement taper « npm start » dans le terminal.
00:19:16Nous sommes maintenant dans Remotion Studio, lançons la lecture.
00:19:21On voit tout de suite que la direction artistique
00:19:24et le style visuel sont cohérents dans chaque scène.
00:19:28C'est un excellent signe.
00:19:29Si la vidéo semble un peu plate, c'est tout à fait normal.
00:19:34Pour l'instant, nous n'avons fait que créer les scènes ; nous n'avons pas encore
00:19:38complètement assemblé la vidéo ni peaufiné les transitions.
00:19:42À partir de là, nous retournons dans Claude Code
00:19:45pour signaler les problèmes observés et dire à Claude exactement ce qu'il faut améliorer.
00:19:50Comme les paramètres précis sur la façon dont les scènes doivent bouger.
00:19:56Le prompt exact utilisé ici n'est pas le plus important.
00:19:58Votre résultat peut différer d'une section à l'autre par rapport au mien.
00:20:04Le prompt exact utilisé ici n'est pas si crucial.
00:20:07Votre rendu final pourrait être différent du mien.
00:20:10Et c'est une bonne chose, car c'est là que vous commencez
00:20:14à développer vos compétences pour peaufiner et déboguer votre propre travail.
00:20:17Vous ne vous contentez plus de suivre des prompts.
00:20:20Vous prenez les décisions finales.
00:20:22Une fois que c'est fait, on vérifie à nouveau la vidéo.
00:20:25Et là, tout semble plus abouti.
00:20:28Le mouvement est plus propre, les transitions sont meilleures,
00:20:31et la vidéo commence enfin à paraître intentionnelle plutôt que mécanique.
00:20:35D'accord, mais on ne s'arrête pas là.
00:20:37La dernière couche, c'est la voix off et la musique de fond.
00:20:41Pour cela, nous allons utiliser le SDK d'ElevenLabs.
00:20:44On va faire cette partie rapidement.
00:20:46Rendez-vous sur la documentation d'ElevenLabs.
00:20:49Récupérez la commande appropriée pour votre configuration.
00:20:52Comme nous utilisons Node.js, nous prendrons celle-là.
00:20:56Demandez ensuite à Claude d'exécuter la commande et de configurer l'intégration ElevenLabs pour la voix et la musique.
00:21:03Claude créera un fichier .env pour vous, où vous pourrez coller votre clé API ElevenLabs.
00:21:09Après cela, vous pouvez demander à Claude de générer un script de voix off
00:21:13qui correspond à la vidéo que vous avez construite.
00:21:16Une fois que tout est connecté et terminé, regardons le résultat.
00:21:20Mars, la planète rouge, un monde qui captive l'humanité depuis des siècles.
00:21:27C'est la quatrième planète en partant du Soleil, située juste après la Terre.
00:21:31Au plus près, Mars est à 225 millions de kilomètres de la Terre.
00:21:37C'est un voyage de sept mois en vaisseau spatial.
00:21:41Préparez-vous à être patient.
00:21:42Mars fait environ la moitié de la taille de la Terre, un monde plus petit mais tout aussi fascinant.
00:21:48Une journée sur Mars dure presque autant que sur Terre : 24 heures et 37 minutes.
00:21:54Mais une année ? Cela prend 687 jours terrestres, soit presque deux de nos années.
00:22:01L'atmosphère est extrêmement fine, à peine 1 % de celle de la Terre.
00:22:05Il vous faudra impérativement une combinaison spatiale.
00:22:07Pourquoi est-elle si rouge ?
00:22:09C'est l'oxyde de fer — la rouille — qui recouvre sa surface et lui donne sa couleur emblématique.
00:22:15Mars abrite Olympus Mons, le plus grand volcan du système solaire,
00:22:19trois fois plus haut que l'Everest.
00:22:21Et il y a de l'eau, gelée aux pôles et probablement cachée sous terre,
00:22:27la clé des explorations futures.
00:22:29Nous y avons déjà envoyé cinq rovers : Sojourner, Spirit, Opportunity, Curiosity et Perseverance.
00:22:37Un jour, l'homme posera le pied sur Mars,
00:22:40construira des habitats, plantera des drapeaux et en fera son deuxième foyer.
00:22:45Mars vous attend !
00:22:46Voilà à quoi ressemble notre vidéo explicative sur Mars.
00:22:51Une vidéo explicative entièrement construite, peaufinée, propre et professionnelle.
00:22:56Conçue à partir d'un système, pas au hasard.
00:22:59Le storytelling est fluide, les visuels sont superbes et les transitions réussies.
00:23:05Le storytelling est fluide, les visuels sont superbes et chaque transition s'enchaîne parfaitement.
00:23:12Prenons un instant pour prendre du recul sur ce que nous venons d'accomplir.
00:23:16Nous sommes partis d'un dossier vide pour arriver à une vidéo professionnelle entièrement rendue.
00:23:22Sans After Effects, sans timeline, sans images clés manuelles.
00:23:26Nous avons utilisé Claude Code, Remotion et les « agent skills » comme un système unique.
00:23:32Et nous avons dirigé le résultat au lieu de construire manuellement chaque pièce.
00:23:38C'est un véritable atout que vous pouvez publier, diffuser et intégrer à votre flux de travail dès aujourd'hui.
00:23:44Et c'est là le point essentiel à retenir.
00:23:47La puissance de l'IA ne réside pas seulement dans sa rapidité, mais dans la collaboration entre ces outils.
00:23:52Quand Claude Code comprend Remotion et que les compétences injectent le bon savoir au bon moment,
00:23:59vous ne travaillez plus comme un créateur solo, mais comme une petite équipe.
00:24:05C'est le passage de l'utilisation de l'IA à la construction avec l'IA.
00:24:09Désormais, vous ne faites pas seulement des vidéos, vous bâtissez des systèmes visuels.
00:24:14Vous pouvez modifier l'ambiance, changer les données, générer de nouvelles versions et lancer vos projets en toute autonomie.
00:24:21Cela ne remplace pas la créativité, au contraire, cela l'amplifie.
00:24:26Une fois ce flux de travail maîtrisé, vous pouvez l'appliquer à des démos de produits,
00:24:30des clips pour les réseaux sociaux, des travaux pour des clients ou tout ce que vous voulez produire.
00:24:34Si vous voulez aller plus loin, c'est exactement ce que nous faisons dans la communauté premium AnyNoCode.
00:24:40Nous y décortiquons des flux de travail réels comme celui-ci et vous montrons comment monétiser l'IA.
00:24:46Vous apprendrez aux côtés de fondateurs et de bâtisseurs professionnels.
00:24:50De plus, vous y trouverez notre cours sur le design de sites web par IA pour vous aider à implémenter vos idées plus vite.
00:24:54Si vous avez aimé cette vidéo, n'oubliez pas de liker et de vous abonner
00:24:58pour ne pas manquer les prochains tutoriels.
00:25:01On se retrouve dans la prochaine vidéo !

Key Takeaway

Ce guide démontre comment transformer Claude d'un simple assistant textuel en un expert en production vidéo capable de coder, animer et finaliser un projet de motion design complexe uniquement par des commandes textuelles.

Highlights

Utilisation combinée de Claude Code et du framework Remotion pour générer des vidéos de motion design professionnel sans montage manuel.

L'importance de la nouvelle compétence "Remotion Agent" qui permet à l'IA de comprendre la structure complexe de React pour la vidéo.

Mise en place d'une méthodologie rigoureuse en neuf phases, séparant la direction artistique de l'exécution technique pour éviter les hallucinations.

Création de "primitives de mouvement" pour assurer une cohérence visuelle et faciliter la réutilisation des animations sur l'ensemble du projet.

Intégration d'outils tiers comme ElevenLabs pour automatiser la génération de la voix off et de la musique de fond directement via le code.

Transition du rôle de créateur de contenu manuel vers celui de directeur de systèmes visuels assistés par l'intelligence artificielle.

Timeline

Introduction et présentation de la puissance de Remotion Agent

Le présentateur introduit une vidéo sur Mars créée entièrement sans After Effects ni manipulation manuelle d'images clés. Il explique que Claude utilise désormais la compétence spécialisée "Remotion Agent" pour transformer des instructions textuelles en code React animé. Cette approche permet de surmonter la complexité technique de Remotion, un outil normalement réservé aux développeurs chevronnés. En combinant Claude Code avec ce framework, n'importe qui peut désormais diriger des graphismes animés de haute qualité. L'objectif est de montrer comment l'IA passe d'un assistant généraliste à un expert métier capable de gérer le timing et la chorégraphie visuelle.

Installation et configuration de l'environnement de développement

Cette section détaille les étapes techniques initiales pour préparer le projet de vidéo automatisée. L'utilisateur doit installer la compétence Claude pour Remotion via une commande spécifique disponible sur le site officiel de l'outil. Une fois l'installation terminée dans le terminal Claude Code, un nouveau projet est initialisé avec les modèles nécessaires. Le présentateur montre l'interface de Remotion Studio, qu'il compare à une application de montage classique où chaque scène est programmée. C'est la base indispensable avant de passer à la phase de développement créatif assisté par l'IA.

Phases 1 à 3 : Fondations techniques, direction artistique et storyboard

Le processus commence par l'établissement d'une fondation technique solide pour éviter que l'IA ne produise des résultats aléatoires. La phase 1 définit les règles de développement, tandis que la phase 2 instaure un langage visuel commun et une direction artistique précise sans micro-gestion. La phase 3 transforme cette vision en un storyboard textuel détaillé qui définit le flux et le timing de chaque scène. Cette étape cruciale permet de valider la structure narrative de la vidéo avant d'écrire la moindre ligne de code d'animation. Le présentateur insiste sur le fait que ces documents Markdown servent de "source unique de vérité" pour tout le projet.

Phases 4 à 6 : Gestion des assets et primitives de mouvement

L'analyse se poursuit avec la création d'un inventaire de ressources (assets) pour garantir la cohérence entre les scènes. La phase 4 définit l'apparence des objets, tandis que la phase 5 génère les composants réels, parfois par lots pour limiter les erreurs de l'IA. La phase 6 est consacrée aux "primitives de mouvement", qui sont les briques de base de l'animation réutilisables partout. En définissant ces comportements en amont, on s'assure que le style d'animation reste fluide et professionnel sans devoir tout redécrire à chaque fois. Cela permet à Claude de comprendre l'intention derrière le mouvement plutôt que de simplement suivre des coordonnées mathématiques isolées.

Phases 7 à 9 : Assemblage final, rendu et peaufinage

Les phases finales concernent l'assemblage concret de toutes les briques logicielles et créatives précédemment créées. La phase 9 consiste à générer le code de chaque scène individuellement pour faciliter le débogage et l'itération ciblée. Le présentateur utilise ensuite Remotion Studio pour visualiser le rendu en temps réel et identifier les ajustements nécessaires. Il explique que le rôle de l'humain à ce stade est de prendre les décisions finales de peaufinage pour rendre la vidéo intentionnelle. C'est ici que la direction artistique, le storyboard et les assets se rejoignent pour former un produit fini cohérent. Le résultat montre une nette amélioration de la fluidité des transitions après cette phase de correction assistée.

Audio, intégration ElevenLabs et conclusion sur l'écosystème IA

La dernière étape ajoute la dimension sonore via l'intégration du SDK d'ElevenLabs pour la voix off et la musique. Claude génère un script adapté à la chronologie de la vidéo et configure les clés API nécessaires dans un fichier d'environnement. Le résultat final sur Mars illustre la puissance de cette méthode : une vidéo professionnelle produite sans aucun outil de montage traditionnel. En conclusion, l'auteur souligne que l'IA ne remplace pas la créativité mais l'amplifie en permettant de bâtir des systèmes visuels entiers. Il encourage les spectateurs à passer du statut de simple utilisateur d'IA à celui de bâtisseur au sein d'une équipe augmentée. La vidéo se termine par une invitation à rejoindre une communauté premium pour maîtriser ces flux de travail complexes.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video