Un test exploratoire, réalisé à partir d'une question qu'on m'avait posée. Voici le résultat, ma méthode et quelques pistes pour aller plus loin.
Ces derniers temps, je vois passer beaucoup de démonstrations de motion design réalisé avec l'IA. Mon côté geek avait envie d'essayer.
L'occasion s'est présentée lorsqu'une personne m'a demandé de l'aide pour comprendre comment passer d'un projet créé avec Claude Code ou Codex à un site publié grâce à GitHub et Vercel. Le sujet était tout trouvé. Je l'ai utilisé pour tester les capacités de Claude à mettre des informations en mouvement.
Je cherchais à observer la production graphique et technique : composition, animations, transitions, interfaces simulées, sous-titres et rendu vidéo. Je n'ai pas cherché à tester les compétences pédagogiques de l'IA, ni à valider le contenu de la démonstration.
Il s'agit d'un essai volontairement rapide, sans protocole comparatif ni série de corrections approfondies.
Le résultat en vidéo
Caractéristiques du fichier examiné : 4 min 32,5 s ; 1280 × 720 pixels ; 20 images par seconde ; MP4 H.264 ; sans voix.
La vidéo utilise des schémas, des cartes représentant les outils, des interfaces simplifiées, des déplacements de curseur, des repères d'étapes, des alertes et une checklist finale. Test réalisé en octobre 2026. Les écrans représentés sont des simulations : ils ne doivent pas être utilisés comme un tutoriel d'interface à jour.
Comment j'ai procédé
J'ai d'abord expliqué l'idée à Claude, puis lui ai demandé de structurer un prompt. Je l'ai ensuite ajusté avant de lui demander de produire la vidéo.
Le cahier des charges final précisait le format, le minutage des scènes, l'identité graphique, le contenu des animations, les sous-titres et les fichiers attendus. Il prévoyait aussi des étapes de cadrage et de vérification.
Pour pousser l'expérimentation, je n'ai fourni ni logo, ni image, ni capture d'écran. J'ai laissé Claude reconstituer les éléments graphiques et simuler les interfaces. Cette contrainte est propre à ce test ; je ne procéderais pas nécessairement ainsi pour une production destinée à être diffusée dans un cadre professionnel.
La méthode technique demandée était particulière : créer les animations en HTML, CSS, JavaScript et SVG, les capturer image par image avec Chromium, puis les assembler en MP4 avec ffmpeg. Le prompt prévoyait également la remise des fichiers sources. La présence et la réutilisabilité de chaque fichier demandé devront être vérifiées séparément ; un prompt ne prouve pas à lui seul leur livraison.
Ce que j'observe sur cette première version
Le résultat reprend la structure attendue : ouverture, schéma des trois outils, présentation des prérequis, succession de neuf étapes illustrées, pièges fréquents et checklist finale.
La palette est cohérente et l'alternance entre fonds clairs et sombres aide à distinguer les séquences. Les interfaces simulées et les pictogrammes donnent de la variété à l'ensemble.
J'observe aussi plusieurs limites : certains textes sont petits, en particulier pour un visionnage sur téléphone ; les scènes de démonstration reprennent souvent une disposition similaire ; le logo et la mascotte ont été reconstitués. La voix de synthèse également produite ne m'a pas convaincue : je l'ai écartée pour le partage de cette version.
Ces constats décrivent une première sortie, pas un bilan de qualité professionnelle. Je n'ai pas mesuré le temps gagné, le coût de production ou la facilité de reprendre les animations. Et je n'ai pas réalisé de test d'apprentissage auprès de débutants : ce n'était pas le but.
Ce que je ferais différemment pour un projet réel
Pour mon activité, je fournirais moi-même le contenu, les éléments de marque, les illustrations, les captures réelles et, selon le projet, un scénario visuel plus détaillé. Je demanderais alors à l'IA de travailler principalement sur la mise en animation.
Je voudrais surtout tester ce qui se passe après le premier rendu : demander des corrections précises, reprendre une seule scène, modifier le rythme, adapter la vidéo au mobile, conserver une charte graphique et réutiliser les fichiers sources.
J'ai déjà expérimenté d'autres registres de vidéo avec l'IA en dehors de la formation, notamment pour mon projet de jeu Secret Mark : voir le teaser. Il s'agit d'un autre exemple, pas d'une comparaison technique contrôlée entre deux productions.
Le prompt intégral à copier et adapter
Afficher le prompt intégral
RÔLE
Tu agis comme trois profils à la fois : concepteur pédagogique en formation d'adultes débutants, motion designer et développeur web qui maîtrise GitHub et Vercel.
OBJECTIF
Produire une vidéo explicative de 4 min 32 (1280x720, 20 images par seconde), sous-titrée, avec voix off de synthèse en français. Une personne qui code avec une IA (Claude Code ou Codex) comprend comment son projet passe de l'IA à GitHub, puis à Vercel, jusqu'à une adresse web publique qu'elle sait vérifier elle-même. Elle repart avec une checklist de 5 lignes.
PUBLIC
Vibe codeur amateur. Elle sait demander du code à une IA. Elle ne connaît pas Git, ignore ce qu'est un déploiement, craint de casser quelque chose ou d'exposer des clés secrètes. Chaque terme technique est défini à sa première occurrence, un seul nouveau terme à la fois. Tutoiement.
SUJET
- Agent IA : écrit et modifie le code (Claude ou Codex)
- GitHub : range le code et garde chaque version (analogie : un cahier à historique)
- Vercel : construit le site et le publie (analogie : un éditeur-imprimeur)
- Connecteur : autorisation limitée, révocable, donnée à un outil pour agir sur un autre
PHASE 0 : VÉRIFICATION AVANT TOUTE ÉCRITURE
Ne rien fabriquer. Pour chaque nom de bouton, permission, étape d'autorisation ou comportement des connecteurs, consulte la documentation officielle actuelle (Anthropic, OpenAI, GitHub, Vercel). Donne pour chaque point : source (titre, organisme, date, lien) et niveau de confiance. Ce qui repose sur des sources tierces ou n'est pas vérifié est marqué À VÉRIFIER et signalé à l'écran. Prévois un bandeau "interface vue le [date]".
PHASE 1 : CADRAGE (livrable à valider, aucune production)
En une seule réponse : tableau des faits vérifiés et des points À VÉRIFIER, script de voix off minuté, storyboard par scène (durée, contenu à l'écran, animation, texte incrusté), risques et décisions à prendre. Attends ma validation.
PHASE 2 : PRODUCTION (après validation)
Je ne fournis ni logo ni capture d'écran. Tous les écrans de démo sont donc simulés par toi, en HTML, avec la mention permanente "Écran simplifié · libellés indicatifs · interface vue le [date]". Si je ne fournis pas de logo ni de mascotte, reconstitue-les et signale-le dans ta réponse.
STRUCTURE (durées cibles)
1. Accroche, 0:00-0:21. Fenêtre de conversation où du code se tape, fil lumineux vers un navigateur affichant un "?", qui devient un globe avec un check. Titre : "De ton IA à ton site en ligne". Sous-titre : "Connecter Claude ou Codex à GitHub et à Vercel".
2. Le trajet, 0:21-1:12. Trois cartes (Agent IA, GitHub, Vercel) avec rôle et analogies, deux connecteurs étiquetés "accès", trois pastilles : "Une autorisation", "Un périmètre précis", "Révocable à tout moment". Puis les cartes se réduisent en haut et un encart à deux colonnes compare Claude Code (commande /install-github-app, étiquette "À confirmer sur écran réel") et Codex (connecter son compte GitHub, choisir les dépôts accessibles, pull request ; étiquette "Source : documentation OpenAI").
3. Avant de commencer, 1:12-1:26. Trois lignes cochées : un compte GitHub, un compte Vercel, un projet test sans donnée sensible. Maquette de la page de présentation et mascotte.
4. Démonstration, 1:26-3:33. Fenêtre de navigateur simulée, sommaire latéral de 9 étapes qui se coche, pastilles AGENT, GITHUB, VERCEL dans la barre d'adresse, curseur animé avec clics :
1 Comptes : connexion à GitHub et à Vercel avec un compte de test
2 Autorisation : l'agent demande l'accès, choix d'un seul dépôt plutôt que tous, accès révocable
3 Dépôt : création de "ma-page-test", privé, dépôt vide
4 Code et envoi : demande à l'agent, commit a3f9c21, push, page visible sur GitHub (commit = version enregistrée, push = envoi)
5 Import dans Vercel : liste des dépôts, configuration, chaque envoi déclenche un déploiement
6 Déploiement : statut En file, puis Building, puis Ready (Prêt), journal simplifié
7 Publication : adresse d'exemple ma-page-test.vercel.app, branche main = production, autres branches = aperçus
8 Vérification, 5 contrôles : statut prêt sans erreur, même commit que GitHub, journaux sans erreur, ouverture en navigation privée et sur mobile, modification visible en ligne (contrôle 5 coché à l'étape suivante)
9 Modifier et revenir : demande de changement de titre, commit b81d4e7, redéploiement automatique, retour à la version précédente
5. Pièges à éviter, 3:33-4:07. Trois cartes "À éviter / À faire" : clé secrète dans le code puis variables d'environnement ; accès à tous les dépôts puis seulement ma-page-test ; journal de déploiement ignoré puis lecture du journal. Mascotte avec croix puis check.
6. Checklist et fin, 4:07-4:32. Cinq lignes qui se cochent : autoriser l'agent sur un seul dépôt, envoyer le code sur GitHub, importer le dépôt dans Vercel, vérifier le déploiement, modifier puis recontrôler. Carte finale : "À toi de jouer.", logo, [adresse du site à confirmer].
VOIX OFF ET SOUS-TITRES
Script en répliques courtes (environ 60), phrases à l'affirmative, rythme de 150 mots par minute. Sous-titres incrustés en bas (40 px, gras, texte blanc sur pastille sombre) et fichier SRT. Voix de synthèse en français (moteur Kokoro, voix ff_siwis), une réplique à la fois, calée sur le début de chaque sous-titre, niveau normalisé à environ -16 LUFS. Les 61 répliques doivent tenir dans leur créneau sans chevauchement.
RÈGLES DE LA DÉMO
Compte de test, projet "ma-page-test", aucune donnée réelle, aucun nom de client, aucun jeton ni clé ni e-mail visible.
TON ET ÉCRITURE
Sobre, phrases courtes, exemples concrets. Aucune formule à effet d'annonce, aucune anecdote inventée, aucune tournure de type "ce n'est pas X, c'est Y" : formuler à l'affirmative. Apostrophes droites, tirets simples uniquement.
DIRECTION ARTISTIQUE
Marque : [FormaSwift]. Couleurs : #11999E (teal principal), #16C6CC (accent), #40514E, #576D69, #293533, #FFFFFF, avec #E8F9FA en fond de rappel et #C97C5D pour les alertes. Police : Inter. Code couleur par rôle : Agent #11999E, GitHub #576D69, Vercel #293533. Fond clair pour les explications, fond sombre pour la démo. Mascotte ampoule comme guide (check pour la réussite, croix pour l'erreur, loupe pour la vérification). Fondu entre les scènes.
TECHNIQUE
Animation en HTML autonome (CSS, JavaScript, SVG) pilotée par une fonction render(t), capturée image par image avec Chromium, assemblée en MP4 H.264 avec ffmpeg.
LIVRABLES
Vidéo MP4 sans voix, vidéo MP4 avec voix, sous-titres SRT, script TXT minuté, piste voix WAV, archive ZIP des sources de l'animation. Termine par la liste des limites et des points à confirmer.
Ce prompt correspond à mon test précis, avec son sujet, sa durée et ses choix graphiques. Ne le considérez pas comme une recette universelle. Les indications relatives aux interfaces de Claude, GitHub et Vercel doivent être revérifiées dans les documentations officielles avant d'en faire une démonstration technique.
Vous souhaitez essayer ? Une méthode en sept étapes
1. Choisir une scène courte
Commencez avec 15 à 30 secondes : un schéma qui s'anime, trois étapes d'un processus, ou un petit tutoriel visuel. Une durée limitée facilite les premiers ajustements.
2. Rassembler la matière
Préparez quelques lignes de texte et, si vous en avez, vos images, votre logo et vos couleurs. Évitez de transmettre des données confidentielles ou des images dont vous ne maîtrisez pas les droits d'utilisation.
3. Vérifier ce que l'outil sait réellement faire
Demandez d'abord si l'environnement peut créer et exécuter du code, produire les images et exporter un MP4. Selon l'outil et ses fonctions disponibles, il pourra produire directement la vidéo ou seulement le code et les instructions pour la générer ailleurs.
Instruction à copier : « Avant de commencer, indique les outils dont tu disposes pour créer l'animation et exporter une vidéo. Distingue ce que tu peux produire directement de ce qui nécessitera un autre logiciel. Ne prétends pas avoir généré un fichier sans pouvoir me le fournir. »
4. Adapter le prompt
Remplacez le sujet, la cible, la durée et les couleurs. Pour un premier essai, réduisez le nombre de scènes. Demandez un storyboard et vérifiez-le avant de lancer la production.
5. Produire une première scène
Faites générer une seule séquence. Vérifiez sa lisibilité et le style des mouvements. Une fois cette base validée, poursuivez les autres scènes.
6. Corriger par itérations ciblées
Précisez ce qui doit changer et ce qui doit rester intact. Exemple : « Entre 12 et 18 secondes, réduis le texte à deux lignes, conserve la palette et ralentis l'apparition des cartes. Ne modifie pas les autres scènes. » Comparez chaque nouvelle version à la précédente.
7. Vérifier les fichiers et diffuser
Visionnez la vidéo sur ordinateur et sur téléphone, vérifiez les textes, les ressources graphiques, les sous-titres éventuels et l'absence de données sensibles. Conservez les sources, le prompt final et les différentes versions.
Checklist avant de partager
- J'ai défini un objectif de production visuelle, une durée et un support de diffusion.
- J'ai vérifié les capacités réelles de l'outil utilisé.
- J'ai validé le storyboard et les ressources transmises.
- J'ai examiné le rendu sur téléphone et sur ordinateur.
- J'ai corrigé les erreurs et vérifié les droits et la confidentialité.
- J'ai conservé le prompt, les fichiers sources et la vidéo finale.
Et maintenant ?
Ce test m'a surtout donné envie de poursuivre. La prochaine étape sera plus structurée, avec mes propres contenus et visuels, pour voir jusqu'où l'on peut piloter les animations et reprendre le résultat. Dans la formation comme ailleurs, je vois ici une piste de production à explorer, sans confondre l'intérêt d'une animation avec la qualité du contenu qu'elle illustre.
Pour aller plus loin sur les outils numériques en organisme de formation, voir mon article sur la digitalisation d'un organisme de formation, et mes ressources IA pour les organismes de formation.
Questions fréquentes
Peut-on créer une vidéo en motion design avec Claude ?
Dans mon test, oui : Claude a produit une vidéo de 4 min 32 en créant les animations en HTML, CSS, JavaScript et SVG, capturées image par image avec Chromium, puis assemblées en MP4 avec ffmpeg. Cela dépend toutefois de l'environnement utilisé. Selon l'outil, Claude pourra fournir directement la vidéo ou seulement le code et les instructions pour la générer ailleurs : il faut le vérifier avant de commencer.
Faut-il fournir un logo, des images ou des captures d'écran ?
Pas pour un premier essai : dans mon test, je n'ai fourni ni logo, ni image, ni capture d'écran, et Claude a reconstitué les éléments graphiques et simulé les interfaces. Pour une production destinée à être diffusée dans un cadre professionnel, je fournirais mes propres contenus, éléments de marque et captures réelles, et je demanderais à l'IA de travailler principalement sur la mise en animation.
Comment réussir un premier essai de motion design avec une IA ?
Choisissez une scène courte de 15 à 30 secondes, rassemblez la matière (textes, couleurs, logo si vous en avez), vérifiez ce que l'outil sait réellement faire, adaptez le prompt, faites générer une seule scène, corrigez par itérations ciblées, puis vérifiez les fichiers sur ordinateur et sur téléphone avant de diffuser.
Le prompt de l'article est-il réutilisable ?
Il correspond à mon test précis, avec son sujet, sa durée et ses choix graphiques. Il se copie et s'adapte : remplacez le sujet, la cible, la durée et les couleurs, et réduisez le nombre de scènes pour un premier essai. Ce n'est pas une recette universelle.
Les écrans GitHub et Vercel de la vidéo sont-ils fiables pour un tutoriel ?
Non. Les écrans de la vidéo sont des simulations produites par Claude, et je n'ai pas validé le contenu technique de la démonstration. Les indications sur les interfaces de Claude, GitHub et Vercel doivent être revérifiées dans les documentations officielles avant d'en faire un tutoriel.
Quelles limites ai-je observées sur cette première version ?
Certains textes sont petits, en particulier sur téléphone ; les scènes de démonstration reprennent souvent une disposition similaire ; le logo et la mascotte ont été reconstitués ; et la voix de synthèse ne m'a pas convaincue, je l'ai écartée. Il s'agit d'une première sortie, pas d'un bilan de qualité professionnelle.
