Vidéo explicative : finition Remotion, cover, export vérifié

Production Remotion

Construisez des vidéos Remotion en tant que moteurs de rendu déterministes par image. Traitez la géométrie des assets, l'ancrage visuel, le timing temporel et la vérification finale des médias comme des préoccupations distinctes.

Acheminer la tâche

• Pour l'extraction de sprite-sheet, les débordements de trame, les sujets décentrés, les illustrations tronquées ou les boucles non naturelles, lisez references/sprite-sheets.md.
• Pour la structure de composition, le timing des scènes, les panneaux de coordonnées en direct ou la conception de transitions, lisez references/scene-architecture.md.
• Pour une couverture d'ouverture incorporée dans la vidéo, une composition de miniature autonome, une fin de marque ou un plan final maintenu, lisez references/covers-and-endings.md.
• Pour le chargement des assets, l'audio, les échecs delayRender, les rendus hors mémoire ou la vérification d'export, lisez references/rendering-and-audio.md.
• Pour les prompts d'image de couverture, les indications de miniature, les descriptions courtes de vidéo ou les hashtags de publication, lisez references/publishing-copy.md.

Lisez uniquement les références pertinentes pour la demande. Inspectez la version installée de Remotion avant de choisir les imports, car les projets plus anciens peuvent exposer les composants média depuis remotion, tandis que les projets récents utilisent @remotion/media.

Flux de production

1. Établir le contrat de rendu

Inspectez le projet existant avant de l'éditer. Enregistrez :

• l'ID de la composition, la largeur, la hauteur, les FPS et la durée ;
• les limites des scènes et si les images sont globales ou locales à une Sequence ;
• les dimensions des assets sources, la transparence, les métadonnées des trames et la durée audio ;
• le codec de sortie requis, la destination et les ressources de rendu disponibles ;
• si les livrables incluent une scène de couverture d'ouverture, une image de couverture autonome, une carte de fin, un son audible, un silence intentionnel ou une copie de publication.

Préservez les modifications non liées dans l'arbre de travail. Privilégiez une petite modification ciblée plutôt que la restructuration d'un projet fonctionnel.

2. Modéliser le temps explicitement

Définissez les durées des scènes et les images de coupure comme des constantes nommées ou des données. Dérivez l'état de l'animation à partir de useCurrentFrame() et useVideoConfig().

const spriteIndex =
  Math.floor((frame * spriteFps) / compositionFps) % sequence.length;

Utilisez interpolate() avec des plages limitées pour les mouvements continus. N'utilisez pas de transitions CSS, d'animations CSS, de minuteries horloge, de valeurs aléatoires ou d'état de lecture mutable pour l'animation rendue.

3. Séparer la géométrie source de la présentation

Conservez les rectangles de recadrage, l'ordre d'animation, les limites de contenu et les ancres visuelles dans des données typées. Faites en sorte que les composants de rendu consomment ces données plutôt que de dupliquer les coordonnées dans le CSS ou les étiquettes.

Utilisez le même objet courant calculé pour :

• le recadrage visible ;
• les compteurs d'images et les cellules mises en surbrillance ;
• les panneaux JSON/coordonnées ;
• les légendes qui décrivent l'image active.

Cela évite une animation correcte avec une interface utilisateur explicative obsolète.

Lors de l'affichage d'une bande de film, générez une fenêtre qui contient exactement l'image courante. Ne mettez pas en surbrillance l'image échantillonnée la plus proche tout en rendant un recadrage différent.

4. Stabiliser le sujet principal

Utilisez une zone d'affichage fixe pour l'animation. Recadrez d'abord le rectangle source exact, puis translatez cette image recadrée à l'intérieur de la zone d'affichage en utilisant une ancre visuelle ou une boîte de contenu visible par image. Ne centrez pas seulement le rectangle brut de la cellule lorsque l'illustration se déplace à l'intérieur des cellules.

Pour les feuilles de sprites, vérifiez chaque image de bord et toute image contenant des extrémités longues telles que queues, cheveux, ombres ou traînées de mouvement. Suivez le flux de travail détaillé dans references/sprite-sheets.md.

5. Assurer la continuité des scènes

