li-code-animation

Compétence d'Animation Codée de Li

Phrase d'accroche : Transformer un passage mathématique « difficile à expliquer » en une vidéo d'animation codée de 90 secondes, que l'on peut mettre en pause et regarder à nouveau, où les formules sont toujours parfaitement alignées.

La chaîne technique est fixe en quatre étapes, sans utiliser l'IA pour générer les images : HTML/CSS/SVG définit l'image → GSAP organise la timeline → Chromium headless capture image par image → FFmpeg encode en H.264 MP4. HyperFrames ne fait que le contrat et l'ordonnancement du projet. Il ne produit aucune image – c'est une presse d'imprimerie, le manuscrit est à écrire vous-même.

Prérequis (À vérifier avant de commencer, ne pas poursuivre si un élément manque)

Exécutez npx -y [email protected] doctor à la racine du projet. Continuez uniquement si les quatre éléments suivants sont tous verts.

Logiciel	Version	Utilité	Conséquence si manquant	Comment l'installer (Linux/Cloud PC)
Node.js	≥22	Exécuter les CLI et les scripts	Tout le processus ne démarre pas	nvm install 22
FFmpeg et ffprobe	4.x	Encodage, extraction d'images, vérification des paramètres	Avoir FFmpeg sans ffprobe fait échouer l'export et la vérification	apt install ffmpeg (inclut ffprobe), n'utilisez pas de gestionnaire de paquets tiers, cela n'installe souvent qu'une partie
Chromium / Chrome headless	Version récente (2 dernières années)	Capture d'écran image par image	Impossible de générer des images	apt install chromium, généralement dans /usr/local/bin/chromium sur un cloud PC
GSAP	3.x fichier local	Timeline et interpolation	Utiliser un CDN provoque un écran noir silencieux, sans message d'erreur	Copiez assets/gsap.min.js de cette compétence dans le dossier assets/ du projet

Trois autres éléments nécessaires pour l'auto-vérification (leur absence réduit la portée de l'auto-vérification, mais n'empêche pas la production de la vidéo) :

Outil	Utilité	Solution si manquant
playwright-core	Capture automatique des six scènes	npm i playwright-core
Filtre scale de ffmpeg	Diagnostic de luminosité des captures	Dégradation automatique vers un diagnostic DOM uniquement
zip	Création de l'archive source	Utiliser tar.gz à la place, et le mentionner dans les notes de livraison

Cinq pièges à éviter

1. ffmpeg et ffprobe doivent être présents simultanément ; de nombreux systèmes n'installent que le premier.
2. N'utilisez pas d'installations mixtes avec winget / paquets portables ; la version dans le PATH peut ne pas correspondre.
3. GSAP doit toujours être un fichier local, CDN interdit ; un CDN déconnecté provoque un écran noir sur toute la vidéo, pas une erreur.
4. Le navigateur fonctionne en rendu logiciel (le message BeginFrame did not run dans les logs est normal), ne vous embêtez pas avec la carte graphique.
5. Le débit binaire par défaut est d'environ 500 kbps, pour du 1080p normal, il faudrait 3–8 Mbps. Si vous ne spécifiez pas explicitement le débit, les lignes fines sombres seront floues. Voir section 6.

Choix de la voie : par défaut, suivre la voie A, passer à la voie B pour une narration ou des images complexes

	Voie A · Graphique pur (par défaut)	Voie B · Narration / Images complexes
Adapté pour	Fonctions, géométrie, dérivations de formules, analyse de concepts	Narration, mains / personnages / cartes / 3D, musique accompagnant la vidéo
Visuel	Six scènes HTML+SVG de cette compétence, coordonnées codées en dur	Faire appel à la compétence code2video : script film.json + bibliothèque de composants
Son	Pas de narration par défaut, les sous-titres sont le texte de l'image ; BGM ajouté ultérieurement par l'utilisateur	Narration TTS + musique + alignement sonore
Commande	npx [email protected] render	node $C/tools/make.mjs <dossier-video> film
Quand changer de voie	L'utilisateur demande explicitement « une voix explicative / du doublage / une narration », ou a besoin de mouvements humains, de cartes, de personnages	L'utilisateur ne veut que l'image et le texte

