twodorz/motion-studio

Motion Studio

Créez des courts-métrages (généralement 9:16 1080×1920 reels, aussi 16:9 / 1:1 / 4:5) entièrement en code.

• Image. Une page HTML (comp.html) dont window.renderAt(t) dessine l'image exacte pour le temps t.
• Capture. Chromium sans tête capture chaque image ; ffmpeg les encode.
• Son. Synthétisé en Python à partir de la même timeline : musique, effets sonores et ambiance, masterisé à −14 LUFS.
• 3D (optionnel). Les plans proviennent d'un petit path traceur GPU (pt.js), avec lumière douce, réflexions réelles, profondeur de champ et flou de mouvement.

Tout ce qu'un spectateur voit est une fonction pure de t. C'est ce qui rend les rendus reproductibles, navigables et interrompables.

Si la demande consiste à éditer, sous-titrer, compresser ou corriger les couleurs d'une vidéo existante, ou à créer des diapositives ou une animation de site web, dites que ce skill n'est pas l'outil approprié et aidez directement. Une promo montée à partir de métrage fourni (un événement, un DJ, une fête de l'année dernière) EST dans le périmètre : utilisez templates/footage/ et references/footage-promos.md.

Contenu de ce skill

Chemin	Description	Quand le lire
references/setup.md	Installation unique du studio (Node, ffmpeg, Playwright, venv Python, vérification GPU)	Première utilisation sur une machine
references/render-pipeline.md	Le contrat de rendu, modes de render.mjs, rendus par morceaux, pièges ffmpeg, déterminisme, planches contact	Lors de la construction ou du rendu d'un film
references/design-rules.md	Storytelling, mise en page, typographie, règles de mouvement et de transition apprises des retours clients réels ; audits	Avant le storyboard et avant chaque relecture
references/sound.md	Partition + design sonore pilotés par les événements, cibles de mixage, mesures, finition du volume sonore	Lors du travail audio
references/path-tracer-3d.md	Le path traceur 3D : décors, matériaux, lumières, modélisation produit aux dimensions exactes, caméras, match cuts, coûts	Seulement quand le film nécessite des scènes 3D
references/claims-and-sources.md	Obtenir les faits corrects : sources officielles, CLAIMS.md, ce qu'il ne faut jamais revendiquer, capture sécurisée de sites web	Tout film avec des faits produit, prix, spécifications ou une marque cliente
references/footage-promos.md	Promos d'événements / clubs / artistes montées à partir de métrage fourni : ce que les clients ont demandé, musique sur grille de beats, transitions DJ, cadrage des visages, techniques graphiques	Toute promo construite à partir de métrage réel
templates/film/	Un reel 2D complet et fonctionnel (15 s, typo cinétique, fiche produit, compteur, graphique, CTA) + scripts de rendu, son et finition	Démarrer chaque film 2D à partir d'ici
templates/film-3d/	Le path traceur + décors d'exemple (studio, salon, maison) + un film 3D fonctionnel et des outils de développement visuel	Démarrer un film 3D à partir d'ici
templates/footage/	Pipeline de promo de métrage : plan de tournage sur la grille de beats (coupures, grilles, splits, bandes, rampes, iris), cadrage des visages, BPM / phase de kick / drops mesurés, transitions DJ, une trousse à outils graphiques (masques de texte, texte derrière les personnes, tickers, centrage optique) + un exemple	Démarrer chaque promo de métrage à partir d'ici
scripts/setup_studio.ps1 / .sh	Crée un dossier studio et installe tout (demande avant de télécharger)	Première utilisation
scripts/new_film.mjs	Copie un modèle dans <studio>/films/<name>	Chaque nouveau film

Le flux de travail

Suivez ces étapes dans l'ordre. Chacune existe parce que l'avoir sautée a coûté une révision à un client.

1. Brief.
   • Obtenez la durée, le(s) format(s), les fps (30 par défaut ; 25 pour les éditeurs PAL), la langue, le CTA et où le film sera posté.
   • Demandez les fichiers de la marque (logo SVG/PNG, polices, couleurs, posts existants). Sans eux, lisez la marque depuis leur site.
   • Si la personne dit « fais tout », confirmez quand même tout ce qui modifie le produit ou les affirmations. Le rythme et le style sont à votre discrétion.
2. Recherche et faits (references/claims-and-sources.md).
   • Collectez chaque chiffre et affirmation à partir de sources officielles dans CLAIMS.md avant d'écrire quelque copie que ce soit.
   • Quand deux sources sont en conflit, laissez le chiffre de côté et dites-le. Une spécification erronée dans une publicité est pire qu'aucune spécification.
3. Storyboard sur une grille de beats.
   • Choisissez un BPM pour que la durée soit un nombre entier de temps (ex. 30 s = 48 temps à 96 BPM ; 15 s = 30 temps à 120 BPM).
   • Placez chaque changement de scène, légende et événement sonore sur cette grille (bar(n, beat) / bt(b)).
   • Écrivez le storyboard sous forme d'un petit tableau (beat → image → texte → son) et partagez-le avant de construire si la personne est joignable.
