stanglivideo

---

name: stanglivideo description: Créez des vidéos de motion design en code avec Remotion, coupées au rythme de la musique avec des effets sonores qui tombent sur l'image. À utiliser lorsque quelqu'un demande une promo, un film de lancement, une vidéo produit, une vidéo explicative, un contenu social, une boucle de page d'accueil ou toute « vidéo de motion design », pour un produit ou non. Il vérifie la machine, étudie 2 à 5 vidéos que l'utilisateur apprécie (images, spectrogramme, volume), s'arrête pour l'approbation de l'utilisateur sur le style, les affirmations, la musique et le storyboard, construit à partir du design du produit lui-même, note le film hors ligne et ne le considère pas comme terminé tant que les contrôles de synchronisation, de volume sonore et d'image ne sont pas passés. Modes optionnels : réétudier les galeries de référence pour de nouvelles entrées, et générer des photos ou des boucles de séquences avec Gemini lorsque le code ne peut pas les dessiner.

Que fait stanglivideo ?

Un film qui ressemble au produit qui l'a créé, qui bouge sur le rythme et qui sonne juste : chaque son sur son image, chaque mot à l'écran assez longtemps pour être lu, rien en dehors du cadre. Construit en Remotion à partir du code, donc reste modifiable.

Les chemins ci-dessous sont relatifs au dossier de cette compétence, sauf s'ils commencent par un chemin de projet de film. $PY est le python que le docteur imprime (le .venv de la compétence).

Chaque exécution commence ici

1. Docteur. Première exécution (pas de .venv ou pas de taste.md dans ce dossier) : node scripts/doctor.mjs --setup. Il crée .venv, installe requirements.txt et crée taste.md à partir de taste.example.md. Exécutions ultérieures : node scripts/doctor.mjs. Il vérifie Node 18+, Python 3.10+ avec numpy et scipy, un ffmpeg complet, et la compétence compagnon. Si Node lui-même manque, le docteur ne peut pas s'exécuter : dites-le et donnez la ligne d'installation ci-dessous.

2. Dites clairement à l'utilisateur ce qui manque. Pour chaque ÉCHEC, une ligne courte : ce qui manque, pourquoi la compétence en a besoin, et la commande exacte pour le corriger sur son système. Arrêtez-vous ensuite jusqu'à ce qu'ils disent que c'est fait, puis relancez le docteur.

   Manquant	Pourquoi	Windows	Mac
   Node 18+	construit et rend le film	winget install --id OpenJS.NodeJS.LTS -e	brew install node
   Python 3.10 à 3.13	note le son et exécute les vérifications	winget install --id Python.Python.3.12 -e	brew install [email protected]
   ffmpeg (version complète)	analyse, encodage, vérifications du volume sonore	winget install --id Gyan.FFmpeg -e	brew install ffmpeg
   compétence compagnon	règles de l'API Remotion	npx skills add remotion-dev/skills	identique

   Après avoir installé Node, Python ou ffmpeg, l'utilisateur doit ouvrir un nouveau terminal pour qu'ils soient dans le PATH, puis exécuter node scripts/doctor.mjs --setup à nouveau. GEMINI_API_KEY est optionnel : ne le mentionnez que lorsqu'une image ou une boucle générée est réellement souhaitée.

3. Compétence compagnon (obligatoire). remotion-best-practices, les compétences officielles de Remotion. Non inclus ici. Utilisez-la pour les questions sur l'API Remotion (médias, polices, sous-titres, options de rendu).

