vibe-motion/remotion-code-motion-explainer

Remotion Code Motion Explainer

Construisez une explication abstraite sous la forme d'un système visuel continu et modifiable. Montrez comment chaque concept évolue, plutôt que de décorer une narration avec des mouvements sans rapport.

Créé par Bingo (@DWCD-Bingo) et maintenu sous l'organisation Vibe Motion.

Chargez les directives pertinentes

• Lisez references/code-motion-design.md pour chaque production.
• Lisez references/motion-production-patterns.md pour chaque production.
• Lisez references/production-and-qc.md avant l'implémentation et la livraison finale.
• Lisez references/ui-motion-shot-library.md pour les travaux d'interface utilisateur, produits, workflows IA, focus néon, formes d'onde, tableaux de bord, outils de conception ou interfaces haute-fidélité.
• Lisez references/reference-reconstruction.md lors de l'étude ou de la reproduction d'une vidéo de référence, d'un rendu After Effects, d'un prototype ou d'un enregistrement d'écran.
• Utilisez assets/shot-library comme bibliothèque de plans modifiables fournie. Recherchez dans assets/shot-library/shot-library.json avant de concevoir un nouveau plan. Copiez la bibliothèque dans le projet cible lorsqu'un composant réutilisable correspond à la tâche sémantique ; ne modifiez pas la compétence installée sur place.
• Consultez la documentation Remotion installée ou la compétence des bonnes pratiques avant d'utiliser des API inconnues.

Établissez le contrat de production

1. Résolvez le script ou l'explication approuvé(e), le statut de la narration, l'autorité des sous-titres, le ratio d'aspect, la fréquence d'images, la durée, le système de marque, les faits techniques et le format de livraison.
2. Traitez les sous-titres vérifiés humainement comme une autorité de synchronisation en présence de narration. En l'absence de narration, créez une ligne de temps explicite des battements et concevez la vidéo pour qu'elle reste compréhensible en mode muet.
3. Utilisez uniquement des ressources fournies par l'utilisateur, sous licence, dans le domaine public, ou clairement redistribuables.
4. N'inventez jamais de comportement de produit, de données numériques, de relations scientifiques ou de résultats d'interaction.
5. Privilégiez un système visuel paramétré plutôt que des scènes codées en dur une par une.

Exécutez le workflow

1. Convertissez le langage en états visuels

• Divisez l'explication en battements sémantiques au niveau des propositions.
• Pour chaque battement, enregistrez :
  • la narration ou l'affirmation à l'écran ;
  • l'objectif narratif ;
  • l'état d'entrée ;
  • le verbe dominant ;
  • la transformation visible ;
  • l'état de sortie ;
  • le focus du spectateur ;
  • la transition vers le battement suivant.
• Compilez les noms, actions, nombres, relations et changements d'état en acteurs visuels indépendants.
• Identifiez les objets persistants qui survivent entre les battements.
• Choisissez la représentation précise la plus simple : UI, flux, diagramme, forme d'onde, formule, graphique, modèle spatial, ou 3D.
• Écrivez le plan dans src/data/choreography-plan.json.

Porte : chaque déclaration a un travail de raisonnement visible, un acteur, un résultat et une transition.

2. Verrouillez le système visuel

• Définissez la grille, la zone de sécurité, l'espacement, la typographie, la sémantique des couleurs, la profondeur, la caméra et les courbes de mouvement.
• Écrivez une phrase de concept unique décrivant le monde visuel.
• Concevez des images statiques représentatives pour l'accroche, le mécanisme le plus complexe et la fin.
• Construisez l'image héroïque à information maximale avant de concevoir les entrées.
• Créez un registre d'objets persistants et un plan de coordonnées mondiales.
• Décomposez les objets complexes en parties mobiles significatives plutôt que d'animer des captures d'écran plates.
• Gardez les concepts identiques visuellement cohérents tout au long de la vidéo.

Porte : les images statiques se lisent comme un seul système et l'image complexe peut être assemblée à partir de composants modifiables.

3. Implémentez un mouvement Remotion déterministe

