xiaoxiao8096/code-motion-video-skill

Spécification de création de vidéos animées en code pur

Les images, animations, transitions, musique, effets sonores, mise en page et polices sont entièrement produits par le code, sans utiliser de modèle de génération vidéo, d'échantillonnage ni de musique générée par IA. Chaque étape livre ses résultats au demandeur pour validation avant de passer à la suivante.

Stack technique recommandée : Remotion (React) pour l'image, Python + NumPy/SciPy pour la synthèse audio, FFmpeg pour le montage final. Il est possible d'utiliser Motion Canvas, Revideo, Manim, HyperFrames, etc., le processus reste inchangé.

1. Définition du besoin

• Protagoniste (produit, marque, personne, événement), public cible, noms ou éléments à inclure ou exclure. En cas d'ambiguïté, rédiger comme si le public n'avait aucune connaissance préalable.
• Durée (généralement 15–60 secondes), format (paysage 1920×1080, portrait 1080×1920 ou carré), fréquence d'images (60 fps recommandé pour la version finale), plateforme de diffusion.
• Lire la documentation officielle du protagoniste (site web, articles de presse, documents), en extraire les citations exactes : comment il se décrit, ses arguments de vente principaux, son ton. Les faits présentés dans la vidéo doivent uniquement provenir de ces sources.

2. Recherche de références open source

Vérifier chaque référence en pratique, enregistrer l'adresse, la licence et la valeur de référence ; ne pas inclure celles introuvables. Catégories courantes :

• Frameworks vidéo et leurs exemples de dépôts : Remotion, Motion Canvas, Revideo, Manim, HyperFrames, theatre.js, GSAP, Lottie.
• Systèmes de design et palettes : Radix Colors, Open Color, Tailwind, Catppuccin, IBM Carbon, Primer, Geist, awesome-design-systems.
• Arrière-plans avec dégradés et shaders : shadergradient, whatamesh, three.js.
• Animations : Motion, react-spring, anime.js, awesome-creative-coding.
• Audio : Tone.js, jsfxr, ZzFX, tonal.
• Polices : utiliser uniquement des licences autorisant un usage commercial (comme SIL OFL). Pour le chinois, on utilise souvent Noto Sans SC, Noto Serif SC,得意黑 (pour les titres),霞鹜文楷 ; pour le latin, Inter, Space Grotesk, Unbounded, JetBrains Mono.
• Icônes : Lucide, Tabler, Phosphor.
• Guide de style rédactionnel : chinese-copywriting-guidelines, Humanizer-zh, humanizer, stop-slop.
• Logo ou éléments spécifiés : trouver le fichier original, vérifier la licence et savoir s'il s'agit d'une marque déposée. Les logos sans licence ne sont utilisés que pour les aperçus internes ; une autorisation doit être obtenue avant diffusion publique.

3. Rédiger le concept (sans rendu)