Les capacités de la voie B sont héritées mais non dupliquées : le moteur / kits / presets de code2video ne sont pas copiés dans cette compétence (environ 20 Mo, ce qui provoquerait une dérive de version entre les deux compétences lors de leurs mises à jour respectives). On appelle plutôt l'installation déjà existante. Les détails de l'interface sont dans references/two-tracks.md. Le storyboard est commun aux deux voies, un storyboard de la voie A peut être converti en film.json pour la voie B (scripts/story-to-filmjson.mjs).

Processus d'exécution après réception d'une tâche

0 · Vérification de l'environnement

npx -y [email protected] doctor
ls assets/gsap.min.js

Si un élément manque, donnez la commande d'installation et attendez que l'utilisateur l'installe, ne faites pas semblant de pouvoir exécuter la tâche.

1 · Compléter par des questions (l'utilisateur ne donne souvent qu'une phrase)

Un professeur dit souvent vingt mots : « Fais une vidéo avec du code, parle des nombres imaginaires, est-ce qu'il existe vraiment un x tel que x²=-4 ? » Les spécifications restantes sont complétées par vous, posez seulement quatre questions, chacune avec des options prêtes :

Question	Pourquoi est-ce essentiel	Suggestion par défaut
Où s'arrête l'explication ?	Décide de la justesse du résultat mathématique, c'est le seul endroit où l'on peut « se tromper »	S'arrêter à l'étape qui ne nécessite pas de nouveau concept
Durée et segments	Décide du nombre de scènes	90 secondes, six scènes
Qui définit le storyboard ?	L'utilisateur a peut-être déjà un ordre de tableau	Vous l'écrivez, montrez-le d'abord
Niveau du public	Décide de la profondeur et du vocabulaire	Selon le niveau scolaire du sujet

On ne demande pas le style visuel : par défaut, c'est le style sombre avec traînées lumineuses (l'utilisateur l'a déjà choisi). Sauf si l'utilisateur demande explicitement un fond blanc.

Quand l'utilisateur dit « faites comme vous voulez », répondez-lui avec les valeurs par défaut formulées en une phrase (« Je fais en style sombre, 90 secondes, six scènes, je m'arrête à cette étape. Dites stop si ça ne va pas »), il n'a qu'à acquiescer.

2 · Proposer un storyboard en six scènes, attendre l'accord de l'utilisateur

Écrivez un tableau de storyboard selon le squelette de la section 3 : numéro de scène, durée, éléments visuels, texte des sous-titres, le problème que cette scène doit résoudre. Ne donnez que le storyboard, n'écrivez pas de code. L'utilisateur dit « d'accord » avant de passer à l'étape 3. Le coût de reprise est le plus bas à cette étape, assurez-vous d'attendre la confirmation.

3 · Créer le projet

node <dossier-competence>/scripts/init-project.mjs --name <dossier-projet> --title "<titre-video>" --scenes 6

Le script va : copier le squelette des six scènes et index.html depuis assets/project-template/, copier GSAP, générer le squelette verify-seeks.json. Ne faites pas manuellement npx hyperframes init, le modèle respecte déjà le contrat.

Le contenu du modèle est celui de la vidéo complète sur « la signification géométrique de k pour la proportionnalité inverse » (version sombre). Elle peut être directement re-rendue pour obtenir la même vidéo ; pour changer de sujet, conservez son système de coordonnées, sa timeline et son style, ne modifiez que le texte et la valeur de k, c'est plus rapide que de tout écrire à partir de zéro.

4 · Écrire le visuel de chaque scène

