Générer une vidéo à partir de code

1Décider si le code est le bon outil

Le rendu programmatique gagne sur trois terrains, et perd partout ailleurs.

• La répétition paramétrée. Une même vidéo déclinée par client, par ville, par produit. Un jeu de données, une boucle, un fichier par ligne.
• Le contenu qui change. Un chiffre issu d'une base, un texte relu par quelqu'un d'autre. Tu régénères au lieu de rééditer.
• Le versionnage. La vidéo vit dans le dépôt, les modifications se lisent dans un diff, on revient en arrière.

À l'inverse, si tu produis une vidéo unique, avec des choix de montage au jugé et des rushes filmés, un éditeur classique restera plus rapide. Écrire du code pour placer une coupe est un mauvais échange.

2Créer le projet et ouvrir le studio

La commande d'initialisation lance une interface interactive qui te fait choisir un modèle de départ :

npx create-video@latest

Pour éviter les questions, il existe un mode non interactif, qui exige un indicateur de modèle et un nom de dossier. Les modèles disponibles incluent --blank, --hello-world, --next, --next-pages-dir, --vercel et --recorder :

npx create-video --yes --blank --no-tailwind ma-video

Une fois dans le dossier, le studio se lance avec :

npx remotion studio

Il ouvre un aperçu avec une réglette de lecture. Le point important : cet aperçu n'est pas un export, c'est ta composition jouée dans un navigateur. Ce que tu vois est ce qui sera rendu image par image.

3Raisonner en images, pas en secondes

C'est le changement de repère qui fait toute la différence, et celui que les agents ratent le plus souvent quand ils écrivent ce genre de code.

Une composition, dans Remotion, est la combinaison d'un composant React et de métadonnées vidéo : une largeur en pixels, une hauteur en pixels, une cadence fps et une durée durationInFrames exprimée en nombre d'images.

Tout le temps se compte donc en images. À 30 images par seconde, deux secondes valent 60 images. Le hook useCurrentFrame() te donne le numéro de l'image en cours de rendu, et ton composant doit répondre à une seule question : à quoi ressemble l'écran à cette image précise.

4Animer avec interpolate

L'animation se réduit à une transformation : à partir du numéro d'image, calculer une valeur. La fonction interpolate prend quatre arguments, le dernier étant facultatif : la valeur d'entrée, la plage d'entrée, la plage de sortie et un objet d'options.

import {interpolate, useCurrentFrame} from 'remotion';

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1]);

Ici, l'opacité passe de 0 à 1 entre l'image 0 et l'image 20, et vaut 0,5 à l'image 10.

Deux options méritent d'être connues tout de suite. extrapolateLeft et extrapolateRight décident de ce qui se passe hors de la plage d'entrée. Leur valeur par défaut est 'extend', ce qui veut dire que la valeur continue de croître au-delà de l'image 20. C'est presque jamais ce que tu veux pour une opacité : passe-les à 'clamp' pour bloquer aux bornes. L'option easing permet de remplacer la progression linéaire par une courbe.

5Rendre en ligne de commande

Le rendu se fait hors du studio, et c'est ce qui rend l'automatisation possible. La commande prend l'identifiant de la composition et le fichier de sortie :

npx remotion render <composition-id> out/video.mp4

Le point d'entrée peut être passé en premier argument, sinon il est déterminé automatiquement. Quelques options utiles :

La production en série découle directement de là : un fichier de paramètres par variante, une boucle qui appelle render pour chacun, un fichier de sortie nommé d'après la ligne.