Donnez à la composition un arrière-plan persistant opaque au-delà de toutes les séquences de scène. Les arrière-plans de scène peuvent également rester opaques. Appliquez les transitions comme des superpositions pilotées par les images au-dessus des scènes et en dessous de toute vignette finale ou superposition de sécurité.

Gardez les effets décoratifs subordonnés à l'explication. Une transition doit masquer une coupure, non révéler la transparence, les damiers, les cellules de sprite voisines ou le contenu non monté.

Lorsque la demande inclut une couverture ou une fin, implémentez-les comme des scènes de première classe et rendez une composition de couverture autonome lorsque c'est utile. Suivez references/covers-and-endings.md. Ne remplacez pas un prompt de génération de couverture par une couverture Remotion réelle, sauf si l'utilisateur a demandé uniquement un prompt.

6. Ajouter et mixer l'audio

Référencez l'audio local avec staticFile(). Couvrez toute la composition en choisissant une piste suffisamment longue, en bouclant intentionnellement ou en tronquant intentionnellement. Pour une longue piste fournie par l'utilisateur, inspectez sa durée, son silence et son volume sonore, puis placez uniquement l'extrait requis dans public/audio/. Choisissez une limite musicalement naturelle plutôt que de vous fier uniquement au volume sonore.

Utilisez une fonction de volume basée sur les images pour les fondus et gardez la musique de fond suffisamment basse pour la narration ou le texte d'instruction. Évitez d'incorporer des fondus dans l'extrait lorsque Remotion possède déjà le volume de la piste.

Ne déclarez pas l'audio comme terminé sur la seule base de l'aperçu Studio. Vérifiez que le fichier exporté contient un flux audio mesurablement non silencieux.

7. Valider par ordre croissant de portée

Exécutez les vérifications dans cet ordre :

1. Vérifiez les types du projet.
2. Rendez des images fixes à la couverture, de chaque côté de chaque coupure, aux images de sprite représentatives, à l'entrée de fin et au plan final maintenu.
3. Rendez la composition complète.
4. Si Chrome épuise la RAM ou le disque temporaire, réduisez la concurrence de rendu avant de modifier le code d'application.
5. Inspectez le conteneur final pour la durée, le flux vidéo et le flux audio requis.

Utilisez le vérificateur intégré après l'export :

node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio

Considérez une sortie partielle ou échouée comme invalide même si un fichier existe à la destination.

8. Préparer la copie de publication lorsqu'elle est demandée

Basez les prompts de couverture et les descriptions de vidéo sur la composition finale, le sujet vérifié, les points d'enseignement, le style visuel, la durée et le public. Produisez ces livrables directement dans la conversation utilisateur. Ne créez pas de fichiers de prompts ou de descriptions, n'appelez pas un outil de génération d'image et ne générez pas d'image de couverture sauf si l'utilisateur le demande explicitement.

Suivez references/publishing-copy.md. Rendez le résultat prêt à copier, concis pour la plateforme cible et rédigé dans la langue de l'utilisateur.

Standard d'achèvement

Ne déclarez pas la tâche terminée jusqu'à ce que :

• l'animation soit dérivée de manière déterministe des images ;
• les limites du sujet restent complètes et visuellement stables tout au long de la boucle ;
• les coordonnées explicatives soient mises à jour avec l'image de sprite rendue ;
• les coupures de scène n'exposent jamais d'artefacts de transparence ou de damier ;
• les assets média se chargent sans poignées de rendu qui fuient ;
• un rendu complet réussisse à une concurrence stable ;
• le fichier exporté ait la durée attendue, les flux audio/vidéo requis et un son non silencieux lorsque de la musique est demandée ;
• les scènes de couverture et de fin demandées soient visuellement vérifiées à l'état complet, aux limites de transition et à l'image finale ;
• l'illustration de couverture autonome inclue son propre arrière-plan opaque et corresponde à la hiérarchie vidéo ;
• les prompts de couverture et les descriptions de publication demandés reflètent avec précision la vidéo finale et soient livrés directement dans la conversation.

Signalez le chemin de sortie, la commande de rendu, le résultat de la vérification et toute concurrence intentionnellement réduite.