• Un fichier par scène : compositions/scene-1-hook.html … scene-6-outro.html ; index.html ne fait que les monter, n'écrivez pas tout le contenu dans un seul fichier HTML géant.
• Toutes les coordonnées sont codées en dur, pas de mise en page fluide : définissez d'abord l'origine et l'échelle (ex. : OX=460, OY=620, S=96, 1 unité = 96 pixels), tous les points sont calculés à partir de là.
• Les courbes sont échantillonnées selon la fonction pour générer le path, pas de dessin approximatif à la main.
• Formules et couleurs suivant references/visuals.md ; explication suivant references/math-rules.md.

5 · Lint

npx -y [email protected] lint

Doit être 0 erreur 0 avertissement. S'il y a des erreurs, corrigez-les selon les messages, puis relancez.

6 · Captures d'écran des six scènes (auto-vérification 1–3)

node <dossier-competence>/scripts/verify.mjs --browser=/usr/local/bin/chromium

Pour chaque scène, cherche la seconde avec le maximum d'informations et prend une capture dans verify-shots/, en diagnostiquant également si GSAP est chargé, si la timeline est enregistrée, si des éléments débordent, s'il y a des erreurs JS. Regardez chaque capture vous-même, ne vous contentez pas d'exécuter le script.

7 · Extraction d'images et vérification (auto-vérification 4)

Pour la version précédente terminée, extrayez 16 images pour les assembler en une planche, et confirmez que chaque élément clé apparaît bien au moment où il est censé apparaître. La procédure est décrite dans references/qa.md.

8 · Rendu de la vidéo complète (doit explicitement spécifier le débit binaire)

npx -y [email protected] render --output <nom>.mp4 --quality delivery --video-bitrate 3M

--video-bitrate et --crf sont mutuellement exclusifs, choisissez l'un ou l'autre. Une vidéo de 90 secondes en 1080p fait normalement 15–25 Mo ; moins de 10 Mo signifie que la compression est trop forte.

9 · Vérification des paramètres de la vidéo finale (auto-vérification 6)

node <dossier-competence>/scripts/inspect-video.mjs <nom>.mp4 --expect-duration 90

Vérifie la résolution, la fréquence d'images, le nombre total d'images, la durée, le débit binaire, la taille ; si un élément est不合格, retournez à l'étape 8 et re-rendez.

10 · Livraison

zip -qr <nom>-projet.zip <dossier-projet> \
  -x "<dossier-projet>/node_modules/*" -x "<dossier-projet>/verify-shots/*" \
  -x "<dossier-projet>/.verify-tmp/*" -x "<dossier-projet>/*.mp4"

Livrez trois choses : la vidéo finale mp4, l'archive du projet source (sans le mp4), trois notes (ce qui a été expliqué, ce qui a été décidé pour l'utilisateur, les points à vérifier par le professeur). Envoyer uniquement les fichiers ne constitue pas une livraison.

III. Squelette des six scènes (base de 90 secondes)

La durée peut être ajustée sur demande, mais l'ordre de la structure ne doit pas changer : d'abord accrocher, puis faire un pas, puis généraliser, puis établir une conclusion, puis corriger les erreurs, et enfin conclure.

#	id de la scène	Début / Durée	Tâche de cette scène	Éléments obligatoires
1	s1-hook	0 / 10	Poser une vraie question, donner envie de continuer	Graphique principal fixé + trois lignes de questions à droite + note en bas
2	s2-q1	10 / 20	Calculer la grandeur clé dans le cas le plus simple	Axes, courbe, point mobile, rectangle/triangle, sous-titres ligne par ligne
3	s3-other	30 / 18	Vérifier la même conclusion en changeant de quadrant	Les quatre branches de la courbe s'allument l'une après l'autre + carte de conclusion
4	s4-triangle	48 / 15	Décomposer la conclusion en deux, donner la prémisse majeure	Bloc géométrique + marqueur d'angle droit + trois lignes de déduction
5	s5-table	63 / 12	Corriger l'erreur la plus fréquente	Tableau à lignes fines + carte d'erreur (barrée) + carte correcte + phrase-clé
6	s6-outro	75 / 15	Reformuler la conclusion avec une autre échelle, conclure	Version réduite du même graphique + trois lignes centrées + accentuation pulsée

