Communitygithub.com

Antonod1988/code-explainer-film

Réalisez un court-métrage narratif complet ou un film d'animation explicatif entièrement en code, sans générateur vidéo : illustration Canvas 2D et inserts 3D three.js enregistrés image par image en MP4, voix off neuronale dont les timings des mots pilotent le montage, musique et effets sonores synthétisés dans numpy, versions séparées par langue, vérifications de l'image et du son sans intervention humaine, et copies de livraison pour Telegram, YouTube et X. À utiliser chaque fois que l'utilisateur souhaite une animation, une explication, un essai vidéo, un film éducatif ou une introduction.

Qu'est-ce que code-explainer-film ?

Ce skill permet de créer un court-métrage ou un film explicatif animé entièrement en code source, sans aucun générateur d'images ou de vidéos. Chaque image est une fonction pure du temps, dessinée par du code (Canvas 2D pour les plans 2D, three.js pour les inserts 3D). La voix off, la musique et tous les effets sonores sont également générés par code (synthèse vocale neuronale TTS, synthèse audio avec numpy). Le pipeline repose sur le principe « voix d'abord » : le script est écrit avec des repères (cues) ; après avoir généré la voix, les timings des mots sont récupérés et chaque repère devient une seconde absolue. L'image et le son sont ensuite verrouillés sur ces secondes. Chaque langue obtient son propre timeline à partir de son propre enregistrement vocal, ce qui permet de monter différemment chaque version sans travail supplémentaire. Le skill inclut des outils pour vérifier les images (contact sheets), vérifier les métriques audio (LUFS, équilibre), et produire des copies de livraison pour Telegram, YouTube et X. Il est conçu pour fonctionner sur un ordinateur portable classique : un film de 5 minutes nécessite environ 1 Go d'espace disque et un rendu de 14 à 16 minutes par langue. Le skill fournit un projet de démonstration fonctionnel de 25 secondes sur les phases de la Lune, en deux langues, qui sert de test d'intégrité avant de développer son propre film.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Antonod1988/code-explainer-film/tree/HEAD/skills/code-explainer-film

Demander à votre IA préférée

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

Documentation

Film en code

Le film est un programme. Chaque image est une fonction pure du temps, dessinée par du code que vous écrivez, et la voix, la musique et chaque son proviennent également du code. Aucun générateur d'images ou de vidéos n'est utilisé. Ainsi, n'importe quelle seconde peut être modifiée et rendue à nouveau, et une autre langue est une simple ré-exécution, pas un nouveau montage.

Ce pipeline a produit un film de 5:16 en russe et en anglais : 16 séquences, 57 repères, dix inserts 3D, environ 1h30 à 2h du script à la première langue, 14 à 16 minutes de rendu par langue sur un ordinateur portable. Le code de ce film se trouve dans assets/examples/court-astronomer/.

L'idée principale : la voix d'abord

Écrivez le script avec des repères. Laissez le service vocal le prononcer et rapporter le temps de chaque mot. Un repère devient alors une seconde absolue, et l'image et le son sont tous deux accrochés à ces secondes.

Придворные астрономы {plant}поставили её на карту и {cut}записали дату.

CUE.plant = 9.21    la main pose l'étoile : thunk, étincelles
CUE.cut   = 10.50   coupe sur l'acte, la plume commence à écrire

Chaque langue obtient sa propre timeline à partir de sa propre prise vocale, donc un film russe et un film anglais sont montés différemment sans travail supplémentaire, et une phrase réécrite déplace tout ce qui la suit. C'est pourquoi l'ordre ci-dessous est script, voix, image, son, et jamais image en premier.

script/script.json ─ tools/tts.py ─> audio/voice/<lang>/  +  web/timing_<lang>.js
                                                                   │
                         ┌─────────────────────────────────────────┴───────┐
                  web/film.js + shots + space.js                    audio/score.py
                         │ render.py                                       │
                  renders/film_<lang>/film_<lang>.mp4               audio/mix/<lang>.wav
                         └───────────────── tools/finish_film.py ──────────┘
                                 final/<stem>.mp4, -phone.mp4, .srt

Démarrer un projet

python <ce-skill>/scripts/check_env.py
python <ce-skill>/scripts/new_project.py <dossier>

Placez le projet sur un disque avec de l'espace, dans un dossier nommé d'après le film, sur un chemin court. Les images sont diffusées vers l'encodeur et jamais stockées, donc un film de 5 minutes nécessite environ 1 Go.

Le nouveau projet est une démonstration fonctionnelle de 25 secondes sur les phases de la Lune, en deux langues. Exécutez les commandes que new_project.py affiche et regardez la planche contact avant de modifier quoi que ce soit : si la démo fonctionne, tout échec ultérieur est le vôtre et non celui de la machine.