• Animez à l'aide de useCurrentFrame(), interpolate(), spring() et de plages d'images explicites.
• N'utilisez pas de transitions CSS, d'animations CSS, de valeurs aléatoires sans déterminisme ensemencé, ou d'animations de navigateur chronométrées indépendamment.
• Gardez les valeurs paramétrées via des props et des schémas Zod si utile.
• Privilégiez React, SVG et HTML. Utilisez Canvas, WebGL ou Three.js uniquement lorsque le concept le nécessite.
• Mesurez le texte, limitez les plages, validez les entrées numériques et évitez les effets secondaires dépendant des images.
• Gardez les objets persistants montés et faites muter leur état entre les battements.
• Composez deux à quatre atomes de mouvement compatibles dans chaque fenêtre de révision de quatre à six secondes.
• Donnez à chaque fenêtre des phases de configuration, d'action, de résultat visible et de transition.
• Figez chaque enfant dépendant du temps à partir de la même image d'affichage lorsque la fin doit se stabiliser.

Porte : le rendu est déterministe, modifiable, techniquement précis et stable à des images arbitraires.

4. Préservez la continuité et la causalité

• Réutilisez la position, l'identité de l'objet, l'échelle, les masques, la direction et les motifs audio à travers les transitions.
• Transformez ou transmettez un élément significatif avant d'introduire le suivant.
• Utilisez les mouvements de caméra uniquement pour révéler la hiérarchie ou la relation.
• Évitez les réinitialisations répétées de fondu et d'échelle plein écran.
• Maintenez au moins un invariant visuel entre les battements adjacents, sauf si une réinitialisation de chapitre est délibérée.
• Rendez la cause et l'effet lisibles : l'entrée bouge, le processus réagit, la sortie devient visible, et la caméra révèle le système plus large.

Porte : la vidéo muette reste compréhensible en tant qu'explication continue.

5. Liez narration, étiquettes et son

• Déclenchez les étiquettes, valeurs, états et retours d'interaction sur des repères de sous-titres exacts.
• Gardez la narration clairement dominante sur la musique et les effets.
• Utilisez des ticks, impacts, balayages et accents tonaux retenus uniquement pour les événements visibles.
• Créez une carte des événements audio en parallèle du plan de mouvement.
• Terminez la musique et le mouvement par une résolution intentionnelle plutôt qu'une coupe brutale.

6. Révisez, rendez et apprenez

• Rendez d'abord l'accroche, le mécanisme le plus complexe, les états d'équations/données, les transitions et la fin.
• Inspectez les images d'entrée, de milieu, d'information maximale, de transition et de stabilisation.
• Révisez les fenêtres de mouvement contiguës et leurs chevauchements, pas seulement des captures d'écran isolées.
• Créez une planche contact couvrant l'ensemble de la ligne de temps.
• Vérifiez la stabilisation de l'image finale en comparant deux images tardives pixel par pixel.
• Vérifiez le rognage du texte, les zones de sécurité, le contraste des couleurs, l'exactitude des formes d'onde/données, les ressources manquantes, les pics audio, la durée, la fréquence d'images et le codec.
• Sauvegardez les preuves de révision dans qc/workflow-evidence.json.
• Enregistrez les corrections et composants réutilisables dans qc/production-learning.json.

Porte : le rendu complet satisfait aux contrôles sémantiques, de continuité, de causalité, de composition, de synchronisation, techniques et de licence.

Rejetez

Rejetez les interactions inexactes, les données inventées, les mouvements arbitraires, les étiquettes illisibles, les diagrammes de processus aplatis, les réinitialisations génériques de diapositives, le décalage narration/sous-titres, les ressources sans licence, les chemins personnels codés en dur, le rendu non déterministe, l'absence de révision des fenêtres de mouvement, les contrôles de stabilisation d'image finale omis, ou les copies de référence de marque présentées comme des modèles réutilisables.

Livrez

Retournez la vidéo finale, le projet Remotion modifiable, la ligne de temps, les paramètres des composants, les ressources d'entrée approuvées, les pistes audio le cas échéant, la planche contact, les preuves de contrôle qualité, et une courte liste de composants réutilisables.

Exemples fournis

• assets/showcase/code-motion-promo-30s.mp4 : bande-annonce de 30 secondes démontrant les capacités.
• assets/showcase/ac-to-dc-explainer.mp4 : exemple d'explicateur scientifique.
• assets/shot-library : bibliothèque de plans Remotion modifiables et catalogue consultable.