Court métrage dessiné en code

anim-skill · Génération d’animation de bout en bout

Un sujet entre, une vidéo sort. Les images sont intégralement dessinées image par image en code (Remotion + React), sans aucune dépendance à des banques de médias, modèles vidéo génératifs ou images externes.

Le style est un plug‑in, la voix est un plug‑in, le processus est fixe. Ajouter un nouveau style ne modifie pas le processus, changer de moteur vocal non plus.

---

Quand l’utiliser

• « Fais‑moi une vidéo explicative sur X »
• « Transforme ce document / cours en vidéo »
• « Ajoute une voix off à cette vidéo »
• « Refais une version avec le style X »
• « Vérifie si cette vidéo a des scintillements / passages vides »

Ne pas utiliser pour : les séquences nécessitant des prises de vue réelles, des présentateurs en direct, des rendus 3D (utiliser Blender).

---

Entrée : deux modes, à déterminer d’abord

Mode	Déclencheur	Étape supplémentaire
A · Sujet	L’utilisateur ne donne qu’un mot‑clé ou une phrase	Effectuer d’abord une recherche (faits, chiffres, idées reçues), puis passer à la conception
B · Document	L’utilisateur a déjà fourni un document (cours, livre blanc, diaporama)	Effectuer d’abord affinage et corrections (compléter les données, normaliser la terminologie, signaler les passages non visualisables), puis passer à la conception

Après la détermination, répéter d’abord la compréhension avant d’agir : je suis en mode A/B, durée N secondes, style X, destiné à quel public. Si deux de ces quatre éléments ne sont pas clairs, demander avant de continuer.

---

Six étapes (ordre obligatoire)

0 PRÉVOL → 1 CONTENU → 2 STORYBOARD → 3 CONSTRUCTION → 4 VOIX OFF → 5 VALIDATION LIVRAISON
                                                          ↑                ↓
                                                          └── REBOUCLAGE ←──────┘

0 · PRÉVOL (unique, 2 minutes)

node <skill>/scripts/preflight.mjs

Vérifie node / npm / ffmpeg / navigateur ; affiche les moteurs vocaux disponibles. Signaler immédiatement toute absence, ne pas attendre le rendu.

1 · CONTENU (recherche A / affinage B)

Produire research.md : une phrase de thèse, 3 à 6 faits à l’appui, chiffres et sources, idées reçues à éviter, ce que le public sait déjà et ignore.

• Mode A : priorité aux vérifications. Chaque chiffre doit avoir une source ; si introuvable, marquer « à confirmer », pas d’invention.
• Mode B : s’en tenir au texte original, ne compléter que sans modifier. Marquer les phrases non visualisables (l’animation ne peut montrer que des actions, comparaisons, changements).

2 · STORYBOARD

Produire plan.md (format dans references/storyboard.md) : une ligne par plan — intervalle d’images, description visuelle, primitives d’action, sous‑titres.

Critères impératifs (réécrire si non satisfaits) :

• Chaque plan a un seul personnage principal, occupant ≥ 1/3 de la hauteur de la zone de contenu (graphique ≥ 170 px, grand texte ≥ 96 px et ligne entière ≥ 300 px)
• Le personnage principal entre en scène au 1er ou 2e temps
• Trois tailles possibles : principal ≥ 170 / secondaire 60–110 / explicatif 22–30
• Au moins un « moment fort » (phrase de thèse, entrée du héros, payoff final) ; ne pas compenser avec des décorations

3 · CONSTRUCTION

node <skill>/scripts/scaffold.mjs <répertoire_projet> --title "Titre" --style <id_style>