• Phrase de thème et ton général.
• Timeline unifiée : définir un BPM (ex. 120 BPM, 2 secondes par mesure), chaque coupe tombant sur une mesure ou un temps fort. Enregistrer les temps sous forme de numéros d'images à la fréquence finale dans timeline.json, utilisé à la fois pour l'image et l'audio.
• Tableau de storyboard : code temporel et intervalle d'images pour chaque scène, texte à l'écran, image, animation (courbe d'assouplissement ou paramètres de ressort), son.
• Tableau de transitions : chaque transition est conçue séparément, y compris l'ouverture et la fermeture. Décrire la technique (masque, déformation, cut, zoom avant, élément partagé agrandi, effacement de bloc couleur, retournement, etc.), intervalle d'images, assouplissement, élément amené à la scène suivante, effet sonore et temps fort correspondant.
• Système visuel : palette (hex), grille et marges, combinaison de polices (taille, graisse), traitement de l'arrière-plan.
• Musique : tonalité, progression d'accords, structure des sections, méthode de synthèse de chaque instrument, correspondance avec les points de coupe.
• Liste des effets sonores : quels effets sonores pour chaque scène, comment les synthétiser.
• Prendre environ 4 captures d'écran statiques de style (avec HTML + navigateur sans tête), ajouter 1 à 2 images de décomposition de transition (états intermédiaires assemblés).

4. Alternatives de direction visuelle

Lorsque le style n'est pas décidé ou que le demandeur objecte, proposer 3–4 directions sensiblement différentes (ex. magazine clair, dégradé chaud avec verre dépoli, autocollants pop colorés, grille suisse, tech sombre). Pour chaque direction, fournir palette, arrière-plan, police et source d'inspiration, capturer une image de style d'une scène identique, puis réaliser un montage comparatif pour choisir. Le storyboard et les transitions restent inchangés, seule la direction visuelle change.

5. Production

• Image : utiliser les fichiers de police locaux, attendre leur chargement avant de rendre. Toutes les animations sont pilotées par le numéro d'image ; les animations SVG/CSS/JS exécutées en temps réel par le navigateur doivent être réécrites en calcul par image, sinon le rendu est indéterministe.
• Animations : pour un style vif, utiliser des ressorts avec dépassement et compression-étirement ; pour un style sobre, des courbes d'assouplissement lisses. Le rebond du ressort peut entraîner des valeurs d'échelle négatives, à tronquer si nécessaire.
• Audio : écrire son propre synthétiseur, par exemple : nappes de dents de scie désaccordées, carillon FM, cordes pincées Karplus-Strong, caisse claire sinus descendante, cymbales et claps à partir de bruit filtré, compression sidechain, réverbération. Les effets sonores sont synthétisés à partir de bruit, de balayage et de résonance. On peut concevoir un jingle de marque de 2–3 notes pour la fin et la signature.
• Lors de l'écriture WAV, vérifier la profondeur de bits et la normalisation ; sinon, le volume peut être décalé de plusieurs dizaines de dB. Utiliser FFmpeg pour unifier la sonie à la valeur cible (généralement -14 LUFS pour les plateformes web), laisser une marge de crête.
• Montage : H.264 + AAC, faststart activé.
• En cas de mémoire insuffisante, réduire le nombre de tâches de rendu parallèles.

6. Aperçu

• Rendre d'abord un aperçu complet en basse résolution (ex. 960×540, 30 fps) avec le mixage final, pour valider le rythme.
• Auto-vérification : utiliser ffprobe pour vérifier la durée, le nombre d'images et les pistes audio ; extraire des images à intervalles réguliers pour créer un contact sheet et vérifier les chevauchements d'éléments, les caractères manquants, les carrés blancs ; rechercher dans le code source les contenus qui ne devraient pas apparaître.
• Lors de la livraison de l'aperçu, indiquer les risques connus, par exemple les transitions potentiellement trop rapides, les sons vérifiés numériquement mais pas écoutés à l'oreille.

7. Supprimer les artefacts d'écriture IA

• Supprimer les constructions « ce n'est pas… mais… », les répétitions ternaires, les slogans creux, le ton publicitaire, les empilements de noms abstraits.
• Écrire des scènes concrètes avec des chiffres précis, utiliser un rythme parlé, une seule idée par phrase, une longueur qui tient dans le temps.
• Ajouter des espaces entre le chinois et l'anglais, entre le chinois et les chiffres.
• Fournir un tableau comparatif avant/après scène par scène.

8. Version finale

• Le contenu est identique à l'aperçu validé ; seules les spécifications augmentent : ex. 1920×1080, 60 fps, CRF 16–18, yuv420p, AAC 320k.
• Vérifier les spécifications avec ffprobe, extraire des images clés du master pour vérifier la netteté, revoir en priorité les problèmes corrigés.
• Si le fichier est trop volumineux, produire une version compressée pour le partage.
• Si nécessaire, utiliser la même timeline pour ré-exporter au format portrait ou autre format.

Structure des fichiers

project/
  plan_v*.md        # Concept (nouvelle version à chaque itération)
  frames*/          # Images de style et sources HTML
  fonts/  assets/
  timeline.json     # Timeline partagée image/audio
  video/            # Projet vidéo
  audio/compose.py  # Script de synthèse audio
  out/              # Aperçus, versions finales, captures