Communitygithub.com

ConardLi/garden-skills

Créez des vidéos animées (graphiques, texte, UI) avec code source éditable, jusqu'à 20 minutes. Adapté aux démos, portfolios, UI motion, typographie animée, logos, art génératif et vidéos explicatives. Supporte BGM/effets sonores séparés, voix off par TTS ou fichier audio.

Qu'est-ce que garden-skills ?

Ce skill transforme une idée en une vidéo d'animation (graphiques, texte, interfaces) en produisant un fichier MP4 et le code source complet permettant de la reconstruire. Il est conçu pour les créateurs souhaitant réaliser des démos produit, des portfolios d'effets dynamiques, des animations UI, du typokinétisme, des génériques de logo, des boucles d'art génératif ou des vidéos explicatives. La durée maximale est de 20 minutes. Le fonctionnement est basé sur une fonction de rendu déterministe `render(t)`. Une capture d'écran est effectuée à chaque image, puis assemblée par ffmpeg. L'animation, la narration, la musique et les effets sonores partagent une timeline commune (`timeline.js`). Sans narration, le montage suit la musique. Avec narration, le timing vocal prime. Le skill offre une grande liberté créative : Canvas, SVG/DOM, WebGL, Three.js peuvent être mélangés dans un même fichier. Il intègre un workflow complet : vérification de l'environnement, confirmation des besoins (arrêt obligatoire), rédaction d'un brief technique incluant des benchmarks, création de frames de style (avec validation utilisateur), production de la vidéo par segments, mixage audio, vérification technique automatique et livraison. Il supporte plusieurs sources audio (synthèse intégrée, Tone.js, fichiers utilisateur) et la narration par TTS (Gemini, MiniMax) ou fichier audio. Le skill impose des règles strictes : rendu déterministe (pas de `Math.random`), pas de lecture à l'écran, et une vérification technique rigoureuse avant livraison.

Compatible avec~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/ConardLi/garden-skills/tree/HEAD/skills/motion-showreel

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Motion Showreel

Transformez une idée en une vidéo principalement animée (graphiques, texte, interfaces UI) et livrez un fichier MP4 ainsi que le code source permettant de la reconstruire. Préservez la densité d'effets et la liberté créative des courts-métrages, tout en permettant la création de contenus jusqu'à 20 minutes par chapitres.

Principe : La page expose une fonction déterministe render(t), un script capture chaque image, puis ffmpeg assemble le tout en MP4. Les images, la narration, la musique et les effets sonores partagent timeline.js. Sans narration, le montage suit le contenu et le rythme musical ; avec narration, le timing de la voix réelle prime, et la musique et les effets sont organisés autour de celle-ci.

D'où viennent les bons films : La densité des changements, la qualité du mouvement, un point de mémorisation, la relation image-son : ces quatre éléments déterminent généralement la perception. Mais comment et à quel point les éléments bougent dépend du style et du contenu ; tous les films n'ont pas besoin de multi-caméras, de ressorts et d'effets sonores à chaque instant. Globalement, seules quelques règles de base s'appliquent (voir « Règles de base »), le reste est un point de départ pour le modèle, pas un plafond.

Sensation vidéo : Pour les vidéos explicatives, les démos produit et les récits narratifs, le comportement et les relations des objets doivent évoluer avec le contenu, en maintenant une continuité spatiale entre les plans. Ne transformez pas chaque phrase de la narration en titre statique, puis ne les emballez pas avec des fondus, des zooms et des particules d'arrière-plan. Le storyboard doit d'abord décrire « ce que le spectateur doit comprendre comme changement, l'état avant/après du sujet, comment enchaîner avec le plan précédent », puis choisir les effets. Les logos, le typokinétisme, les boucles et les styles délibérément statiques suivent leur propre grammaire ; ne jugez pas la qualité par un mouvement constant ou un 60 fps forcé. Voir references/craft.md section « Narration continue ».


Champ d'application

L'utilisateur souhaite...Utiliser ce Skill ?
Vidéo promotionnelle produit, portfolio d'effets, animation UI, typokinétisme / calage sur le rythme, démonstration de logo, générique, boucle animée✅
Personnage sur fond vert généré par un modèle vidéo + scène, gros titre, effets créés par code✅ Le personnage est fourni par l'utilisateur (references/formats.md catégorie H)
L'utilisateur fournit un script ou un enregistrement vocal, souhaite exporter un MP4 commenté✅ Mode piloté par la narration ; le TTS doit utiliser le script original fourni par l'utilisateur
Présentation interactive nécessitant des clics, discours en direct, démo web interactive, ou transformation d'article en scriptUtilisez web-video-presentation
Site web, page d'atterrissage, prototype interactif, maquette statique❌ Utilisez web-design-engineer
Performance d'un personnage réaliste, texture réaliste, montage de séquences existantes, génération d'images directement par modèle vidéo❌