4. Goût. Lisez references/base-rules.md et taste.md (créez-le à partir de taste.example.md s'il manque encore). Ce sont les règles permanentes de l'utilisateur ; taste.md l'emporte en cas de conflit.

Non-négociable

• Leur design gagne. Les couleurs, la typographie, les composants, le logo, la voix et les affirmations proviennent du produit. N'introduisez jamais le goût d'un autre produit, y compris quoi que ce soit dans cette compétence que leur design contredit.
• Chaque image est une fonction pure du temps. Pas de transitions CSS ni d'images clés, pas de minuteurs, pas de Date.now(), pas de Math.random (rand avec graine), pas d'état transmis entre les images.
• Une seule source de timing. Le cues.json de chaque film dans src/films/<film>/ contient tous les temps de repère. Le TSX du film l'importe et la partition le lit (sound/cues.py). Aucun des deux ne contient jamais un temps littéral.
• Mesurez, ne devinez jamais. Les battements à partir de l'audio, les positions à partir de la superposition de débogage, les couleurs à partir des pixels décodés.
• Affirmations honnêtes. Montrez uniquement ce que le produit fait. La liste des éléments interdits est approuvée par l'utilisateur avant d'écrire le texte.
• Demandez d'abord avant de valider, pousser ou publier quoi que ce soit, et avant chaque appel API payant.
• Pas de tirets cadratin ou demi-cadratin dans aucun texte, fichier ou message.

Flux de travail et points d'approbation

Chaque ARRÊT est un point dur : demandez (AskUserQuestion), attendez et enregistrez la réponse dans le BRAND.md du projet.

1. Collecte d'informations (obligatoire). Demandez 2 à 5 vidéos que l'utilisateur aime, une ligne chacune sur ce qu'il aime, y compris le son. Exécutez node scripts/intake/intake.mjs <project>/intake <videos...> et lisez chaque feuille. Voir references/intake.md.
2. Découverte. Apprenez le produit : fichiers de règles, jetons (clair et sombre), composants, logo, page d'accueil, captures et textes réels, affirmations. Voir references/discovery.md.
3. Entretien. Le brief et les ingrédients. Voir references/interview.md. Ensuite :
   • ARRÊT : clair ou sombre. Par film lorsqu'il y en a plusieurs ; un ensemble mélange les deux si le produit a les deux thèmes.
   • ARRÊT : affirmations interdites. Montrez ce que les films revendiqueront et la liste de ce qu'ils ne doivent jamais dire (à partir du code, du site et de l'utilisateur). Attendez l'approbation des deux listes.
4. Kit de marque. Remplissez templates/BRAND.md dans le projet. Chaque règle cite sa source.
5. Musique. Examinez et mesurez les candidates. ARRÊT : choix de la musique. Voir references/music.md.
6. Histoire. Remplissez templates/film-prompt.md ; écrivez le plan des battements comme cues.json. Voir references/story.md et references/ingredients.md.
7. Projet. node scripts/new-project.mjs <dir>, npm install. Un kit dans src/kit/ ; un dossier par film. Voir references/engine.md.
8. Storyboard. Construisez les scènes, rendez 5 à 8 plans par film (dans le projet : node scripts/stills.mjs), assemblez-les en mosaïque. ARRÊT : approbation du storyboard avant tout rendu complet. Voir references/review.md.
9. Rendu. Dans le projet : node scripts/render.mjs <Composition> out/<film>.mp4 (sécurité intégrée). Feuille de contact, vérification, correction.
10. Partition. Dans le projet : sound/scores/<film>.py à partir de cues.json ; $PY sound/render.py <film>. Voir references/sound-rules.md.
11. Contrôle qualité (obligatoire). Dans le projet : $PY scripts/gate.py <film>. Rien n'est considéré comme terminé tant qu'il n'a pas passé. Voir references/render.md.
12. Livraison. Chemins, durées, volume sonore, pic, résultat du contrôle qualité, ce qui a changé. Conservez chaque version.

Le contrôle de synchronisation

