jpoz/make-video

Que fait make-video ?

Créez un film narré à partir d'une instruction. Chaque image est une fonction pure du temps t, dessinée sur un canvas (@napi-rs/canvas) et encodée avec ffmpeg. La voix est générée localement avec Kokoro. La musique est synthétisée en Python. Chaque image est synchronisée au mot dans la voix qui la nomme.

Le flux est fixe : instruction → storyboard (vraie voix, vraie musique, une vraie image par scène) → l'utilisateur itère sur le storyboard → rendu complet. Ne rendez pas le film complet avant que l'utilisateur n'approuve le storyboard. Échantillonnez les images réelles à chaque étape et corrigez ce que vous voyez avant de le montrer.

<skill> ci-dessous désigne le dossier qui contient ce SKILL.md.

Prérequis

node 20+, ffmpeg, uv (il exécute les scripts Python et installe leurs dépendances), et python3. ./make.sh setup les vérifie. Le modèle Kokoro (~115 Mo) se télécharge une fois, lors de la première exécution vocale, dans ~/.cache/make-video/models. Les polices ne sont pas fournies : voir references/fonts.md.

1. Comprendre le film (à partir de l'instruction)

Lisez ce sur quoi porte le film avant d'écrire une ligne : la PR, le dépôt, la documentation, l'application, l'annonce. Trouvez les éléments réels que le film peut montrer : écrans réels, code réel, sortie réelle. Décidez de ces éléments, et ne demandez à l'utilisateur que ce que vous ne pouvez pas découvrir par vous-même :

• Type et durée. Introduction ou annonce de fonctionnalité : 30–75 s, 6–10 scènes, écrans d'application réels. Explication : 2–6 min, chapitres avec cartes-titres, diagrammes et code. Règle empirique : 2,5 mots de voix par seconde.
• Public et l'unique chose qu'ils doivent savoir ou faire à la fin.
• Apparence. La palette ink (presque noir, accent rouge) ou navy (bleu profond, ciel et ambre) dans theme.mjs, ou les couleurs et polices propres au produit.
• Style musical. pop (brillant, joyeux) ou chip (chiptune douce), ou none.

2. Créer le projet

<skill>/scripts/new-project.sh ~/Developer/<sujet>-video <sujet>-video

Ceci copie <skill>/template (un film échantillon de 30 s fonctionnel) et exécute npm install. Obtenez les polices (references/fonts.md). Le projet est autonome. Modifiez ces fichiers :

Fichier	Ce que c'est
video.json	Le script : scènes, lignes vocales, repères, timing, musique, le briefing pour le storyboard
scenes/*.mjs	Une fonction de dessin par identifiant de scène
theme.mjs	Palette, polices, fond
music.py	La partition (accords, hooks, instruments), quand les valeurs par défaut ne conviennent pas
shots/plan.mjs	Captures d'écran de l'application réelle, quand le film montre une application

Ne modifiez pas timeline.json. timeline.py le génère.

3. Écrire le script (video.json)

Lisez d'abord references/script.md. En résumé : une idée par scène, phrases courtes et simples, commencer par un accroche, et terminer par ce qu'il faut faire ensuite. Une ligne est une chaîne de caractères, ou {"text", "say"} lorsque le sous-titre et la forme parlée diffèrent ("video.json" se dit "video dot jason"). Un repère nomme le mot sur lequel une image atterrit : {"label": "badge", "at": "badge", "sound": "chime"}. Placez un repère sur chaque arrivée importante. Remplissez brief (accroche, approche, questions ouvertes) ; le storyboard l'affiche.

4. Dessiner les scènes (scenes/*.mjs)

Lisez references/drawing.md (l'API des scènes, les helpers, les règles de disposition et de mouvement). Chaque scène reçoit (ctx, t, S). Placez chaque arrivée sur S.cue(label) ou S.w('word'), et faites sortir chaque élément avec S.tout. Utilisez du matériel réel :

• Écrans d'application : capturez l'interface réelle avec shots/capture.mjs et affichez-la avec screens.mjs (caméra, curseur, anneaux). Voir references/screens.md.
• Code : code.mjs lit le fichier réel par numéro de ligne, donc une citation ne peut pas être erronée.
• Sortie de programme : exécutez le programme réel et dessinez sa sortie réelle. Ne dessinez pas de sortie que vous n'avez pas vue.

Échantillonnez pendant que vous dessinez. Après chaque scène, exécutez ./make.sh scene <id> et regardez out/sheet.jpg avant de passer à la scène suivante. Pour chaque mouvement ou transition délicat, exécutez ./make.sh clip A B et regardez out/clip.mp4. references/review.md contient la liste de vérification.

5. Le storyboard : l'utilisateur itère ici

./make.sh storyboard

Ceci lance voix → timeline → musique → mixage audio → une image par scène → storyboard.html : une page autonome avec le vrai mix voix-et-musique, une image de chaque scène, le script avec chaque mot repère marqué, les timecodes, et le briefing. Jouer la page met en évidence la scène et la ligne actuelles.

Avant de la montrer, regardez chaque image dans out/board/ et corrigez ce qui ne va pas. Ensuite, donnez la page à l'utilisateur. Si votre environnement peut publier une page HTML ou un artefact, publiez storyboard.html et partagez le lien. Sinon, donnez le chemin du fichier à ouvrir dans un navigateur.

Itérez ensuite avec l'utilisateur. Chaque changement est petit et rapide : modifier une ligne dans video.json (seules les lignes modifiées sont à nouveau vocalisées), déplacer un repère, changer l'énergie d'une scène, restyler, redessiner une scène. Puis exécutez à nouveau ./make.sh storyboard. Tenez à jour les questions ouvertes du briefing. Restez dans cette boucle jusqu'à ce que l'utilisateur approuve le storyboard.

6. Le rendu complet

Seulement après l'approbation de l'utilisateur :

./make.sh film            # ou : ./make.sh film --blur 4   (flou cinétique, ~4x plus lent)

Ceci écrit out/<nom>.mp4 (1920×1080, 60 fps, AAC, loudness −16 LUFS), out/<nom>.srt, et out/<nom>.vtt. Ensuite vérifiez la sortie réelle, pas le code (voir references/review.md, « Vérification finale ») : extrayez des images du MP4 encodé, confirmez la durée et les flux, et écoutez le mix aux points qui ont changé. Exécutez python3 storyboard.py --final pour que la page du storyboard contienne le film terminé. Livrez le MP4, les sous-titres et le storyboard. Si le film est une annonce, proposez un court article pour l'accompagner, rédigé à partir du même script.

Commandes

Commande	Effet
./make.sh storyboard	Voix, timeline, musique, mix, images du board, storyboard.html
./make.sh scene ID [0.3,0.6,0.9]	Images fixes à des fractions d'une scène, plus out/sheet.jpg
./make.sh samples [24]	Images fixes réparties sur tout le film, plus out/sheet.jpg
./make.sh stills 3,20.5	Images fixes à des secondes exactes, plus out/sheet.jpg
./make.sh clip A B	out/clip.mp4 : secondes A à B du film réel, avec son
./make.sh voice / music / timeline	Une seule étape
./make.sh film [--blur N]	Le rendu et le mix complets
uv run tts.py --voices	Lister les voix Kokoro

Références

• references/script.md : comment écrire la voix-off et tout video.json
• references/drawing.md : l'API des scènes, les helpers lib.mjs, disposition, mouvement, motifs de scène
• references/screens.md : capturer des écrans d'application réels et déplacer une caméra dessus
• references/audio.md : voix, styles musicaux, sons de repères, le mix, audio supplémentaire
• references/review.md : comment échantillonner, la liste de vérification du polissage, la vérification finale
• references/fonts.md : où obtenir les polices