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 script | Utilisez 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 obligatoire | Ce qu'il faut clarifier |
|---|---|
| Sujet principal, contenu à produire | Quoi présenter, quels éléments doivent apparaître |
| Durée | Secondes 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 BGM | Synthèse AI / fournie par l'utilisateur ; l'utilisateur peut aussi la désactiver explicitement |
| Source effets sonores | Synthèse AI / fournie par l'utilisateur ; choix séparé du BGM, peut aussi être désactivé |
| Mode narration | Aucune / 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 30pour une vue d'ensemble,inspect.mjs grid <ref> --stripspour 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 selonstyles/_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.
- 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.
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).- 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|cpour 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,0rend les trois en une fois et les assemble en une image étiquetéeqa/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.
- Écrivez tous les points temporels dans
timeline.js, la page et lescore.mjsles importent tous depuis ce fichier. Écrivez le tableau des plans dansSHOTS(à la validation, les mouvements seront rapportés plan par plan), les arrêts délibérés dansHOLDS(par exemple, la fin[[b(36), DUR]]), les temps forts qui nécessitent une respiration dansDROPS; les outils de validation les liront. Pour les transitions sur le temps, utilisezrevealOn(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. - 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 strippour voir les trames continues. - Exécutez la vérification de déterminisme
render.mjs <slug> --determinism; si elle échoue, corrigez d'abord. - 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. - Produisez le film final : définissez d'abord
FPS,SIZE,AUDIO,LOOPen haut debuild.shselon le brief, puis exécutezsh <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 deDURdanstimeline.js). Ajoutez--subframes,--dpr,--graincomme 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 :
| Niveau | Utilisation | Adapté à |
|---|---|---|
| Niveau 1 · Synthèse intégrée | score.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.js | score.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 riches | Styles nécessitant des instruments réels, une spatialisation, une ambiance cinématographique |
| Morceau externe | Musique 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.mjsouscore.tone.js, produisent tous deuxaudio/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 avecS.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 mixpour 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.mp4etout/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)
- 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.
- 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.
- 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é.
- Ressources sous licence : Les logos, captures d'écran, polices, morceaux doivent être utilisables, et listés lors de la livraison.
- 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).
- 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)
| Objectif | Commande |
|---|---|
| Installer dépendances / vérifier l'environnement / auto-test | sh $S/setup.sh · node $S/check-env.mjs · cd $S && npm test |
| Créer un projet | `sh $S/scaffold.sh [--audio synth |
| Image fixe + montage | node $S/render.mjs <slug> --still 0.5,3,7.2 --sheet · --range 0:15:1 --sheet |
| Trois directions / couverture | node $S/render.mjs <slug> --directions a,b,c --at 14.5,2,0 → qa/directions.png · --poster 14.5 → out/poster.png |
| Déterminisme | node $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érence | node $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 |
| Son | node $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 final | node $S/narration.mjs tts … · import … · mix … · check … (paramètres dans narration.md) |
| Reconstruction de longs métrages | node $S/build-long.mjs <slug>/chapters.json (paramètres dans long-form.md) |
| Prévisualisation avec son | node $S/preview.mjs <slug> --size 1920x1080 --fps 30 (peut ajouter --audio audio/final.wav ; utilisation dans stack.md) |
| Validation et documents de révision | node $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)
| Fichier | Quand 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.md | Lors 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.md | Quand 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.md | Lors du choix du TTS, de la narration utilisateur, du mixage BGM/effets sonores indépendants |
references/long-form.md | Au-delà de 2 minutes : planification des chapitres, cache persistant, audio segmenté et reconstruction à partir d'un point de reprise |