Faire une vidéo avec du code et un assistant IA

Les chiffres qui roulent sur les pages projet de ce portfolio ne sortent pas d’un logiciel de motion : je les ai demandés à un assistant de code. Diriger une animation en code ressemble beaucoup à diriger un motion designer. Tout tient dans la précision des retours.

J’ai construit ce portfolio avec Codex, puis avec Claude Code : le générateur, les pages, les animations. L’assistant écrit les fichiers, le navigateur les interprète, et la direction artistique reste une suite de décisions à prendre. Ce tutoriel applique la même méthode à une courte vidéo : une animation typographique de huit secondes, exportée depuis le navigateur, sans modèle de génération vidéo.12

Ce que j’ai demandé pour ce portfolio

Pour les résultats des études de cas, je voulais des rouleaux de chiffres verticaux, comme sur un compteur mécanique. Le réglage final tient en quatre valeurs : le premier chiffre roule pendant 1,8 seconde, chaque chiffre suivant 180 millisecondes de plus, avec 70 millisecondes de décalage entre eux, et l’animation part quand 70 % du compteur est visible. Si la personne a demandé moins d’animations, la valeur finale s’affiche directement.

Pour l’ouverture de Beat Maker Pro, mes retours tenaient en une ligne : la main et le téléphone restent fixes, la parallaxe ne touche que les deux fragments lumineux, pas de rotation arbitraire ni de boucle de flottement. Ce sont des retours qu’un assistant peut exécuter, parce que chacun décrit ce que l’on voit et ce qui doit changer. « Plus dynamique » ne s’exécute pas ; « pas de boucle de flottement », si.

Écrire un brief qui se vérifie

Le code convient aux compositions faites de texte, de formes et d’éléments d’interface : une annonce de dix secondes, une démonstration de produit avec des données fictives, une typographie en mouvement. Une scène filmée, des personnages ou une matière organique demandent d’autres outils. Choisir la bonne matière évite de passer une heure à forcer le mauvais outil.

Dans le navigateur, HTML et CSS servent la mise en page, SVG les formes vectorielles, et Canvas offre une surface où chaque image est dessinée en JavaScript.3 La démonstration plus bas utilise Canvas, pour que le rendu et l’export vivent au même endroit.

« Fais une belle animation » ne donne aucun critère pour juger le résultat. Un brief utile fixe le format, le message, la durée et la chronologie :

Crée une animation de 8 secondes dans un canvas 1280 × 720. Fond presque noir, texte ivoire, un seul accent spectral. De 0 à 2 secondes : apparition du titre « Une idée ». De 2 à 5 secondes : trois modules s’assemblent. De 5 à 8 secondes : afficher « Une forme, un rythme ». Garde un temps de lecture d’au moins deux secondes pour le dernier message. Ajoute Lecture, Pause, Rejouer et un curseur temporel. Toute l’image doit être calculée à partir d’un temps t ; aucun hasard. N’utilise aucune dépendance distante.

Le détail décisif est la fonction du temps. Quand chaque image dépend seulement de t, revenir à 3,4 secondes donne toujours le même état. Les corrections, les captures et un futur export image par image deviennent simples. Une animation pilotée par des délais dispersés est beaucoup plus pénible à reprendre.

Construire une première séquence

Demander d’abord trois images fixes : le début, le milieu, la fin. Si ces compositions ne tiennent pas, le mouvement ne les sauvera pas. Vérifier la largeur du titre, les marges, la place de l’accent, le contraste. Ensuite seulement, relier les états.

Les retours utiles décrivent un phénomène observable : « le titre reste trop peu longtemps », « le deuxième module arrive avant que le premier soit lisible », « la décélération paraît molle ». Ils se traduisent en consignes : « garde les positions finales ; ramène l’entrée à 450 ms ; supprime le rebond ; décale le deuxième module de 120 ms ».

Il faut aussi distinguer le temps du déplacement et le temps de lecture. Une entrée peut être vive si une pause suffisante la suit. Tout accélérer rend la séquence fatigante : on doit comprendre ce qui vient de changer avant que la suite arrive.

Une démonstration à manipuler

Cette séquence locale applique ces principes : trois modules apparaissent, s’organisent et aboutissent à une composition. On peut la mettre en pause, la parcourir au curseur ou l’exporter. Elle attend une action pour démarrer et ne charge aucune ressource extérieure.

Crée dans ce dossier une démonstration de motion design autonome dans un seul fichier index.html, sans bibliothèque ni ressource distante.

Le rendu principal fait 1280 × 720 et s’adapte à la largeur disponible. Utilise un fond charbon, du texte ivoire et un filet spectral bleu, violet, rose et cyan. Affiche le titre « Une forme, un rythme. », puis trois modules intitulés « Intention », « Composition » et « Mouvement ».

La séquence dure 8 secondes :
– de 0 à 2 secondes, le titre apparaît avec une décélération nette ;
– de 2 à 5 secondes, les trois modules arrivent successivement avec 120 ms de décalage ;
– de 5 à 8 secondes, les modules s’alignent et le filet spectral se déploie sous la composition.

Calcule chaque image à partir d’un temps t pour que le curseur temporel puisse afficher exactement n’importe quel instant. N’utilise aucun hasard. Ajoute sous la scène les commandes « Lire », « Pause », « Rejouer », un curseur de 0 à 8 secondes et « Exporter la vidéo ». L’export utilise captureStream et MediaRecorder, détecte le format pris en charge et télécharge le fichier avec la bonne extension.

La page doit fonctionner au clavier, afficher un focus visible, respecter prefers-reduced-motion, attendre une action avant la lecture et rester entièrement utilisable sur mobile. Ajoute sous les contrôles une phrase courte qui explique qu’aucune ressource extérieure n’est chargée. Quand tu as terminé, ouvre la page, vérifie les trois états à 0, 4 et 8 secondes, puis corrige tout débordement.

Ouvrir la démonstration en grand · Télécharger le fichier source HTML

Passer du navigateur à la vidéo

Un fichier HTML animé n’est pas encore une vidéo. Un canvas peut produire un flux grâce à captureStream(), que MediaRecorder enregistre ensuite. Le format dépend du navigateur : on le vérifie avec MediaRecorder.isTypeSupported() au lieu de promettre un MP4. La démonstration choisit un format pris en charge et nomme le fichier en conséquence.45

Ajoute un export de la séquence via captureStream et MediaRecorder. Détecte les formats pris en charge, affiche un message si aucun ne convient, bloque les commandes pendant l’enregistrement et arrête toutes les pistes à la fin. Exporte uniquement le canvas, sans les boutons. Indique le format réel dans le nom du fichier.

Cette capture se fait en temps réel : laisser l’onglet au premier plan et ne pas surcharger la machine. Elle suffit pour une validation ou une première diffusion. Pour une cadence exacte, demander ensuite un rendu image par image assemblé par un encodeur vidéo : un outil de plus, mais la maîtrise complète de la cadence et du codec.

Regarder enfin le fichier exporté, pas la prévisualisation : la première et la dernière image, le poids, la lecture sur téléphone. Une animation visible dans le navigateur ne prouve pas qu’un export est valide. Garder ensuite le brief, le code et la vidéo ensemble. La prochaine demande pourra tenir en une ligne : passer au format vertical, changer un titre, ralentir un passage.