Points importants pour le montage dans index.html : fond du body codé en dur (sombre #050a14), track-index 0–5 pour les six scènes, start / duration alignés sur le tableau ci-dessus, title de la vidéo écrit « Sujet ｜ Nom du repère ».

IV. Aide-mémoire sur l'exactitude mathématique (une erreur d'écriture est une faute pédagogique)

Contraintes strictes, chaque point doit être retranscrit dans l'image. La liste complète et des contre-exemples sont dans references/math-rules.md.

1. Ne déduire que des symboles, pas des nombres. Pour la proportionnalité inverse, aller seulement jusqu'à |k| et ½|k|, ne pas faire apparaître de valeur concrète comme « 4 » dans toute la vidéo ; de même pour les conclusions générales.
2. Les fractions sont toujours écrites avec une barre de fraction horizontale, pas de barre oblique, pas d'écriture a/b.
3. Le symbole du triangle comme indice en bas à droite du S, pas aligné horizontalement avec la lettre.
4. Utiliser « point commun », pas « point d'intersection ».
5. Formulation fixe pour les cas négatifs : « Lorsque k<0, il en va de même dans les deuxième et quatrième quadrants ».
6. Un même concept est désigné par le même mot dans toute la vidéo, pas de changement de formulation ; le vocabulaire des sous-titres est cohérent avec le manuel.
7. Avant qu'une conclusion n'apparaisse, l'image doit déjà avoir dessiné son fondement ; il est interdit d'avoir « la conclusion en premier, le fondement après ».

V. Aide-mémoire visuel (style sombre avec traînées lumineuses par défaut)

Les valeurs de couleur complètes et leur implémentation sont dans references/visuals.md. Retenez trois règles d'or pour le fond sombre, le reste est adjustable :

1. Les remplissages de surfaces doivent être réduits à 18 % et avoir un contour – un remplissage à 40 % sur un fond sombre devient flou comme du brouillard.
2. Les triangles / blocs géométriques utilisent un « contour ambre + remplissage cyan très pâle » – un remplissage or sur du bleu foncé donne une couleur olive sale.
3. Les tableaux n'ont pas de fond de couleur, ils sont séparés par des lignes fines – un tableau sur fond blanc, copié tel quel, fera trois lignes qui se confondent.

La taille de la police est globalement 4 points de plus que la version sur fond blanc ; le repère dans le coin supérieur gauche est fixe : Vibe 知识大赏 ｜ 本镜小标题, 26px, espacement des lettres 5px, left 84 / top 70.

**Règle d'or pour les polices : trois rôles distincts – Chinois : Noto Sans CJK SC (Source Han Sans), étiquettes latines et chiffres : Inter, symboles mathématiques : TeX Gyre Termes italique avec empattement (même famille que Times, forme de lettres cohérente avec les manuels). @font-face doit être écrit dans le <style> de <template> (le mettre dans <head> sera ignoré par le cadre de capture de la scène, la police ne sera pas chargée silencieusement). Détails et quatre pièges dans references/visuals.md section zéro.

VI. Rendu et débit binaire

Paramètre	Valeur	Explication
--quality	delivery	Mode haute qualité, le mode par défaut réduit le débit
--video-bitrate	3M	Doit être spécifié explicitement ; mutuellement exclusif avec --crf
--resolution	Par défaut paysage (1920×1080)	4K seulement sur demande explicite
--resume	Reprendre le rendu après interruption	Les images déjà rendues ne sont pas recalculées

