Ce qui t’attend.
Le motion design piloté par le code, expliqué de A à Z.
Le principe.
Ce que fait vraiment un logiciel de montage, sans le logiciel.
Ce qu’est une vidéo.
Trois nombres pour tout comprendre.
La cadence
Une vidéo à 30 images par seconde, c’est 30 images affichées à la suite, chaque seconde.
Pour 5 secondes
Ton code dessine 150 images, une par instant, de t = 0 à t = 1.
Pour assembler
FFmpeg transforme le dossier d’images en MP4 lisible partout.
Tu écris une fonction render(t) qui dessine l’image à l’instant t. Le mouvement vient uniquement de la façon dont tes éléments dépendent de t.
Ce qu’il te faut.
Tout est gratuit.
- Node.js : Node.js, installé sur ton ordinateur.
- FFmpeg : FFmpeg, l’outil qui assemble les images en vidéo.
- Un agent : Claude Code ou Codex pour écrire et modifier le code à ta place.
Dessiner
une frame.
Le cœur du système tient en vingt lignes.
À t = 0 le titre est invisible et décalé vers le bas, à t = 1 il est en place…
Dessiner
une frame.
Le cœur du système tient en vingt lignes.
La fonction render.
Copie, lance, regarde le dossier se remplir.
À t = 0 le titre est invisible et décalé vers le bas, à t = 1 il est en place. Il utilise @napi-rs/canvas pour dessiner chaque image.
import { createCanvas } from '@napi-rs/canvas';
import fs from 'node:fs';
const W = 1080, H = 1920, FPS = 30, DUREE = 5;
const canvas = createCanvas(W, H);
const ctx = canvas.getContext('2d');
// t va de 0 (début) à 1 (fin)
function render(t) {
ctx.fillStyle = '#01090d';
ctx.fillRect(0, 0, W, H);
const e = 1 - Math.pow(1 - t, 3); // ralenti en fin de mouvement
ctx.globalAlpha = e;
ctx.fillStyle = '#00e5d0';
ctx.font = 'bold 160px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('GLITCH', W / 2, H / 2 + (1 - e) * 140);
ctx.globalAlpha = 1;
}
fs.mkdirSync('frames', { recursive: true });
const total = FPS * DUREE;
for (let i = 0; i < total; i++) {
render(i / (total - 1));
const nom = `frames/frame_${String(i + 1).padStart(4, '0')}.png`;
fs.writeFileSync(nom, canvas.toBuffer('image/png'));
}Installe la dépendance avec npm install @napi-rs/canvas, puis lance node render.mjs. Tu obtiens 150 images numérotées dans le dossier frames.
La courbe qui fait pro.
Le même ralenti que dans un logiciel de motion design.
e = 1 − (1 − t)3
Le mouvement démarre vite et ralentit à l’arrivée. C’est ce qui donne un rendu fluide plutôt que mécanique.
Assembler.
Une commande, une vidéo.
Deux versions.
Avec ou sans ta voix.
Images seules
Le dossier d’images devient un MP4. Parfait pour une animation d’intro ou un habillage.
Avec ta voix
Tu ajoutes ton audio. -shortest coupe la vidéo à la fin du plus court des deux.
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p sortie.mp4ffmpeg -framerate 30 -i frames/frame_%04d.png -i voix.m4a -c:v libx264 -pix_fmt yuv420p -c:a aac -shortest sortie.mp4Une valeur change, tu relances. Jamais de timeline à refaire à la main.
Le faire faire
par l’IA.
Tu n’as pas besoin d’écrire ce code toi-même.
À coller tel quel.
Dans Claude Code ou Codex, dans un dossier vide.
Crée un projet Node.js qui rend une animation de 5 secondes en 1080x1920 à 30 images par seconde. Une fonction render(t), avec t entre 0 et 1, dessine chaque image avec @napi-rs/canvas. Le script enregistre les frames en PNG dans un dossier frames/, puis lance FFmpeg pour assembler sortie.mp4. Explique-moi le rôle de chaque fichier et comment changer la couleur ou la durée.Dix vidéos en une.
Là où le système écrase le montage manuel.
- Texte : change le mot affiché et relance : une variante par produit ou par hook.
- Couleur : une seule valeur à modifier pour coller à chaque marque.
- Timing : allonge ou raccourcis la durée sans rien replacer à la main.
« Tu ne montes plus. Tu pilotes. »
Ta checklist.
À cocher avant chaque rendu.
Avant le rendu
Avant de publier
Les questions que tu te poses forcément.
Réponses directes.
« Je n’ai jamais installé Node.js. »
Télécharge la version LTS sur nodejs.org et installe-la comme n’importe quel logiciel. Ou demande à Claude Code de te guider étape par étape.
« FFmpeg n’est pas reconnu dans le terminal. »
Il n’est pas dans ton PATH. Demande à Claude Code ou Codex : « installe FFmpeg et ajoute-le au PATH ». Redémarre ensuite le terminal.
« Ma vidéo est noire sur iPhone. »
Il manque -pix_fmt yuv420p dans ta commande FFmpeg. Ajoute-le et relance l’assemblage.
Tu as tout ce qu’il
te faut.
Le principe, tu le comprends.
Le code, l’IA l’écrit.
Ce que personne ne peut faire à ta place : lancer ton premier rendu.
Code. Frames. MP4.
Va plus loin avec moi
Les formations vidéo, tous les workflows des vidéos et la communauté. 129 € par an ou 29 € par mois.
Rejoindre le labVous préférez déléguer ?
Je construis ce système pour votre équipe, livré et documenté.
Parler de votre projet