Selon le brief du style (styles/index.json), écrire src/scenes/*.tsx et enchaîner les scènes avec <Series>.

Règles absolues (toute infraction casse le rendu ou fait planter la vidéo) :

1. Tout doit dériver de useCurrentFrame(). Interdiction de Math.random(), Date.now(), compteurs avec setState. Aléatoire déterministe : hash(seed) = fract(sin(seed*127.1+311.7)*43758.5453).
2. Chaque interpolate() doit inclure {extrapolateLeft:'clamp', extrapolateRight:'clamp'}. Sans cela, les images hors plan dériveront.
3. Interdiction des CSS transition / animation / @keyframes. Uniquement interpolate et spring.
4. Aucune ressource externe ni dépendance lourde (three.js / GSAP / images). Dessiner via SVG et dégradés CSS.
5. Maximum 12 primitives de flou SVG et 15 éléments filter: blur() par image, sinon le rendu devient 10 fois plus lent.

4 · VOIX OFF (optionnelle)

node <skill>/scripts/srt.mjs <répertoire_projet>             # Générer SRT depuis le storyboard
python <skill>/scripts/narrate.py <vidéo> --provider edge|volc --voice <id>

• La livraison peut se faire sans voix off (ex. cours en classe).
• Avec voix off : générer le SRT d’abord, la synchronisation se fait à partir des numéros d’images de rendu, pas par estimation.
• Le moteur est un plug‑in (voir references/voice.md).

5 · VALIDATION ET LIVRAISON

python <skill>/scripts/qc.py <vidéo>           # passages vides / taille des éléments
python <skill>/scripts/qc_flicker.py <vidéo>  # scintillements / repérage des coupures

Deux indicateurs impératifs (voir references/qc.md) :

• Passage vide : objet le plus grand dans la zone de contenu < 110 px pendant plus de 45 images → défaut ; < 80 px → bloquant
• Scintillement : écart de luminosité local par rapport à la médiane > 6 (sauts 0/1) → défaut

Livrables : <slug>.mp4, <slug>.srt, plan.md, research.md, src/ (projet éditable), README.md (comment modifier, comment relancer le rendu).

---

Plug‑ins de style

styles/index.json contient 15 styles prêts à l’emploi, chacun avec un brief exécutable (couleur de fond, encre, palette 7 couleurs, épaisseur de trait, tremblé, lueur, texture, police, ambiance, lisibilité de projection, type de contenu adapté).

Appel : --style neon / --style paper / --style crayon …

Ajouter un nouveau style : ajouter une entrée dans index.json + placer un brief dans styles/, sans modifier le processus, les scripts ou les templates. Voir le contrat d’extension dans references/styles.md.

Conseil de sélection : filtrer d’abord par « lisibilité de projection » (ce que voit le fond de la classe), puis par « ambiance ». Papier / Crayon conviennent aux enfants, Néon / Minimaliste aux salles mal équipées.

---

Plug‑ins vocaux

Deux fournisseurs intégrés :

Fournisseur	Coût	Pré‑requis	Remarques
edge	Gratuit	Aucun	Voix neurales Azure, plutôt style présentateur
volc	0,0003 yuan / caractère	APPID + API Key	Voix Doubao, naturelle ; nouveau compte a un crédit gratuit

Ajouter un nouveau moteur : implémenter synthétise(texte, voix) -> mp3 bytes et l’enregistrer dans scripts/tts/<fournisseur>.py ; narrate.py n’a pas besoin d’être modifié. Voir references/voice.md.

---

Auto‑vérification avant livraison

• remotion render code de sortie 0, ffprobe nombre d’images = nombre d’images prévu
• qc.py sans élément bloquant ; qc_flicker.py aucun pic hormis les coupures entre sections
• Tous les interpolate ont clamp (grep -c "interpolate(" = grep -c "extrapolateLeft")
• Aucun Math.random / Date.now / CSS animation
• Sous‑titres synchronisés avec l’image (vérifier 3 plans au hasard)
• La police chinoise est installée sur la machine (sinon les caractères deviennent des carrés)

---

Aide‑mémoire

node scripts/preflight.mjs
node scripts/scaffold.mjs ./videos/my-film --title "Titre" --style paper --seconds 20
cd videos/my-film && npm install
node <skill>/scripts/render.mjs . main out/my-film.mp4
node <skill>/scripts/srt.mjs .
python <skill>/scripts/narrate.py out/my-film.mp4 --provider volc --voice zh_female_cancan_uranus_bigtts
python <skill>/scripts/qc.py out/my-film-volc.mp4

Les détails se trouvent dans references/ : pipeline.md (chaque étape détaillée), storyboard.md (modèle de planification), styles.md (catalogue des styles et extensions), voice.md (voix et extensions), qc.md (critères de validation), render-env.md (pièges d’environnement : bac à sable Windows, TEMP, chemin du navigateur, paramètres ffmpeg).