Rendu Remotion

Que fait Rendu Remotion ?

Pilote la boucle rendu-et-itération : transforme une composition en MP4, reçoit un retour en langage naturel, effectue la plus petite modification qui satisfait ce retour, puis relance le rendu. Le mode d'échec coûteux est la boucle inverse : réécrire des fichiers scène entiers pour une simple modification de copie, ou relancer un rendu complet pour chaque vérification, ce qui détruit le travail approuvé et la vitesse d'itération qui rend Remotion intéressant.

Procédure opératoire

Étape 1 : Recueillir les entrées

• Identifiant de la composition (le id défini 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 : format/aspect (paysage 16:9, vertical 9:16, carré), résolution (1080p par défaut ; 4K uniquement sur demande), et besoin de transparence.
• Nombre de cœurs 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 <IdentifiantComposition> out/video.mp4

La sortie par défaut est du H.264 MP4 avec les dimensions/taux d'images par seconde (fps) de la composition ; Remotion crée le dossier out/ si nécessaire.

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

La résolution et les fps se définissent sur le <Composition> (width/height/fps) - modifiez-les à la source. Utilisez 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 - agrandir le canvas 1080p sans toucher à la mise en page
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

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

Règles de codec :

• La diffusion sociale/web 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 transporter d'alpha.
• Du vrai 60fps signifie fps={60} sur la Composition avec des comptes d'images adaptés en conséquence - un simple changement de fps par flag désynchronise toutes les animations basées sur le nombre d'images.

Étape 4 : Régler la concurrence

Le rendu est limité par le CPU (chaque image est une capture d'écran de Chromium sans tête). Par défaut, environ la moitié des cœurs sont utilisés ; 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

Commencez par le nombre de cœurs physiques (--concurrency=50% accepte un pourcentage) ; réduisez si la machine commence à swapper ou à limiter thermiquement - au-delà du point optimal, plus d'onglets Chromium ralentissent le rendu au lieu de l'accélérer.

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

Gardez Studio ouvert (npx remotion studio, http://localhost:3000) pour que l'utilisateur puisse prévisualiser instantanément ; réservez les rendus complets pour la validation finale.

1. L'utilisateur prévisualise dans Studio et donne un retour en langage naturel.
2. Traduisez ce retour en une modification chirurgicale - ne modifiez que la valeur pertinente :
   • "Trop rapide" → élargir la plage d'entrée de interpolate ou augmenter le damping du ressort.
   • "Le logo devrait plus ressortir" → réduire le damping du ressort / ajouter un dépassement.
   • "Change le texte du CTA" → modifier la prop / defaultProps, ne touchez à rien d'autre.
   • "Couleur d'accent différente" → changer un hex dans l'objet couleurs.
   • "Garde la dernière fonctionnalité plus longtemps" → augmenter le durationInFrames de cette <Sequence> ET recalculer le durationInFrames total de la Composition.
3. Relancez le rendu, ou laissez Studio se recharger à chaud pour la vérification visuelle.

Modification chirurgicale vs réécriture : modifiez sur place quand le changement concerne une valeur, une prop, une couleur ou le timing d'une seule scène ; ne réécrivez que lorsque la structure de la scène change (ajout/suppression/réorganisation de scènes - et orientez l'écriture structurelle vers remotion-compose). Par défaut, privilégiez la modification chirurgicale : elle préserve tout ce qui a déjà été 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, écrivez un petit script Node qui lit le JSON et lance un processus shell pour chaque entrée, ou utilisez renderMedia() de @remotion/renderer pour une boucle typée. Localisez ou testez A/B les textes et couleurs entièrement en modifiant le JSON.

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

Utilisez Lambda quand un rendu unique prend des minutes localement ou que le lot est volumineux - il répartit les images entre 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 autorisations IAM conformément à la configuration Lambda de Remotion.

Étape 8 : Résoudre les trois échecs courants

1. Décalage du nombre d'images - l'animation s'arrête prématurément ou le clip a une queue morte. Cause : la durée d'une <Sequence> a changé mais le total de la Composition n'a pas été mis à jour. Correction : faites en sorte que le total soit égal à la somme de ses séquences ; recalculez après chaque modification de timing. C'est la surprise n°1 lors du rendu.
2. Référence staticFile() manquante - le rendu échoue ou un asset est vide. Cause : un asset importé par chemin ou en dehors de public/. Correction : placez-le dans public/assets/ et référencez-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 est manquante ou appelée trop tard. Correction : appelez loadFont() en haut du module et appliquez le fontFamily retourné ; le rendu attendra alors la police.

Livrable

Un fichier rendu dans out/ avec le préréglage demandé, plus - pour les sessions d'itération - l'offre de boucle : nommez les dimensions ajustables (rythme, texte, couleur, timing) et relancez le rendu sur retour. Pour les lots, le JSON des variantes et les sorties par variante.

À NE PAS FAIRE

• Ne réécrivez PAS un fichier scène pour un changement de valeur - les modifications chirurgicales préservent le travail approuvé.
• Ne modifiez PAS les fps uniquement via les flags - définissez-les sur la Composition et réajustez les comptes d'images.
• Ne modifiez PAS la durée d'une Séquence sans recalculer le durationInFrames total de la Composition.
• N'effectuez PAS un rendu complet à chaque itération - le rechargement à chaud de Studio est la boucle de prévisualisation ; ne faites le rendu qu'à la validation.
• Ne poussez PAS la concurrence au-delà des cœurs physiques sur une machine qui swappe ou limite thermiquement.
• N'utilisez PAS Lambda quand les rendus locaux prennent quelques secondes - cela ajoute une configuration AWS et un coût pour rien.
• NE créez PAS de nouvelles scènes et ne restructurez PAS 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 ni coupure prématurée (le total de la Composition correspond à la somme des séquences).
• Les assets et polices s'affichent correctement dès la première image - pas de flash de police de remplacement, pas d'asset vide.
• Une itération n'a modifié que les lignes nécessitées par le retour ; tout ce qui était précédemment approuvé est intact.
• Les sorties d'un lot ne diffèrent que par leurs ensembles de props.

Escalade

L'écriture de scènes, la conception d'animations et la structure des composants relèvent de remotion-compose ; le cadrage du projet de remotion-setup ; le calage et la synchronisation audio de sound-and-music-sync.