• Les whoosh sont placés par leur pic sur l'image la plus rapide du mouvement (align="peak" ; kit/speed.ts trouve l'image la plus rapide d'un mouvement de caméra ; une entrée E.out est la plus rapide à son début, une sortie E.exit à sa fin).
• Les pops atterrissent sur l'image où l'élément atterrit. Les chings sur l'image où le nombre final apparaît.
• Les crescendos se terminent sur le temps fort (align="end").
• Chaque son porte une étiquette indiquant son événement à l'écran.
• Après chaque mixage : sound/check.py (pas de son avant son changement d'image), scripts/final-check.py (-14 LUFS à moins de 1 LU, pic vrai -2 dBFS ou moins, plage de volume sonore 4 LU ou plus, pas de silence, image identique au rendu silencieux, durées égales) et scripts/verify.py, tous exécutés par scripts/gate.py. Un drapeau est corrigé en déplaçant le son (ou le repère), jamais en l'exemptant sans regarder sa feuille.

Mémoire du goût

• references/base-rules.md est livré avec la compétence : des corrections provenant de vrais films, sous forme de règles générales.
• taste.md (ignoré par git, à partir de taste.example.md) est celui de cette machine. Chaque nouvelle correction donnée par l'utilisateur y est écrite comme règle générale avant que vous ne corrigiez le film, formulée de manière à avoir évité le problème dans n'importe quel film. Lisez-le au début de chaque exécution.
• Une règle qui s'applique à plusieurs films peut être promue dans base-rules.md via une pull request vers cette compétence, jamais par une modification silencieuse.

Sécurité (intégrée dans les scripts)

templates/project/scripts/safety.mjs, utilisé par chaque bundle et rendu : l'espace disque libre est vérifié en premier (10 Go minimum), au plus deux rendus s'exécutent à la fois, les bundles temporaires sont supprimés après chaque tâche et les bundles obsolètes avant. Rendu avec une concurrence de 1 sur une machine à faible mémoire. N'arrêtez que les processus que vous avez démarrés.

Modes optionnels

• Médias générés. Uniquement pour ce que le code ne peut pas dessiner : vraies photos, textures photographiques, découpes et arrière-plans filmés (soie, liquide, lumière) lorsque l'utilisateur souhaite un aspect réel filmé. scripts/gemini/image.mjs prend des images de référence pour que les sorties correspondent à un look choisi, plus le format, la taille, le redimensionnement et l'incrustation couleur ; scripts/gemini/video.mjs crée des clips Veo à partir d'une première image assortie à la palette (ou des boucles natives). Clé à partir de GEMINI_API_KEY dans l'environnement uniquement ; chaque appel imprime son coût et ne s'exécute qu'après l'accord de l'utilisateur. Voir references/gemini.md.
• Outils médias (gratuits, n'importe quel clip). scripts/media/loop.py transforme un clip en boucle d'arrière-plan sans couture (recherche de jointure, dissolution exacte, interpolation au taux d'images du film, boucle plus affiche plus séquence d'images plus feuille de limites) ; LoopBackground dans le kit le place sous la couche de mouvement à partir du cues.json du film. scripts/media/clip.py sonde, ré-encode au format du projet, rogne les bords et extrait des images fixes ou une feuille. scripts/media/imgpost.py incruste et redimensionne les images.
• Actualisation. Lorsque l'utilisateur le demande : réétudier prompt-motion.com, skillry.dev et le dépôt awesome-opus5-5-videos pour de nouvelles entrées et proposer des mises à jour des références par PR. Voir references/refresh.md.

Niveau de qualité (toujours)

• Uniquement les propres surfaces, couleurs, bordures et nuances du produit. Pas de panneaux ou de teintes inventés.
• Lisible à la taille de livraison. Moins de mots est préférable à des mots plus petits. Les lignes que les gens doivent lire apparaissent à environ 0,2 s par mot et restent affichées 2 s ou plus.
• Chaque carte et la marque de fin, entièrement à l'intérieur du cadre pour chaque image de chaque mouvement.
• Maintenez chaque plan 5 à 6 s avec une légère poussée lente ; lorsque cela semble chargé, coupez un écran au lieu d'accélérer.
• Le texte n'est jamais recouvert par un curseur ou une puce, ne croise jamais d'autre texte, ne se recentre jamais pendant sa construction.
• Quelque chose se produit sur chaque temps fort ; les limites des scènes atterrissent sur les barres ; la dernière image d'une boucle est égale à la première.
• Dans un ensemble, deux films ne partagent jamais la même structure ; tout ce qui est conservé côte à côte est centré exactement.
• Aucun effet que le langage du produit n'utilise pas : lueurs, particules, anneaux de clic, assouplissement rebondissant, shaders.

Connaissances

• references/method.md : comment les films forts en code sont construits, moteurs, règles de métier.
• references/prompt-lessons.md : comment les meilleures instructions sont écrites.
• references/sound-rules.md : règles sonores mesurées et règles de correction de synchronisation.
• references/pitfalls.md : échecs et correctifs de disque, mémoire, rendu, code et son.
• references/reference-videos.md : vidéos de référence et ce que chacune enseigne.
• references/base-rules.md : le goût fourni.

Pièges qui coûtent du temps réel

• Les images fixes Remotion ne transmettent pas les journaux de la console : imprimez les mesures dans l'image (kit/debug.tsx).
• npx remotion still re-compresse à chaque appel : utilisez scripts/stills.mjs (un bundle, plusieurs images).
• Le ffmpeg groupé de Remotion n'a pas tmix, select ou tile : utilisez le ffmpeg système vérifié par le docteur.
• Gamme de couleurs : décodez l'image 0 de chaque livrable et vérifiez-la (verify.py --bg) ; un master à gamme limitée lu en gamme complète éclaircit les arrière-plans foncés en gris.
• interpolateColors ne peut pas analyser color-mix() : hex pour tout ce qui s'anime.
• Les composants d'image asynchrones peuvent rendre une image vide : utilisez <Img> de Remotion.
• Un index calculé à partir du temps est -1 juste avant sa section : serrez-le (safeIndex).
• will-change sur tout ce que la caméra redimensionne brouille son texte.
• Un masque de dévoilement de mot coupe les dernières lettres sans rembourrage : utilisez WordReveal de kit/components.tsx.
• Le décodage vidéo dans les rendus n'est pas fiable : convertissez les boucles en séquences d'images.