Statut du modèle. Le pipeline a réalisé le vrai film, mais ce modèle en a été extrait après coup. Sur la démo, tts.py, le mixage et les vérifications sonores ont été exécutés. Les outils de livraison ont été exécutés sur un clip noir, render.py sur des pages factices, et la logique d'image plate sur chaque image contre un canevas factice dans les deux langues. Le modèle n'a jamais dessiné une vraie image, et son plan 3D n'a jamais été exécuté. Les premières images fixes sont donc aussi le test du modèle : si elles échouent, comparez avec assets/examples/court-astronomer/, qui est le code qui a effectué le rendu.

Remplacez ensuite le contenu et conservez la mécanique :

Remplacer pour chaque filmLaisser normalement inchangé
script/script.jsontools/
web/shots.js (plans 2D)render.py, server.py
web/film.js : SHOT et SEQweb/main.js, web/lib.js, web/labels.js
web/space.js : les constructeursweb/space.js : la boîte à outils au-dessus d'eux
audio/score.pyaudio/mixlib.py, audio/synth.py

Flux de travail

Exécutez les commandes qui prennent plus de deux minutes en arrière-plan. Si la machine a une file d'attente de tâches ou une règle thermique (vérifiez les notes du projet et la mémoire), exécutez les rendus via celle-ci.

1. Définir la demande

Ne demandez que ce que vous ne pouvez pas définir par défaut : le sujet, les langues, l'endroit où il sera publié. Par défaut : 1920x1080, 24 ips, -15 LUFS, une durée qui découle du script. Construisez un film brut complet avant de peaufiner une partie. Les gens jugent bien mieux un film entier que dix secondes parfaites, et ils disent souvent carrément que la qualité maximale peut attendre.

2. Lire la référence, s'il y en a une

Mesurez-la au lieu de deviner : coupes, rythme, palette, fréquence de mise à jour du personnage, épaisseur de trait, grain. Vous pouvez le faire image par image dans un navigateur sans télécharger la vidéo. Lisez references/reference-analysis.md. Notez les chiffres dans une courte feuille de style dans le README du projet.

Gardez la technique et laissez le contenu. Inventez votre propre personnage, histoire et designs. Ne réutilisez pas des images, des personnages, des logos ou un air reconnaissable de la référence, et ne recréez pas une œuvre spécifique même sous un nouveau nom.

3. Faire un essai de 10 secondes

Un plan dans le rendu final, silencieux. Les temps codés en dur sont acceptables ici car cela ne teste que le rendu. Envoyez-le à l'utilisateur. C'est le moment le moins coûteux du projet pour changer de direction.

4. Rassembler les faits, écrire le script

Lisez references/script-and-voice.md. Divisez le film en séquences de 10 à 35 secondes, chacune une idée et généralement un plan. Budget de mots : environ 125 par minute en russe et 150 en anglais, pauses comprises. Placez des repères sur les mots où quelque chose doit se produire à l'écran.

Gardez les faits exacts et l'interprétation visiblement séparés, dans le film et pas seulement dans vos notes. Si vous calculez quelque chose, conservez les données dans un fichier que le film lit, afin que ce qui est à l'écran soit ce que les données disent.

Montrez le script à l'utilisateur si le sujet est sensible ou s'il a demandé une approbation. Sinon, continuez et laissez-le réagir au film.

5. Voix, puis timeline

python tools/tts.py

Il affiche chaque repère comme nom=mot@secondes. Lisez ces lignes : un repère sur le mauvais mot est bien moins coûteux à détecter ici. Vérifiez le total par rapport à la cible. Si c'est trop long, réduisez le texte ; n'accélérez pas la voix au-delà d'environ +10%.

6. Écrire les plans

Lisez references/picture.md. Tout à l'écran est une fonction de (g, t) et chaque temps dérive de CUE ou BEAT. Les plans 2D dessinent avec la boîte à outils Canvas ; les plans 3D sont rendus via le composeur dans le même canevas 2D. Un passage de grain à la fin de chaque image et un ensemble d'étiquettes font que les deux se lisent comme un seul film.

7. Regarder les images fixes, corriger, répéter

python render.py renders/check "lang=ru&times=25,66,241,273"
python tools/contact.py renders/check 4

Lisez references/review-and-render.md pour savoir comment choisir les moments et quoi rechercher. Ouvrez la planche et inspectez-la vraiment : la plupart des défauts sont invisibles dans le code et évidents dans une image. Regroupez vos questions. Les rendus de révision dos à dos sont ce qui rend un ordinateur portable chaud et une session lente.

8. Écrire le son

Lisez references/sound.md. Les sections commencent sur les temps de la voix, les effets sont placés sur les mêmes noms de repères que l'image, la musique s'efface sous la voix, et le mixage atteint -15 LUFS.

python audio/score.py ru
python tools/bands.py ru
python tools/qa_audio.py ru whisper