Critère : 90 secondes → taille 15–25 Mo, débit binaire supérieur à 1.5 Mbps, 2700 images, durée 90.000000 s. Si les chiffres ne correspondent pas, refaites le rendu, ne livrez pas.

En cas de manque de netteté (testé : --video-bitrate inefficace)

Testé en novembre 2026 : --video-bitrate 30M donne toujours un rendu à 1.8 Mbps, --quality delivery aussi. En d'autres termes, le paramètre de débit binaire de l'encodage intégré est largement ignoré. Pour une netteté de qualité livrable, vous devez prendre en charge l'encodage vous-même. Si l'utilisateur dit « pas net », suivez cette voie, ne réglez plus --video-bitrate :

# 1) Rendre seulement les images, sans encoder (2700 images / environ 2.4 Go / 16 minutes)
npx -y [email protected] render --format png-sequence --output pngseq

# 2) Encoder soi-même. Contenu statique, texte fin, doit utiliser CBR plutôt que CRF (CRF ne donne que 0.5 Mbps, le transcodage sur les plateformes le rendra flou)
ffmpeg -v error -framerate 30 -i pngseq/frame_%06d.png \
  -c:v libx264 -b:v 4M -minrate 4M -maxrate 4M -bufsize 8M \
  -preset slow -tune animation \
  -x264-params "nal-hrd=cbr:aq-mode=3:chroma-qp-offset=-2" \
  -pix_fmt yuv420p -movflags +faststart -y out.mp4

chroma-qp-offset=-2 est pour les dessins fins en couleur : les caractères cyan, ambre peuvent perdre leur bordure avec un échantillonnage de chrominance 4:2:0. Ce paramètre donne un peu plus de débit à la chrominance par rapport à la luminance.

Environ 2 minutes d'encodage, on obtient 90 s / 43 Mo / 4 Mbps. La barre des 40 Mo est le point d'équilibre pour « pouvoir être diffusé en classe, encore net après le transcodage sur les plateformes » ; un fichier de moins de 10 Mo sera mou sur mobile. Pour une diffusion sur les plateformes (WeChat Video / Douyin), ajoutez une version master avec -b:v 8M (environ 85 Mo), le texte sera encore préservé après le transcodage de la plateforme.

N'espérez pas de sur-échantillonnage 4K : avec un GPU logiciel, 2700 images prennent plus d'une heure (testé : 20 minutes pour seulement 8 %), la durée de production d'une seule vidéo ne le permet pas.

Après encodage, vous devez vérifier une image en 1:1 (crop=760:300 pour vérifier si les bords du texte ont des blocs / des anneaux), ne regardez pas seulement la vignette d'ensemble – la vignette ne montre pas le flou.

Effets sonores (ponctuels, pas de musique de fond)

Quand l'utilisateur dit « ajoute un peu de son » /« trop calme » mais ne demande pas de BGM, n'utilisez que des effets sonores ponctuels : un son pour chaque action visuelle, puis retour au silence. Ajouter de la musique de fond à une vidéo explicative de mathématiques affaiblit la sensation de réflexion et peut couvrir la propre narration de l'enseignant.

# 1) Écrire une timeline des actions visuelles (en secondes absolues), exemple dans assets/sfx-events.example.json
python3 <dossier-competence>/scripts/make-sfx.py events.json -o sfx.wav --duration 90

# 2) Copier le flux vidéo, ne mixer que la piste audio (l'image ne bouge pas d'un pixel)
ffmpeg -v error -i in.mp4 -i sfx.wav -c:v copy -c:a aac -b:a 128k -shortest \
  -movflags +faststart -y out.mp4

Six types d'effets sonores, chacun pour une chose : brush pour la croissance d'une courbe / d'un segment de ligne, slide pour le glissement uniforme d'un point mobile, tick pour l'apparition d'une ligne de texte, ding pour une carte / un titre / une question, thump pour la grandeur la plus cruciale, chime pour ✓ / une phrase-clé / la fin.