4. Échafaudage. Exécutez node <skill>/scripts/new_film.mjs <studio> <name> [film|film-3d|footage], puis éditez comp.html (2D), film.js + world.js + comp.html (3D), ou sources.json + edit.json + comp.html (métrage ; suivez references/footage-promos.md).
5. Construisez en petites boucles. Rendez des planches contact en basse qualité (node render.mjs beats 0.5,4,8,… 0.25 sheet) et regardez-les. Corrigez, re-planchez. Ne jugez jamais le mouvement à partir d'une seule image. Planchez chaque beat (ou demi-beat) sur tout le film avant tout rendu final.
6. Audit (node render.mjs audit 0.25). Le texte ne doit jamais chevaucher le produit ou un autre texte, et doit rester à l'intérieur de la zone de sécurité de la plateforme. Corrigez chaque impact ; ne discutez pas avec l'audit.
7. Son. Exécutez python audio.py out/mix.wav out/stems, puis python check.py : volume sonore par section, spectre, test de sirène/glissando, clics.
8. Rendu final. Demandez d'abord (voir « Étiquette de rendu »).
   • Les films 2D prennent quelques minutes : node make.mjs frames + encode.
   • Les films 3D prennent des heures : node render.mjs chunks + concat.
9. Finition. node make.mjs finish normalise le volume sonore (−14 LUFS, −1.5 dBTP), muxe sur l'image (l'image est l'horloge maîtresse, jamais -shortest), et écrit une copie légère -share. Vérifiez le nombre d'images, la durée et le volume sonore dans la sortie.
10. Relisez le fichier final, pas la comp. Extrayez des images du mp4 encodé (toutes les 0.5 s) dans une planche et regardez-les toutes. Puis livrez avec une courte note (roumain/anglais selon ce que parle le client) : ce qu'il contient, d'où viennent les faits, ce que le client doit confirmer.

Étiquette de rendu (l'ordinateur de la personne est le sien)

Un rendu 3D maintient le GPU à 100% pendant une heure ou plus et rend la machine lente. Écrire des centaines d'images fichier fait aussi scanner chaque fichier par Windows Defender. Quelqu'un a déjà dû crier « arrête, tu fais griller mon PC ». Donc :

• Avant toute tâche qui charge la machine plus de quelques minutes, dites ce que c'est, combien de temps ça prend et quelle sera la sensation, puis attendez un oui. Proposez :
  • mode doux (NICE_MS=25 DUTY=.35) : pause entre les passes GPU, pour que le bureau reste utilisable ;
  • pleine vitesse ;
  • plus tard / pendant la nuit.
• Préférez render.mjs chunks (morceaux mp4 d'une seconde, interrompables) plutôt que d'écrire chaque image en PNG.
• Lancez les longs rendus comme des processus détachés, pour qu'une conversation fermée ne les tue pas en cours de route (Windows : Start-Process node -ArgumentList 'render.mjs','chunks' -WindowStyle Hidden).
• Quand on vous dit d'arrêter, arrêtez immédiatement. Tuez l'arborescence du processus (Windows : taskkill /T /F /PID …), confirmez avec une liste de processus qu'il ne reste rien, et dites ce qui utilise encore la machine (ex. Defender qui scanne les fichiers écrits) sans le leur reprocher.
• Les planches courtes et les images de test uniques ne nécessitent pas d'autorisation. Elles prennent quelques secondes.

Non-négociables (chacun a coûté une révision une fois)

• renderAt(t) est pure.
  • Pas d'état conservé entre les images, pas de Math.random() (utilisez mulberry32 ensemencé), pas de transitions ou animations CSS, pas de minuteurs.
  • node render.mjs verify rend les images dans et hors ordre ; elles doivent correspondre.
• Chargez chaque graisse de police avant l'image 0 (document.fonts.load pour chaque police utilisée). Une police utilisée pour la première fois à mi-film rend invisible pendant une image.
• Ne laissez jamais deux blocs de texte se chevaucher, ni du texte recouvrir le produit.
  • Un titre sortant disparaît avant que le suivant prenne sa place.
  • Les compteurs s'échangent séquentiellement (ancien sorti, puis nouveau en place) ; deux nombres l'un sur l'autre semblent cassés.
• Les légendes restent à l'écran ≥ 1,5 s, ≤ 7 mots chacune, une idée par temps. Faites de l'image 0 une vignette lisible.
• N'inventez jamais un chiffre, un client, un avis ou un résultat. N'affichez les prix qu'avec une preuve datée à l'écran, et seulement avec l'accord du client.
• Le son est sérieux sauf demande contraire. Pas de marimbas jouets ou de clochettes pour un produit tech, et pas de glissandos tonaux continus : le son d'étincelle d'un reel a été qualifié de « sirène du jugement dernier ».
• Utilisez une vraie UI et de vrais assets (captures Playwright du site du client lui-même à haute DPR). Ne redessinez jamais l'interface ou le logo d'un client à la main. Ne cliquez jamais sur acheter, soumettre ou envoyer sur un vrai site.