Durée : Maximum 20 minutes (1200 secondes), selon la durée confirmée par l'utilisateur. Les courts-métrages restent adaptés à 5–60 secondes ; ne transformez pas un long métrage en un calage continu et dense de vingt minutes. Au-delà de 2 minutes, lisez references/long-form.md, planifiez, produisez et révisez par chapitres. Si la durée spécifiée par l'utilisateur entre en conflit avec la longueur réelle de la narration ou le contenu, arrêtez-vous pour confirmer les ajustements, ne coupez pas, n'accélérez pas la narration et ne modifiez pas la durée du film sans autorisation.

Points forts d'Opus et pièges par défaut

  • Points forts : Dans un seul fichier, vous pouvez mélanger Canvas, SVG/DOM, WebGL, Three.js, voire changer de médium à chaque segment ; les mouvements peuvent être calculés avec précision par des formules (ressorts à temps continu, grille rythmique, flou de mouvement sub-frame) ; le son et l'image lisent le même planning temporel ; capacité à « rendre une image fixe → regarder → modifier » de manière autonome et prolongée ; fort jugement esthétique, un simple « faites de votre mieux » peut donner des résultats époustouflants.
  • Pièges par défaut : Sans contrainte, l'image tombera dans un fond sombre, un gros titre centré, tous les éléments apparaissant en fondu, un dégradé violet-bleu avec lueur, une caméra fixe ; la musique tombera dans un rythme à quatre temps en La mineur, avec un impact + crash sur chaque temps fort, un carillon pour la fin, et plusieurs films sonneront comme la même chanson. Il faut donc d'abord trouver des références (image et son), décrire le style et la liste des interdits. Mais les contraintes ne doivent pas être rigides : la bibliothèque de styles et de techniques de ce Skill sont des points de départ ; ils peuvent être modifiés, mélangés ou personnalisés selon les besoins du sujet.
  • Ce qu'il ne fait pas bien : Personnages réalistes, gestes / tissus / cheveux complexes, objets nécessitant une précision physique réelle, produits photoréalistes (sauf si l'utilisateur fournit le modèle ou l'image). Dans ces cas, traitez de manière stylisée, ou utilisez la division personnage sur fond vert + scène en code.

Flux de travail