Trois règles :

1. Ne faites pas sonner chaque ligne – ne sélectionnez que les « actions visuelles », environ 30 points pour une vidéo de 90 secondes suffisent, trop devient bruyant.
2. Le pic doit être en dessous de -16 dBFS, tick autour de -29 dB, thump / ding autour de -24 dB, ce niveau est « audible sans voler la vedette ».
3. Après le mixage, vérifiez avec ffmpeg -ss <t> -t 0.6 -af volumedetect : aux endroits avec effet sonore, le niveau doit être entre -24 et -30 dB, aux endroits silencieux, il doit être à -91 dB (vrai silence). Si un endroit avec effet sonore est supérieur à -18 dB, réduisez le volume.

VII. Les six auto-vérifications (doivent toutes être réussies avant la livraison)

#	Quoi vérifier	Commande	Critère de réussite
1	Conformité de la structure	npx -y [email protected] lint	0/0
2	Les six scènes ont une image	scripts/verify.mjs	Les six scènes produisent toutes une image, pas d'écran noir, pas d'erreur JS
3	Les éléments ne débordent pas	Même commande, voir le rapport de diagnostic	Aucun élément débordant ; sous-titres à au moins 80px du bas
4	Les éléments apparaissent bien au bon moment	Assemblage d'images extraites (voir qa.md)	Chaque segment d'élément apparaît au moment annoncé, aucun segment vide
5	Exactitude mathématique	Vérifier les sous-titres scène par scène avec math-rules.md	Les 7 points sont tous ok
6	Paramètres de la vidéo finale	scripts/inspect-video.mjs	Résolution / nombre d'images / durée / débit binaire / taille, tout est conforme

Les vérifications 1, 2, 3, 4, 6 sont effectuées par la machine et vérifiées par un humain ; la vérification 5 ne peut être faite que par un humain – c'est la seule qui peut empêcher une faute pédagogique.

VIII. Règles pour les itérations de modification

Les commentaires de l'utilisateur doivent être reçus sous la forme d'un « trio » : quelle scène / à quelle seconde / quoi changer. Les commentaires vagues comme « ce n'est pas terrible ici » doivent être précisés par des questions, ne refaites pas tout un segment.

Après une modification, vous devez relancer les vérifications : si le changement concerne les coordonnées ou la taille de la police → 1+2+3 ; s'il concerne le texte → 5 ; s'il concerne plusieurs scènes → les six vérifications.

Il est plus efficace de regrouper plusieurs modifications à la fois plutôt que de faire de petites retouches répétées, mais les modifications majeures qui traversent les scènes nécessitent un nouveau storyboard pour confirmation.

Un processus de révision réel (dix enregistrements) est disponible dans references/revisions.md.

IX. Choses interdites

