Découvrez nos articles sur l'IA en agence
Claude Code, Skills, automatisation, GEO… Retrouvez tous nos articles pour rester à jour sur l'IA appliquée aux métiers du digital.
Remotion, le skill Claude pour créer des vidéos avec l'IA
Pendant des années, créer une vidéo animée propre supposait deux options : maîtriser After Effects sur le bout des doigts, ou payer un motion designer pour plusieurs centaines d'euros. Pour les agences digitales et les équipes de développement, ça n'a jamais été une solution viable à grande échelle. Et si le code pouvait tout changer ?
Remotion est un framework qui permet de créer des vidéos en utilisant React — le même outil qu'utilisent les développeurs web au quotidien pour construire des interfaces. Pas de timeline à faire glisser, pas de calques à empiler : juste du code, des composants, et un rendu vidéo parfait frame par frame. En 2026, avec l'arrivée des Remotion Skills et l'intégration native de Claude Code, ce paradigme vient de franchir un cap supplémentaire.
.webp)
Qu'est-ce que Remotion ?
Remotion est un framework open-source créé par Jonny Burger, développeur basé en Suisse, qui a eu une idée aussi simple qu'audacieuse : et si on utilisait React pour fabriquer des vidéos ?
Le principe est direct. Dans un logiciel de motion design classique, chaque frame est une image que vous composez manuellement sur une timeline. Avec Remotion, chaque frame est le résultat du rendu d'un composant React à un instant précis. Vous écrivez du code, le framework calcule chaque image, et vous obtenez un fichier MP4 — ou n'importe quel autre format — entièrement généré par programme.
C'est ce qu'on appelle la création vidéo programmatique : la vidéo devient un artefact du code, pas d'un outil graphique.
"Ce qui est dans le navigateur peut être dans une vidéo." — Jonny Burger, créateur de Remotion
Le résultat ? Une approche radicalement différente de la production vidéo. Vos animations sont reproductibles, versionnables avec Git, et surtout — scalables. Générer 10 000 versions personnalisées d'une même vidéo devient une opération aussi simple qu'une boucle map().
Comment fonctionne Remotion : le principe code-to-video
Pour comprendre ce que Remotion change concrètement, il faut comprendre son architecture de base.
La composition : l'unité de base
Tout dans Remotion s'organise autour de compositions. Une composition, c'est un composant React qui reçoit en props la frame courante (frame) et la durée totale (durationInFrames). En function de ces valeurs, il retourne l'interface à afficher à cet instant précis.
tsx`const MyVideo = () => {const frame = useCurrentFrame();const opacity = interpolate(frame, [0, 30], [0, 1]);return <div style={{ opacity }}>Hello, Remotion</div>;};`Le framework React vidéo utilise ensuite Chromium pour rendre cette interface frame par frame et assembler les images en MP4 programmatique.
Le stack technique
Remotion repose sur un stack moderne et accessible :
Les composants natifs les plus utilisés sont <Video>, <Audio>, <Img> et <Sequence> — des briques qui correspondent exactement aux éléments d'une vidéo classique, mais manipulées par du code.
Remotion Lambda : le rendu dans le cloud
Pour les projets à grande échelle, Remotion Lambda permet de distribuer le rendu sur AWS. Chaque frame est rendue en parallèle dans une fonction Lambda distincte, ce qui réduit le temps de production de façon spectaculaire. Un projet qui prendrait 10 minutes en local peut être rendu en quelques secondes avec Remotion Lambda. La tarification est en pay-as-you-go, directement liée à votre usage AWS.
.webp)
Remotion Skills + Claude Code : la révolution IA de 2026
Janvier 2026 a marqué un tournant dans l'histoire de Remotion. L'équipe a lancé les Remotion Skills, un ensemble de plus de 28 fichiers de règles modulaires conçus pour permettre aux agents IA — et en particulier à Claude Code — de générer du code Remotion correctement du premier coup.
Le problème que ça résout
Avant les Skills, utiliser un LLM pour générer du code Remotion était aléatoire. Les modèles méconnaissaient les spécificités du framework : gestion des frames, interpolation, composants natifs... Le résultat était souvent du code React valide mais qui ne rendait rien d'utile en vidéo.
Les Remotion Skills changent ça fondamentalement. En chargeant ces règles dans le contexte de Claude Code, l'agent comprend désormais :
- La logique de frame et de timing propre à Remotion
- Les composants disponibles et leur usage correct
- Les patterns d'animation recommandés
- Les erreurs fréquentes à éviter
Du prompt à la vidéo
Le workflow devient alors d'une simplicité déconcertante :
- Vous décrivez en langage naturel ce que vous voulez : "Crée une animation d'introduction de 5 secondes avec le logo en fondu, puis un titre qui slide depuis la droite"
- Claude Code, armé des Remotion Skills, génère le code TypeScript correspondant
- Remotion compile et exporte le fichier vidéo final
C'est du prompt to video sans compromis sur la qualité technique. Pas une vidéo générée par diffusion latente, mais une vidéo programmatique entièrement contrôlable, exportable en haute définition, et modifiable ligne par ligne.
Pour aller plus loin sur les capacités de Claude Code, l'article Connecter Claude Code à Figma avec MCP détaille comment étendre ces workflows à d'autres outils du design.
Remotion vs After Effects : quelle approche choisir ?
La comparaison revient souvent. After Effects reste la référence du motion design créatif. Mais les deux outils ne jouent pas du tout dans la même catégorie dès qu'on sort du travail manuel one-shot.
La conclusion est sans ambiguïté : Remotion est fait pour l'automatisation, la personnalisation à grande échelle et les workflows data-driven. After Effects reste pertinent pour le motion design créatif pur, les effets visuels complexes ou les projets one-shot haut de gamme. Pour une agence qui produit du contenu vidéo récurrent et scalable, le choix est évident.
.webp)
Cas d'usage concrets : qui utilise Remotion ?
Ce qui impressionne dans l'histoire de Remotion, c'est la diversité et l'envergure des projets qui s'y appuient.
Spotify Wrapped
L'exemple le plus emblématique reste Spotify Wrapped, la campagne de fin d'année qui génère des vidéos personnalisées pour des dizaines de millions d'utilisateurs. Chaque utilisateur reçoit un récap animé de son année musicale — une prouesse de vidéo data-driven rendue possible par Remotion.
Submagic
Submagic, outil de sous-titrage vidéo automatique, a atteint 1 million de dollars d'ARR en 3 mois avec plus de 3 millions d'utilisateurs actifs. Son moteur de génération de sous-titres animés repose intégralement sur Remotion. Un cas concret de production vidéo scalable poussée à l'extrême.
YARX et la visualisation de données
Des outils de vidéo data-driven comme YARX utilisent Remotion pour transformer des jeux de données en animations dynamiques — graphiques animés, tableaux de bord vidéo, rapports visuels. Des formats qui explosent sur LinkedIn, YouTube Shorts et Reels.
L'angle Apsodia
Pour nous, la proposition de valeur est claire : Remotion devient une extension naturelle de nos workflows d'automatisation. Un client qui génère 50 fiches produits par semaine peut aussi générer 50 vidéos produits — différentes, personnalisées, sans intervention manuelle. Couplé à Make.com pour les déclencheurs et les données, et à Claude Code pour la génération du code, on obtient un pipeline vidéo IA complet.
Tarification et modèle de licence
Remotion adopte un modèle de licence clair, calibré selon la taille des équipes.
Pour la grande majorité des PME et des agences qui démarrent avec Remotion, la licence gratuite est largement suffisante pour tester, produire et valider des cas d'usage concrets avant d'envisager une montée en charge.
Comment démarrer avec Remotion en 2026
Pas besoin d'un environnement complexe. Remotion s'installe en quelques minutes dans n'importe quel projet Node.js.
Installation rapide
bashnpm create video@latestCette commande crée un projet Remotion préconfigurés avec un exemple fonctionnel. L'interface de prévisualisation s'ouvre dans le navigateur, vous voyez votre vidéo en temps réel pendant que vous modifiez le code.
Intégration dans un projet existant
Remotion s'intègre sans friction dans un projet Next.js ou Vite existant. Vous pouvez réutiliser vos composants UI, vos styles et votre logique métier directement dans vos vidéos.
Premier pas avec Claude Code + Remotion Skills
Le workflow le plus efficace en 2026 :
- Installez Claude Code dans votre terminal
- Chargez les Remotion Agent Skills dans votre configuration
- Décrivez votre animation en langage naturel
- Laissez Claude Code générer et itérer sur le code
- Prévisualisez dans Remotion Studio, exportez en MP4
Pour une introduction plus complète aux agents IA et à leur fonctionnement, l'article Agent Skills Claude pose les bases essentielles.
À retenir : Remotion Studio (l'interface de prévisualisation) est inclus gratuitement. C'est là que vous visualisez votre vidéo frame par frame, que vous testez vos animations et que vous debuggez votre code — exactement comme un navigateur dev tools, mais pour la vidéo.
L'avis Apsodia : pourquoi Remotion change la donne pour les agences digitales
On a travaillé avec beaucoup d'outils de production vidéo. Des solutions no-code séduisantes qui plafonnent rapidement. Des exports Webflow qui manquent de flexibilité dès qu'on sort des templates. Et After Effects, formidable mais incompatible avec une logique d'automatisation réelle.
Remotion est la première solution qui réconcilie création vidéo et logique d'ingénierie.
Concrètement, voici ce que ça ouvre pour nos clients :
- Make.com + Remotion : un client remplit un formulaire, Make.com déclenche un scénario, Remotion génère une vidéo personnalisée et l'envoie automatiquement. Zéro intervention humaine.
- Webflow + Remotion : des vidéos d'arrière-plan dynamiques ou des animations de présentation produit générées programmatiquement et intégrées directement au CMS.
- Claude Code + Remotion Skills : nos clients non-développeurs peuvent décrire une animation en français, et obtenir un composant Remotion fonctionnel en quelques minutes.
Ce n'est pas un outil de motion design. C'est une infrastructure de génération vidéo automatique qui s'intègre dans un écosystème digital moderne.
Pour les PME qui veulent comprendre comment positionner leur marque dans ce nouveau contexte IA, notre page Intelligence artificielle détaille notre approche et nos offres d'accompagnement.
Conclusion
Remotion n'est pas un gadget pour développeurs curieux. C'est une réponse sérieuse à un problème réel : comment produire du contenu vidéo à grande échelle, sans exploser les budgets, sans dépendre d'une chaîne de production manuelle et sans sacrifier la qualité ?
La réponse que Remotion apporte — et que les Remotion Skills avec Claude Code viennent d'amplifier — est que la création vidéo programmatique est désormais accessible à quiconque sait écrire du React. Et bientôt, à quiconque sait décrire ce qu'il veut en langage naturel.
Pour les agences qui veulent rester pertinentes dans un monde où le contenu est roi et le volume est une exigence, Remotion mérite largement d'entrer dans la stack.
Pour aller plus loin