0 Vérification de l'environnement (une fois)
1 Confirmation des besoins ──────── Compléter les champs obligatoires, résumer les exigences → 🛑 Attendre la confirmation de l'utilisateur
2 brief.md ──────── Benchmark → Utilisation + Style → Reel Read → Storyboard + Plan sonore
3 Images de style ────────── Style défini : 3 images ; Style non défini : 1 image pour chacune des 3 directions → 🛑 Attendre la confirmation de l'utilisateur
4 Production ──────────── Avec narration : préparer l'audio réel et les timestamps → timeline → plan par plan → maquette → film final
5 Musique et mixage ────── BGM, effets sonores : sources indépendantes ; avec narration, la voix prime
6 Validation ──────────── Vérification technique (programme, doit être 100% OK) + Révision (observer, lister les problèmes, soumettre à l'utilisateur pour avis final)
7 Livraison

Répertoire de travail : créer <slug>/ dans le répertoire courant de l'utilisateur. Tous les fichiers y sont placés : brief.md, index.html, motion.js, timeline.js, score.mjs ou score.tone.js (selon le choix --audio du scaffold), build.sh, fonts/, assets/, audio/, qa/, out/.

Étape 0 : Environnement

Lors de la première utilisation, exécutez sh <skill>/scripts/setup.sh : il installe Playwright et Chromium, puis exécute check-env.mjs. Nécessite Node 18+ et ffmpeg ; si manquants, indiquez à l'utilisateur comment les installer, ne les installez pas à sa place. L'outil dispose d'un test : cd <skill>/scripts && npm test.

Étape 1 : Confirmation des besoins (arrêt et attente de l'utilisateur)

Posez les questions manquantes de manière ciblée, sans répéter ce qui a déjà été fourni. Les informations suivantes doivent être claires, ne peuvent pas être remplacées par des valeurs par défaut fixes :

Information obligatoireCe qu'il faut clarifier
Sujet principal, contenu à produireQuoi présenter, quels éléments doivent apparaître
DuréeSecondes ou minutes explicites, marge de fluctuation autorisée ; ne doit pas dépasser 1200 secondes
Orientation (paysage/portrait)Déterminez les dimensions réelles ; préservez la capacité de l'utilisateur à spécifier explicitement d'autres formats comme 1:1. La résolution, le frame rate peuvent être suggérés et écrits dans le résumé de confirmation
Source BGMSynthèse AI / fournie par l'utilisateur ; l'utilisateur peut aussi la désactiver explicitement
Source effets sonoresSynthèse AI / fournie par l'utilisateur ; choix séparé du BGM, peut aussi être désactivé
Mode narrationAucune / TTS AI / Enregistrement fourni par l'utilisateur

Obligatoire sous condition : En cas de choix TTS, l'utilisateur doit fournir le script de narration ; ne pas l'écrire, le compléter, le modifier ou le synthétiser sans autorisation. Clarifiez également le service TTS et la configuration API nécessaire (réutiliser la configuration existante ; les identifiants doivent être dans des variables d'environnement, pas écrits dans le brief). Supporte Gemini, MiniMax et des adaptateurs personnalisés ; lisez references/narration.md si nécessaire. En cas d'enregistrement utilisateur, besoin du fichier audio ou d'une URL accessible ; en cas de BGM/effets sonores utilisateur, besoin des fichiers correspondants. La langue de la narration, le timbre vocal, etc., jugés à partir du script ou de la configuration, écrivez-les dans le résumé, sinon demandez-les.

Informations facultatives : Documents pertinents, audience et plateforme de diffusion, style du thème. Si l'audience et la plateforme ne sont pas fournies, déduisez-les du contenu et expliquez-le dans le résumé. Si le style n'est pas fourni, réservez-le pour l'étape des images de style où trois directions seront proposées.

Comment traiter les素材 : Si l'utilisateur a fourni un contenu spécifique et autorisé la génération AI, produisez en conséquence ; si l'utilisateur n'a pas fourni suffisamment de contenu spécifique, demandez les documents nécessaires, vous pouvez également effectuer des recherches en ligne sur le thème et conserver les sources. En présence d'un script de narration, extrayez d'abord les informations du script, ne demandez pas à l'utilisateur de les répéter. L'IA peut générer des illustrations, des scènes, des graphiques abstraits et des contenus示意 clairement marqués ; les fonctionnalités réelles du produit, les chiffres et les éléments de marque doivent toujours respecter les « règles de base » : ne pas utiliser d'informations fictives pour usurper un contenu réel. Les exigences concernant les logos de marque ou les captures d'écran de produits réels se trouvent dans references/stack.md.

  • L'utilisateur a fourni une vidéo de référence : exécutez d'abord inspect.mjs sheet <ref> --cells 30 pour une vue d'ensemble, inspect.mjs grid <ref> --strips pour mesurer les points de coupe et la grille rythmique sur laquelle ils tombent (candidats BPM, nombre de pas par segment, images consécutives de chaque transition), inspect.mjs heat <ref> pour voir où et à quel point les choses bougent dans chaque segment. Écrivez les mesures dans la section benchmark du brief. N'apprenez que la structure et les techniques, ne copiez pas les素材.
  • L'utilisateur a fourni un morceau : sans narration, exécutez d'abord audio.mjs beats <track> --out <slug>/audio/beats.json ; avec narration, les temps forts de la musique sont subordonnés au rythme de la narration.
  • Les produits, marques ou termes techniques qui doivent apparaître dans l'image, vérifiez-les d'abord si vous n'êtes pas sûr.

Après avoir complété, résumez le thème, la durée, le format d'image, les sources BGM/effets sonores, le mode de narration et l'état des素材, arrêtez-vous et attendez la confirmation de l'utilisateur avant d'écrire le brief. Même si la première requête contient toutes les informations, envoyez d'abord un résumé pour confirmation. Si l'utilisateur dit « faites de votre mieux », « surprenez-moi », « comme vous voulez », cela autorise la liberté créative mais ne dispense pas des informations obligatoires ou de la confirmation ; ne continuez que si l'utilisateur demande explicitement de sauter une confirmation, et enregistrez cette autorisation.

Mode de liberté : Conservez l'autonomie créative, ne respectez que les règles de base et le pipeline technique. Le style, la structure, les techniques peuvent être déterminés par vous-même, vous pouvez même ne pas utiliser la bibliothèque de styles. Rédigez toujours un brief, proposez trois directions, exécutez les deux confirmations selon les règles ci-dessus ; sauf si l'utilisateur a explicitement renoncé à une confirmation.

Étape 2 : brief.md

Trouvez d'abord des références : Avant d'écrire, choisissez 1 à 2 œuvres de référence pour ce film (ce thème + cette utilisation). Cela peut être un générique de film, une publicité, un jeu vidéo, une œuvre d'effets dynamiques, un courant de design. Écrivez dans le brief « quoi apprendre » (composition, rythme, grammaire de caméra, logique de couleur, structure musicale) et « quoi ne pas apprendre » (personnage, plan spécifique, mélodie, logo, fichier de police). Les références élèvent le plafond plus que n'importe quelle règle.

Ensuite, pensez à trois structures candidates : Par exemple, un voyage, une comparaison avant/après, un compte à rebours, une transformation, un plan-séquence. Décrivez chacune en 2–3 lignes, choisissez-en une et justifiez votre choix. La première idée qui vient est souvent un cliché de ce style.

Choisissez séparément l'utilisation et le style :

  • Utilisation (quoi filmer, selon quelle structure narrative) : consultez references/formats.md, lisez uniquement la section correspondante.
  • Style (à quoi ça ressemble, comment ça bouge, quel son) : consultez d'abord references/styles/INDEX.md, puis lisez uniquement les 1–2 fichiers de style sélectionnés. Vous pouvez utiliser un style directement, le modifier (remplacer une ou deux règles), le mélanger (un principal, un secondaire, ou changer de médium selon les segments), ou le personnaliser selon styles/_template.md. Les règles de style restent inchangées ; l'histoire, les plans et la structure viennent du thème de l'utilisateur, ne les reprenez pas d'un autre film. Chaque fichier de style a une section « signaux d'identité » et « version la plus clichée » : choisissez 2–3 signaux selon le thème (dont au moins un qui n'est pas dans les clichés), et écrivez dans le brief quels clichés ont été écartés et pourquoi, ou pourquoi ils sont conservés. Si l'utilisateur a choisi un style, il veut le reconnaître au premier coup d'œil ; deux ou trois signaux suffisent.
  • Consultez ensuite references/craft.md (bibliothèque de techniques) selon les besoins.

Rédigez le brief selon references/brief-template.md. L'essentiel est :

Reel Read:
  format: [utilisation, type dans formats.md]
  benchmark: [œuvre de référence · quoi apprendre · quoi ne pas apprendre]
  structure: [trois structures candidates → laquelle est choisie, pourquoi]
  style: [style(s) dans styles/ (avec points de modification), ou plan de mélange, ou règles personnalisées]
  signals: [quels 2–3 signaux d'identité choisis, pourquoi ; quels clichés écartés]
  takeaway: [une phrase ou une image que le spectateur doit retenir]
  hook: [ce qui se passe dans la première seconde]
  signature: [point de mémorisation : à quelle seconde, quelle technique]
  palette / type / motion / camera / texture: [valeurs spécifiques selon le style choisi]
  sound: [silencieux / synthèse (référence sonore, rythme, harmonie, orchestration, courbe, voir sound.md section 2) / morceau utilisateur (BPM, drop)]
  audio-sources: [BGM et effets sonores : AI / utilisateur / désactivé]
  narration: [aucune / script utilisateur TTS / enregistrement utilisateur ; avec narration, chemin du fichier de timestamps phrase par phrase, priorité vocale]
  forbidden: [liste des interdits pour ce film]

Ensuite, rédigez le storyboard : sans narration, conservez la grille rythmique + storyboard. Avec narration, associez les phrases aux plans et aux événements, indiquez plan / ID de phrase | changement à expliquer | état de début et de fin de l'objet | objets et espace hérités | événement clé et base de temps | plan et son. Un plan peut couvrir plusieurs phrases, une phrase peut contenir plusieurs actions ; ne considérez pas chaque phrase de la narration comme une instruction de coupe, et n'exigez pas que chaque phrase soit écrite en plein écran. Les intervalles réels seront remplis après la préparation audio ; n'utilisez pas l'estimation du nombre de mots comme base d'alignement finale. Pour les longs métrages, rédigez en plus un tableau des chapitres, la durée de chaque chapitre et les règles de cohérence entre chapitres.

Si l'utilisateur a seulement dit « faites de votre mieux », traduisez-le dans ces contraintes spécifiques ci-dessus, sinon le résultat sera aléatoire.

Étape 3 : Images de style (deuxième arrêt, attente de l'utilisateur)

Créez le projet : sh <skill>/scripts/scaffold.sh <slug> [--audio synth|tone|layer|file|none] (synth = synthèse niveau 1 ; ne copiez que le score sélectionné, file utilise la piste audio finale prête). Les valeurs par défaut du moteur du scaffold sont uniquement pour l'initialisation technique, elles ne remplacent pas la confirmation des besoins. Le starter sert uniquement à vérifier que le pipeline fonctionne ; l'image et le texte doivent être remplacés.

A. L'utilisateur a déjà défini le style (ou a fourni une référence claire) : Les secondes dans les commandes ci-dessous sont des exemples ; prenez les temps effectifs de l'ouverture, du point de mémorisation et de la fin de ce film ; pour les courts et longs métrages, ne copiez pas 14,5 secondes.

  1. Construisez avec du vrai code l'image du hook, l'image du point de mémorisation et l'image de fin, avec les couleurs, les polices et le texte définitifs.
  2. render.mjs <slug> --still 0.6,7.2,14.5 --sheet, regardez d'abord vous-même, corrigez les problèmes évidents avant de les montrer à l'utilisateur. Pour les mouvements, selon la direction, produisez en plus une maquette continue (voir ci-dessous, --start --duration).
  3. Envoyez à l'utilisateur le résumé du Reel Read, le résumé du storyboard et les images de style, et demandez « Est-ce que la direction est bonne ? ».

B. L'utilisateur n'a pas défini de style (y compris en mode liberté) : Proposez 3 directions différenciées, selon les règles de styles/INDEX.md :

  • A : adaptée au thème / à la marque ; B : un langage visuel différent (d'un autre groupe) ; C : audacieux (personnalisé, mélangé ou structurellement très audacieux ; au moins une direction n'est pas dans la bibliothèque existante).
  • Pour chaque direction, écrivez un mini Reel Read (style, référence, point de mémorisation, direction musicale, 3–5 lignes), et rendez avec du vrai code une image clé qui la représente le mieux. Les trois directions sont placées dans le même projet, en utilisant ?dir=a|b|c pour basculer. B et C ne servent que cette image clé, pas besoin de faire un film jouable complet.
  • render.mjs <slug> --directions a,b,c --at 14.5,2,0 rend les trois en une fois et les assemble en une image étiquetée qa/directions.png, envoyez-la à l'utilisateur, demandez « Laquelle choisissez-vous, ou comment les mélanger ? ».

Dans les deux cas, attendez vraiment la réponse de l'utilisateur avant de passer à la production. Pour les projets TTS, joignez également le plan de segmentation du script original de l'utilisateur et un court échantillon vocal (en utilisant uniquement le texte fourni par l'utilisateur) pour confirmer ensemble la direction sonore, sans ajouter de point d'arrêt obligatoire supplémentaire. Si l'utilisateur a explicitement dit qu'il ne voulait pas confirmer, choisissez vous-même, justifiez, vérifiez et continuez ; lors de la livraison, donnez également les directions non choisies (cas B : joignez qa/directions.png ; cas A : écrivez une ligne sur les deux autres directions possibles) pour que l'utilisateur puisse changer d'avis.

Pour les directions dépendant d'un mouvement continu, joignez en plus des images fixes une maquette de mouvement représentative de 6 à 10 secondes (pour les films de moins de 6 secondes, utilisez le film entier), couvrant un changement d'état et l'enchaînement avant/après ; vérifiez d'abord les trames continues pour exclure les sauts. La maquette est confirmée en même temps que les images de style, sans ajouter un troisième arrêt obligatoire. Si la narration n'est pas encore générée, marquez-la clairement comme une prévisualisation du mouvement, sans prétendre qu'elle est précisément alignée avec la voix.

Étape 4 : Production

Avant la production, lisez references/stack.md (contrat de la page, déterminisme, pièges de chaque technologie). Pour les techniques prêtes à l'emploi, consultez references/recipes.md.

Avec narration, verrouillez d'abord la timeline audio : Selon references/narration.md, synthétisez le script original de l'utilisateur ou importez son enregistrement, obtenez la durée réelle et les timestamps phrase par phrase, puis organisez les images. Pour un enregistrement utilisateur, obtenez le texte et les timings via un outil de transcription disponible ou un fichier SRT/JSON fourni par l'utilisateur ; sans timestamps fiables, ne prétendez pas avoir effectué un alignement phrase par phrase. Si un conflit de durée est détecté, confirmez d'abord, ne remplissez pas, ne coupez pas et ne modifiez pas la vitesse en silence. Importez les intervalles réels dans le tableau des plans, conservez les pauses et les points importants de la narration, ne forcez pas l'alignement sur les mesures musicales. Au-delà de 2 minutes, produisez par chapitres selon references/long-form.md, conservez le cache des chapitres.

Les phrases ne fournissent qu'une plage de synchronisation ; les plans et les mouvements du sujet peuvent se poursuivre sans heurt à travers plusieurs phrases. Lorsqu'une synchronisation mot par mot est nécessaire pour un changement clé, utilisez les temps réels des mots ou des points d'ancrage annotés manuellement, en interrogeant via narration.js, pour que l'image et les effets sonores référencent le même événement ; avec seulement un timing phrase par phrase, maintenez la synchronisation au niveau de la phrase, ne créez pas de points temporels mot par mot. Pendant la production, utilisez preview.mjs avec lecture audio pour vérifier par glissement et image par image ; la prévisualisation ne pilote que le même render(t), elle n'entre pas dans le rendu final.

  1. Écrivez tous les points temporels dans timeline.js, la page et le score.mjs les importent tous depuis ce fichier. Écrivez le tableau des plans dans SHOTS (à la validation, les mouvements seront rapportés plan par plan), les arrêts délibérés dans HOLDS (par exemple, la fin [[b(36), DUR]]), les temps forts qui nécessitent une respiration dans DROPS ; les outils de validation les liront. Pour les transitions sur le temps, utilisez revealOn(temps_fort, durée_transition, point_d_ouverture) pour calculer le point de départ, afin que la première image du nouveau plan tombe sur le temps fort.
  2. Travaillez plan par plan. Rendez 3 images fixes pour chaque plan : début, milieu, fin ; pour les changements d'état clés et les jonctions de plans, regardez en plus une maquette continue pour vérifier que le sujet n'est pas réinitialisé, que la vitesse du mouvement ne change pas soudainement, que la caméra n'est pas interrompue. Une belle image fixe ne remplace pas le contrôle du mouvement ; pour les mouvements rapides, utilisez inspect.mjs strip pour voir les trames continues.
  3. Exécutez la vérification de déterminisme render.mjs <slug> --determinism ; si elle échoue, corrigez d'abord.
  4. Pour les films de 30 secondes ou plus, ou ceux qui sont lents à rendre, produisez d'abord une maquette basse résolution : --size 960x540 --out out/proxy.mp4.
  5. Produisez le film final : définissez d'abord FPS, SIZE, AUDIO, LOOP en haut de build.sh selon le brief, puis exécutez sh <slug>/build.sh. Il construira la musique, exécutera d'abord la vérification de déterminisme (pas de sortie si elle échoue), puis rendra, puis exécutera la vérification du cadrage du texte (produit uniquement des documents de révision, ne bloque pas la construction), et enfin exécutera la vérification technique avec les mêmes spécifications (la durée provient de DUR dans timeline.js). Ajoutez --subframes, --dpr, --grain comme paramètres supplémentaires, selon les besoins du style. Ces paramètres augmentent considérablement le temps de calcul ; avant de lancer le rendu, estimez le temps et informez-en.

Pour le mixage de pistes audio, utilisez AUDIO=file AUDIO_FILE=audio/final.wav sh build.sh ; les anciennes méthodes de construction synth/tone/layer/none restent disponibles. Pour les longs métrages, utilisez build-long.mjs pour une construction persistante par chapitres, voir references/long-form.md.

Règles strictes :

  • L'image est uniquement déterminée par t : n'utilisez pas Math.random, Date.now, rAF, minuteurs, animations CSS ; ne conservez pas d'état entre les images.
  • Attendez que toutes les polices et ressources soient chargées, puis définissez READY = true ; les polices doivent être auto-hébergées dans le projet.
  • La mise en page doit être dérivée de la largeur et de la hauteur retournées par stageSize(), ne la fixez pas en dur.

Étape 5 : BGM, effets sonores et mixage

Consultez references/sound.md. Le BGM et les effets sonores sont produits selon les sources confirmées, permettant des combinaisons comme musique utilisateur + effets AI. Le tableau ci-dessous présente les choix de moteur pour la synthèse AI ; les valeurs par défaut du moteur ne peuvent pas remplacer les sources déjà confirmées. La direction sonore (référence, rythme, harmonie, orchestration, courbe) est déterminée dans le brief :

NiveauUtilisationAdapté à
Niveau 1 · Synthèse intégréescore.mjs, synthétiseur dans Node (batterie, tambour, basse, nappe, pincement, marimba / glockenspiel / kalimba, orgue, nappe vocale, FM, bruit ambiant, effets sonores, sidechain, réverb, lo-fi), zéro dépendanceÉlectronique, UI, musique chip, ambiance, lo-fi, fait main et jouet, la plupart des films d'effets
Niveau 2 · Tone.jsscore.tone.js, rendu hors ligne dans un navigateur headless avec Tone.js : instruments samplés (audio.mjs samples salamander pour télécharger le piano CC BY), réverb à convolution, synthétiseurs et effets plus richesStyles nécessitant des instruments réels, une spatialisation, une ambiance cinématographique
Morceau externeMusique fournie par l'utilisateur (la sienne, sous licence, générée par un service de musique AI)L'utilisateur a déjà la musique
  • Construction : audio.mjs build <slug>/score.mjs ou score.tone.js, produisent tous deux audio/music.wav à −14 LUFS.
  • Morceau utilisateur : sans narration, exécutez d'abord audio.mjs beats (utilise automatiquement librosa s'il est disponible) pour aligner la timeline, puis superposez les effets sonores dans le score avec S.load(). Avec narration, les temps forts de la musique ne sont qu'une référence ; ajustez la musique et les effets pour accompagner la voix, ne déplacez pas la timeline de narration déjà confirmée.
  • Silencieux : passez si BGM, effets sonores et narration sont tous désactivés ; désactiver seulement le BGM ne signifie pas que le film est entièrement silencieux.
  • Avec narration : la musique réduit la mélodie principale, les percussions denses et les grandes dynamiques ; les effets sonores ne conservent que les actions informatives, évitent les mots-clés et les débuts de phrase. Conservez des pistes séparées, utilisez narration.mjs mix pour la réduction pendant la voix, l'uniformisation de la puissance et le traitement des crêtes. Utilisez les timestamps réels des phrases pour vérifier l'image, mais l'écoute nécessite toujours la validation finale de l'utilisateur.

Après chaque construction, exécutez audio.mjs check sur le mix final, regardez les valeurs et les graphiques ; si l'hôte le permet, écoutez également, ne déclarez pas « l'écoute a été confirmée » simplement parce que les valeurs numériques sont bonnes. Si DROPS est défini dans timeline.js, il vérifiera également la dépression et la remontée avant le temps fort ; s'il n'y a pas de respiration, il émet un WARN.

Étape 6 : Validation

Vérification technique : Déterminée par le programme, si elle échoue, la livraison est impossible.

node <skill>/scripts/inspect.mjs qa <slug>/out/final.mp4 --out <slug>/qa/final \
  --expect-size 1920x1080 --expect-fps 30 --expect-duration 16 --audio required   # Pour un film silencieux, utilisez --audio none ; pour une boucle, ajoutez --loop

Elle vérifie si le fichier peut être décodé, la taille, le frame rate, la durée, le nombre d'images, la piste audio, les images noires, le volume, le vrai pic, et la couture de boucle (si nécessaire). Si un seul élément échoue (FAIL), le code de sortie est 1, et il faut corriger. Les spécifications non transmises sont listées comme NOT CHECKED, ce qui ne constitue pas une validation réussie. build.sh transmet automatiquement les spécifications. L'outil de rendu refusera également de publier un fichier avec un nombre d'images incorrect.

Révision : Destinée au jugement humain, pas à une décision programmatique. Regardez les images clés, les images clés au format mobile, les segments figés (ceux déclarés dans HOLDS seront marqués comme arrêts délibérés, les autres sont à évaluer s'il s'agit de temps morts), les points de coupe, les mouvements et les images flash plan par plan, les images de marquage du cadrage du texte (qa/text-*.png), les graphiques audio. Selon la grille de révision de references/review.md, notez les observations et les 3 problèmes les plus graves pour chaque élément. Pour les films contenant des chiffres et des graphiques, vérifiez le contenu et la cohérence des chiffres. Après correction, ne refaites que le segment problématique, puis produisez le film complet. Enregistrez le processus dans qa/review_log.md. Si l'hôte prend en charge les sous-agents, envoyez un agent qui n'a pas participé à la production pour examiner uniquement ces documents et identifier les problèmes (voir review.md section « Révision indépendante »).

Avec narration, exécutez en plus narration.mjs check pour vérifier la couverture temporelle des phrases, la longueur audio par rapport aux spécifications confirmées ; examinez phrase par phrase la cohérence entre le script original, l'image et la voix. Les vérifications automatiques ne remplacent pas la révision à l'écoute. Pour les longs métrages, révisez chapitre par chapitre et vérifiez l'image, le son et la timeline aux points de jonction.

Les conclusions de la révision sont une référence pour l'utilisateur, elles ne remplacent pas le visionnage par l'utilisateur lui-même. Les éléments non applicables sont marqués « non applicable », par exemple la synchronisation audio-vidéo pour une œuvre silencieuse ; ne donnez pas de note forcée.

Étape 7 : Livraison

Informez l'utilisateur :

  • Les chemins de out/final.mp4 et out/poster.png (poster : render.mjs <slug> --poster <t>).
  • brief.md : invite structurée complète, enregistrement des deux confirmations, réutilisable, sans identifiants API.
  • Avec narration, joignez le script original de l'utilisateur, la timeline phrase par phrase et les sources de chaque piste ; pour les longs métrages, joignez le manifeste des chapitres et les commandes de reconstruction à partir d'un point de reprise.
  • Résultats de la vérification technique (tout PASS), problèmes non résolus dans le journal de révision, temps de rendu.
  • Comment reconstruire (sh build.sh), comment modifier un seul segment.
  • Sources et licences des ressources tierces (polices, ressources utilisateur, morceaux) ; rappelez à l'utilisateur de revérifier les contenus factuels.

Les conclusions de la révision et les preuves de vérification sont sauvegardées dans qa/review_log.md du projet, et livrées avec les fichiers de production.


Règles de base (à respecter pour tous les styles)

  1. Besoins et script : Les informations obligatoires sont confirmées ; la vidéo ne dépasse pas 20 minutes ; le script TTS doit provenir de l'utilisateur. Les conflits de durée doivent être confirmés, ne modifiez pas, ne coupez pas et ne changez pas la vitesse du script sans autorisation.
  2. Exactitude factuelle : Les fonctionnalités, chiffres et noms des produits proviennent uniquement de l'utilisateur ou de sources fiables ; en cas de doute, signalez-le.
  3. Lisibilité du texte : La taille de la police doit être lisible sur un écran de téléphone, le temps d'affichage doit être suffisant pour la lecture (voir craft.md section 7) ; le texte ne doit pas déborder, se chevaucher ou être masqué.
  4. Ressources sous licence : Les logos, captures d'écran, polices, morceaux doivent être utilisables, et listés lors de la livraison.
  5. Correction technique : Rendu déterministe, vérification technique 100% réussie, pas d'images noires, la fin ne doit pas être brutale (arrêt sur image ou boucle sans couture).
  6. Cohérence du style : Les règles de style choisies sont respectées du début à la fin, ne tombez pas dans la liste des interdits du brief.

Au-delà de cela, l'amplitude des mouvements de la caméra, l'utilisation de ressorts, la densité des effets sonores, la vitesse du rythme sont déterminés par le style et le contenu (voir references/styles/ et craft.md).


Aide-mémoire des outils (S=<skill>/scripts)

ObjectifCommande
Installer dépendances / vérifier l'environnement / auto-testsh $S/setup.sh · node $S/check-env.mjs · cd $S && npm test
Créer un projet`sh $S/scaffold.sh [--audio synth
Image fixe + montagenode $S/render.mjs <slug> --still 0.5,3,7.2 --sheet · --range 0:15:1 --sheet
Trois directions / couverturenode $S/render.mjs <slug> --directions a,b,c --at 14.5,2,0 → qa/directions.png · --poster 14.5 → out/poster.png
Déterminismenode $S/render.mjs <slug> --determinism
Cadrage du texte (documents de révision)`node $S/render.mjs --text-check [--safe auto
Analyser une vidéo de référencenode $S/inspect.mjs grid <ref> --strips (points de coupe + grille rythmique + trames de transition) · heat <ref> (carte de chaleur des mouvements par segment)
Maquette / film final / segment--size 960x540 --out out/proxy.mp4 · Film final sh <slug>/build.sh --subframes 2 --grain 4 (spécifications en haut de build.sh) · --start 6 --duration 3 --out out/seg.mp4
Sonnode $S/audio.mjs build <slug>/score.mjs (ou score.tone.js) · samples salamander · beats <track> --out audio/beats.json · check audio/music.wav (lit DROPS)
Narration / mix finalnode $S/narration.mjs tts … · import … · mix … · check … (paramètres dans narration.md)
Reconstruction de longs métragesnode $S/build-long.mjs <slug>/chapters.json (paramètres dans long-form.md)
Prévisualisation avec sonnode $S/preview.mjs <slug> --size 1920x1080 --fps 30 (peut ajouter --audio audio/final.wav ; utilisation dans stack.md)
Validation et documents de révisionnode $S/inspect.mjs qa out/final.mp4 --expect-… (build.sh le fait automatiquement) · sheet · phone · strip --at 4.2 · loop · motion (lit SHOTS / HOLDS : mouvement, saut, image flash par plan)

Fichiers de référence (à lire selon les besoins)

FichierQuand le lire
references/formats.mdÉtape 2 : utilisation, par exemple vidéo promotionnelle, portfolio, animation UI, calage typographique, logo, point de données, composition sur fond vert
references/styles/INDEX.mdÉtape 2 : catalogue des 43 styles, règle des trois directions, règles de mélange ; lisez ensuite uniquement le styles/<slug>.md sélectionné. Pour la personnalisation, utilisez styles/_template.md
references/craft.mdÉtape 2 et 4 : rythme, mouvement, transition, caméra, typographie, couleur, texture, point de mémorisation, liste des saveurs par défaut
references/brief-template.mdLors de la rédaction du brief
references/stack.mdÉtape 4 : contrat de la page, déterminisme, pièges de chaque technologie, polices, ressources, formats multiples, performances
references/recipes.mdQuand vous avez besoin d'une technique prête à l'emploi
references/sound.mdÉtape 2 (section 2 : direction sonore) et étape 5
references/review.mdÉtape 6 : explication de la vérification technique, grille de révision, révision indépendante, problèmes courants, liste de livraison
references/narration.mdLors du choix du TTS, de la narration utilisateur, du mixage BGM/effets sonores indépendants
references/long-form.mdAu-delà de 2 minutes : planification des chapitres, cache persistant, audio segmenté et reconstruction à partir d'un point de reprise

Skills associés