• assets/gsap.min.js manquant ou utilisation d'un CDN
• Utiliser scaleX/scaleY + transformOrigin pour la croissance d'un segment SVG (ne grandit que d'un côté)
• Utiliser onUpdate pour piloter un attribut SVG (ne se déclenche pas lors du seek, la capture sera incorrecte)
• Interpoler des propriétés qui déclenchent un reflow comme letterSpacing, width
• Lorsque d="", appeler d'abord getTotalLength() (il faut d'abord avoir un d sentinelle)
• Rendre sans spécifier le débit binaire
• Mettre tout le contenu dans un seul fichier HTML
• Utiliser une barre oblique pour les fractions dans les formules
• Envoyer seulement le mp4 à la livraison, sans dire ce qui a été modifié
• Mettre <sup> dans un <text> SVG (les balises HTML dans SVG font que tout le texte se déplace ; les exposants doivent être faits avec le caractère ²)
• Faire une pulsation scale sur un conteneur pleine largeur (1920) (une augmentation de 4% heurte la bordure, la vérification 3 signale directement un débordement ; attacher le scale à un inline-block dans le conteneur)
• Placer une barre de suppression positionnée en absolu comme frère de l'élément texte cible (elle traversera toute la colonne ; il faut la mettre dans son propre conteneur en position relative à l'intérieur de ce texte)
• Utiliser repeat: -1 pour une pulsation en boucle (sans data-duration, le lint signalera une erreur ; utiliser un nombre fini de répétitions)
• Laisser des fichiers .html temporaires à la racine du projet (ils seront considérés comme une deuxième racine, lint signalera « un seul index.html permis »)
• Lorsqu'une courbe est faite de deux path (ligne lumineuse + halo), ne donner dasharray/dashoffset qu'à la ligne lumineuse (le halo apparaîtra en entier en avance, donnant l'impression qu'« il y a déjà une partie sombre avant la fin du tracé » ; les deux doivent être définis et interpolés au même moment)
• Chercher la netteté avec --video-bitrate (inefficace en pratique, voir section 6)
• Encoder seulement avec CRF sans vérifier la taille (pour du contenu statique, CRF ne donne que 0.5 Mbps, le transcodage sur les plateformes le rendra flou)
• Utiliser la police système pour rendre les chiffres et lettres (system-ui dans Chromium headless est DejaVu Sans, les chiffres et lettres sont ternes ; toujours "Inter", sans-serif)
• Écrire le nom chinois dans font-family (ex. "Noto Sans SC", si non installée, le lint signalera font_family_without_font_face)
• Dessiner les axes de coordonnées seulement avec deux lignes droites, sans flèche directionnelle à l'extrémité (norme des manuels : x vers la droite, y vers le haut, chacune une flèche pleine ; écriture dans references/visuals.md section « Axes de coordonnées »)

IX·V. Mise à jour des polices pour les anciens projets

Les anciens projets (qui utilisent encore system-ui) n'ont pas besoin d'être reconstruits, une seule commande suffit pour passer aux trois polices de rôle :

node scripts/apply-fonts.mjs --project <dossier-projet>

Il fait cinq choses : copie les polices dans assets/fonts/, intègre @font-face dans le <style> de <template> (ceux dans seront perdus par le cadre de capture de scène), verrouille Inter pour les conteneurs .row/.cap/.tag, encapsule les variables nues x/y/k/S dans le texte en <i> (un sélecteur CSS pur ne peut pas cibler du texte nu, c'est la raison la plus fréquente pour laquelle « on a changé la police mais ça n'a pas pris »), et change le font-family des SVG en 'Termes', serif et met x/y/k en italique. Les symboles mathématiques utilisent calc(1em + 2px) pour compenser la contraction visuelle des empattements par rapport au sans-empattement. Idempotent, le relancer n'ajoutera pas de doublons.

Après la modification, exécutez comme d'habitude : lint → verify → render, vous devez re-rendre, la police ne s'appliquera pas à l'ancienne vidéo finale.

X. Fichiers de référence

Fichier	Quand le lire
references/pipeline.md	Première réalisation, ou pour expliquer les quatre étapes à quelqu'un
references/math-rules.md	Avant d'écrire une formule ou une conclusion
references/visuals.md	Pour déterminer les couleurs, tailles de police, cartes, mise en page des formules
references/prompts.md	Pour compléter par des questions, écrire un storyboard, apprendre à quelqu'un comment dire la première phrase
references/revisions.md	L'utilisateur donne son avis, ou pour expliquer au groupe pédagogique ce qu'est une « révision en dix fois »
references/qa.md	Pour chaque cycle d'auto-vérification, décider si une vidéo peut être livrée
references/two-tracks.md	Besoin de narration / musique / mains / cartes / personnages, passage à la voie B
assets/project-template/	Copié par init-project.mjs lors de la création du projet, ne pas modifier manuellement
assets/gsap.min.js	Copié dans le répertoire assets/ du projet lors de la création du projet