Vous ne pouvez pas l'entendre, alors utilisez les chiffres. Visez environ 10 dB de voix par rapport au reste sur chaque séquence ; le vrai film donnait 6,7 à 14,2 dB, principalement 7 à 9, donc ne descendez pas en dessous de cette plage. Dites clairement que personne ne l'a encore écouté.

9. Images fixes dans chaque langue, puis le rendu complet

python render.py renders/check_en "lang=en&times=25,66,241,273"
THREADS=6 CRF=17 python render.py renders/film_ru "lang=ru&fps=24&file=film_ru.mp4"

Faites d'abord passer les images fixes dans chaque langue. Une virgule décimale erronée dans une langue coûte un re-rendu complet plus tard. Exécutez une seule tâche lourde à la fois. Les changements uniquement sonores ne nécessitent pas de rendu image : refaites le mixage et réexécutez finish_film.py.

10. Livrer, nettoyer, rapporter

python tools/finish_film.py ru
python tools/telegram_copy.py ru
python tools/chapters.py ru

Lisez references/delivery.md pour les copies pour chaque plateforme, les descriptions et le rapport. Ne téléchargez et ne publiez jamais au nom de l'utilisateur sauf s'il a demandé cette publication spécifique. Déplacez les brouillons vers la Corbeille plutôt que de les supprimer, et conservez les versions finales et tout ce qui est nécessaire pour les refaire.

Règles qui évitent le plus de reprises

  • Une image ne dépend que de t. Pas d'horloges, pas d'aléatoire non ensemencé, pas d'état conservé de l'image précédente. Sinon, une image fixe ne correspond pas au film et un re-rendu partiel ne correspond pas à ses voisines.
  • Les temps proviennent des repères. Un décalage par rapport à un repère est acceptable. Une seconde absolue tapée à la main casse dans l'autre langue et après toute réécriture.
  • Tout texte à l'écran passe par T_, y compris les nombres. 29,5 дня et 29.5 days sont des chaînes différentes. C'est le bug qui a été livré dans le master anglais du vrai film : un 23,4°.
  • Ne supposez pas l'ordre des repères entre les langues. L'ordre des mots diffère, donc CUE.a < CUE.b peut n'être vrai que dans l'une d'elles. Protégez les intervalles construits à partir de deux repères.
  • Les étiquettes sont en 2D, placées avec project(). Elles partagent alors le lettrage, le grain et la gestion des langues avec les plans 2D.
  • Gardez la caméra en dehors de tout ce qui tourne. Vérifiez les extrêmes d'un mouvement sur une planche, pas seulement son milieu.
  • Les couches statiques vont dans une plate(). Redessiner un arrière-plan détaillé à chaque image est ce qui rend un rendu lent.
  • Modifiez, puis regardez, puis rapportez. Ne dites pas que quelque chose est corrigé avant d'avoir vu l'image.

Ce que vous ne pouvez pas vérifier, et devez dire

  • Son. Vous voyez la puissance sonore, l'équilibre, les spectrogrammes et une transcription. Vous ne savez pas à quoi cela ressemble.
  • Flux. Vous voyez des images, pas l'expérience d'un spectateur, donc le rythme est votre jugement le plus faible. Demandez spécifiquement le rythme à l'utilisateur.
  • Plateformes. Vous ne pouvez pas voir comment un fichier se comporte dans le compte Telegram ou YouTube de l'utilisateur.

Rapportez ce qui a été vérifié et ce qui ne l'a pas été, dans ces termes. Les décisions (idée, direction, quoi couper) appartiennent à l'utilisateur.

Fichiers inclus

CheminQu'est-ce que c'estQuand le lire
references/reference-analysis.mdExtrait de code de navigateur testé pour mesurer une vidéo, modèle de feuille de styleIl y a une vidéo de référence
references/script-and-voice.mdscript.json, grammaire des repères, budget de mots, voix, faitsAvant d'écrire le script
references/picture.mdTimeline, boîte à outils 2D, jeu d'acteur sur les repères, texte, grain, boîte à outils 3D, carte du code d'exempleAvant d'écrire les plans
references/sound.mdInstruments, structure de la partition, chaîne vocale, chiffres du mixage, vérificationsAvant d'écrire la partition
references/review-and-render.mdQue rechercher sur les planches, modes et options de rendu, chargeAvant la première révision, avant le rendu complet
references/delivery.mdMaster, téléphone, Telegram, YouTube, X, sous-titres, nettoyage, le rapportÀ la fin
references/pitfalls.mdSymptôme, cause, correctif, dans tout le pipelineQuand quelque chose semble anormal
scripts/check_env.pyCe que la machine possèdePremier
scripts/new_project.pyCrée un projet à partir du modèleDeuxième
assets/template/Le squelette du projet, une démo fonctionnelleCopié par new_project.py
assets/examples/court-astronomer/Le code du vrai film : 10 constructeurs 3D, plans 2D, un rig de main, une partition complètePour y chercher une technique ; il ne s'exécute pas seul

Skills associés