Rendu Remotion

Que fait Rendu Remotion ?

Pilote la boucle rendu-et-itération : transforme une composition en MP4, reçois des retours en langage naturel, effectue la plus petite modification qui les satisfait, et relance le rendu. Le mode d'échec coûteux est la boucle inverse – réécrire des fichiers de scène entiers pour une simple retouche de copie, ou relancer un rendu en pleine qualité pour chaque vérification – ce qui détruit le travail approuvé et la vitesse d'itération qui fait que Remotion vaut la peine d'être utilisé.

Procédure opérationnelle

Étape 1 : Rassembler les entrées

• ID de la composition (l'id sur le <Composition> dans src/Root.tsx, pas un nom de fichier) et le point d'entrée (le fichier qui appelle registerRoot, généralement src/index.ts).
• Cible : plateforme / format (paysage 16:9, vertical 9:16, carré), résolution (1080p par défaut ; 4K uniquement sur demande), et si la transparence est nécessaire.
• Cœurs de la machine (pour la concurrence) et s'il s'agit d'un rendu unique, d'une session d'itération ou d'un lot.

Étape 2 : Le rendu de base

npx remotion render src/index.ts <CompositionId> out/video.mp4

La sortie par défaut est un MP4 H.264 avec la largeur/hauteur/fps de la composition ; Remotion crée out/ si nécessaire.

Étape 3 : Résolution, fps et préréglages de codec

La résolution et les fps se trouvent sur le <Composition> (width/height/fps) – modifie-les à la source. Utilise les flags uniquement pour le changement d'échelle et le conteneur :

# Paysage 1080p - Composition créée en 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - upscale du canvas 1080p sans toucher à la mise en page
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# Vertical 9:16 - rendu d'une Composition créée en 1080x1920
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

Règles de codec :

• La livraison web/réseaux sociaux reste en H.264 MP4 (le défaut) – compatibilité maximale.
• Transparence : --codec=vp8 ou vp9 (WebM), ou --codec=prores avec alpha pour les pipelines de montage. Le H.264 ne peut pas porter d'alpha.
• Du vrai 60fps signifie fps={60} sur la Composition avec des nombres d'images mis à l'échelle – un changement de fps uniquement par flag désynchronise toutes les animations chronométrées en images.

Étape 4 : Ajuster la concurrence

Le rendu est lié au CPU (chaque image est une capture d'écran Chromium sans tête). Par défaut, environ la moitié des cœurs ; un réglage explicite est le moyen le plus simple d'accélérer localement :

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

Commence par le nombre de cœurs physiques (--concurrency=50% accepte un pourcentage) ; réduis si la machine swappe ou se limite thermiquement – passé le point optimal, plus d'onglets Chromium ralentissent, n'accélèrent pas.

Étape 5 : Exécuter la boucle d'itération

Laisse le Studio ouvert (npx remotion studio, http://localhost:3000) pour que l'utilisateur prévisualise instantanément ; réserve les rendus complets pour la validation.

1. L'utilisateur prévisualise dans le Studio et donne un retour en langage naturel.
2. Traduis-le en une modification chirurgicale – ne change que la valeur pertinente :
   • "Trop rapide" → élargit la plage d'entrée de interpolate ou augmente le damping du ressort.
   • "Le logo devrait plus ressortir" → baisse le damping du ressort / ajoute un dépassement.
   • "Change le texte du CTA" → modifie la prop / defaultProps, ne touche à rien d'autre.
   • "Couleur d'accent différente" → change un hex dans l'objet de couleurs.
   • "Garde la dernière fonctionnalité plus longtemps" → augmente le durationInFrames de ce <Sequence> ET recalcule le durationInFrames total de la Composition.
3. Relance le rendu, ou laisse le Studio faire un rechargement à chaud pour la vérification visuelle.

Modification chirurgicale vs réécriture : modifie sur place quand le changement est une valeur, une prop, une couleur ou le timing d'une scène ; ne réécris que lorsque la structure de la scène change (ajout/suppression/réorganisation de scènes – et dirige la création structurelle vers remotion-compose). Par défaut, choisis la modification chirurgicale : elle préserve tout ce qui est déjà approuvé.

Étape 6 : Lots de variantes

La composition est pilotée par les données, donc N variantes = N ensembles de props dans un fichier JSON :

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props accepte du JSON en ligne ou un chemin de fichier ; pour plus de quelques variantes, écris un petit script Node qui lit le JSON et shell pour chaque entrée, ou utilise renderMedia() de @remotion/renderer pour une boucle typée. Localise ou fais des tests A/B sur le texte et les couleurs uniquement en modifiant le JSON.

Étape 7 : Lambda quand le local est le goulot d'étranglement

Passe à Lambda quand un seul rendu prend des minutes localement ou que le lot est important – il distribue les images sur des workers serverless. Sinon, le local est plus simple et gratuit.

npx remotion lambda functions deploy            # une fois par compte AWS/région
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

Nécessite des identifiants AWS et des permissions IAM selon la configuration Lambda de Remotion.

Étape 8 : Dépanner les trois pannes courantes

1. Inadéquation du nombre d'images – l'animation s'arrête trop tôt ou le clip a une queue morte. Cause : la durée d'un <Sequence> a changé mais le total de la Composition n'a pas été mis à jour. Solution : fais en sorte que le total soit égal à la somme des séquences ; recalcule après chaque modification de timing. C'est la surprise de rendu numéro 1.
2. Référence staticFile() manquante – le rendu échoue ou un élément est vide. Cause : un élément importé par chemin ou en dehors de public/. Solution : mets-le dans public/assets/ et référence-le avec staticFile("assets/<nom>").
3. Flash/changement de police – le texte s'affiche dans la mauvaise police ou se décale. Cause : loadFont() de @remotion/google-fonts manquante ou appelée trop tard. Solution : appelle loadFont() au niveau supérieur du module et applique la fontFamily retournée ; le rendu attend alors la police.

Livrable

Un fichier rendu dans out/ au préréglage demandé, plus – pour les sessions d'itération – une offre de boucle : nomme les dimensions modifiables (rythme, texte, couleur, timing) et relance le rendu sur retour. Pour les lots, le JSON des variantes et les sorties par variante.

À NE PAS FAIRE

• NE RÉÉCRIS PAS un fichier de scène pour un changement de niveau de valeur – les modifications chirurgicales préservent le travail approuvé.
• NE CHANGE PAS les fps uniquement via des flags – règle-les sur la Composition et mets à l'échelle le nombre d'images.
• NE CHANGE PAS la durée d'un Sequence sans recalculer le durationInFrames total de la Composition.
• NE FAIS PAS de rendu complet à chaque itération – le rechargement à chaud du Studio est la boucle de prévisualisation ; rendu à la validation.
• NE POUSSE PAS la concurrence au-delà des cœurs physiques sur une machine qui swappe ou se limite thermiquement.
• NE PASSE PAS à Lambda quand les rendus locaux se terminent en quelques secondes – cela ajoute une configuration AWS et un coût pour rien.
• NE CRÉE PAS de nouvelles scènes ni ne restructure la composition ici – c'est le rôle de remotion-compose.

Barre de qualité

• La sortie est lue à la résolution/format/fps demandés, sans queue morte et sans coupure prématurée (le total de la Composition correspond à la somme des séquences).
• Les éléments et les polices s'affichent correctement dès la première image – pas de flash de police de secours, pas d'élément vide.
• Une itération n'a modifié que les lignes que le retour exigeait ; tout ce qui était approuvé précédemment est intact.
• Les sorties du lot ne diffèrent que par leurs ensembles de props.

Escalade

La création de scènes, la conception d'animations et la structure des composants vont vers remotion-compose ; l'échafaudage de projet vers remotion-setup ; le score et le synchronisation audio vers sound-and-music-sync.