Kalem

Kalem : chaque scène a son propre crayon

Ce skill s'exécute depuis la racine du dépôt (claude s'ouvre dans le dossier du repo). Tous les chemins sont relatifs à la racine du repo. Une nouvelle vidéo est créée sous projets/<nom>/.

Les vidéos faites avec un seul moteur se ressemblent toutes. Ce skill divise la vidéo en scènes, examine CE QUI SE PASSE À L'INTÉRIEUR de chaque scène et choisit le meilleur moteur pour la dessiner. Le moteur est un crayon : un même dessin rendu au crayon à papier et à l'aquarelle donne des résultats différents.

Ce qu'il y a dans la scène → quel moteur

Dans la scène...	Moteur	Raison
Traits dessinés à la main, lignes qui se tracent, esquisses, mouvement de crayon	Paper.js	Le moteur qui rend les traits les plus doux et naturels. Uniquement pour le travail au crayon.
Personnage, marche, lever de bras, transformation d'une forme en une autre	Canvas brut (votre propre code de dessin)	Contrôle total sur le mouvement et la forme.
Explosion, lumière, éclat, poussière, des milliers de petites particules	PixiJS	Anime des milliers de particules sans ralentir.
Texte à l'écran, chiffres, compteur, fiche d'information, montage d'actualités	HyperFrames (HTML + GSAP)	Le plus propre pour les animations de texte et d'information.
3D réaliste : caméra qui tourne, lumière, ombre, machine	Three.js	Vrai 3D dans le navigateur.
Formule, graphique, schéma, mathématiques	Manim (Python)	L'outil de 3Blue1Brown. Utiliser Text s'il n'y a pas de LaTeX.

Les assistants ne dessinent pas une scène, ils aident à l'intérieur d'un moteur :

Tâche	Assistant
Objets légers qui tombent, basculent, rebondissent	Matter.js
Objets lourds qui glissent, s'empilent	Rapier
Transition de scène à scène (125 transitions prêtes, page tournée = BookFlip)	gl-transitions (commun/transition.html)
Quelque chose qui arrive à l'écran en rebondissant comme un arc	Anime.js
Confettis, étoiles, pluie d'emojis	tsParticles
Réduire un modèle 3D	glTF-Transform
Effet sonore verrouillé sur l'image (clic, bruissement, impact)	Tone.js (audio/audio.html)

Ce tableau a été établi selon le goût d'une personne : 20 outils ont été testés sur la même scène, regardés et notés. Faites vos propres expériences et modifiez le tableau selon vos goûts.

Flux

1. Diviser en scènes. Séparez la vidéo décrite par l'utilisateur en 4 à 8 scènes. Pour chaque scène, écrivez une phrase en langage courant et choisissez le moteur, puis présentez-le à l'utilisateur sous forme de tableau : "La scène 1 contient un dessin qui se dessine tout seul → il faut le faire avec Paper.js." Pas de compression technique (pas "un nombre qui court" mais "dans la scène, il y a un nombre qui augmente"). Une scène = un moteur. Si une scène contient plusieurs choses, le moteur principal est déterminé par l'élément dominant à l'écran, les tâches secondaires entrent comme assistants.
2. Écrire les fichiers communs. <projet>/temps.json (fps, dimensions, nombre d'images de transition, liste des scènes et leurs durées) et <projet>/BRIEF.md (langage visuel commun, faits, description de chaque scène, contrat de livraison). Exemple : exemple/machine-volante/ (si existant).
3. Générer les scènes. La texture du papier, les couleurs et les polices sont définies une fois dans BRIEF, chaque scène les utilise ; l'aspect cohérent de la vidéo en dépend. Chaque scène dans son propre dossier : <projet>/scenes/<NN-moteur>/ → executer.sh, video.mp4, controle.png, evenements.json. Les scènes sont indépendantes, peuvent être produites en parallèle (un agent par scène).
4. Contrôle. Examinez le controle.png de chaque scène et quelques images complètes : le texte déborde-t-il, y a-t-il une image vide, les couleurs respectent-elles le langage commun, la première image est-elle pleine.
5. Assembler. python3 assembler.py <projet> [--transition BookFlip] → transitions + son → <projet>/sortie.mp4. Si vous voulez montrer au spectateur quel moteur a dessiné chaque scène, ajoutez --etiquette : dans temps.json, ajoutez à chaque scène "etiquette": ["Paper.js", "trait de crayon qui se dessine tout seul"] (ligne optionnelle pour l'assistant), pour la première transition "etiquette_transition". Une petite carte couleur papier quadrillé est affichée en bas à gauche de chaque scène.
6. Audit. Donnez à un nouvel agent uniquement les images de contrôle et le BRIEF, demandez : "Le spectateur dirait-il 'ça n'a pas de sens' ici ?" Corrigez les problèmes trouvés, puis présentez à l'utilisateur.

Contrat technique

• Le temps vient du numéro d'image. Pas de Math.random, aléatoire ensemencé. Deux exécutions doivent donner la même image.
• Moteurs navigateur : la page appelle pilote(install, image, IMAGE) dans /commun/pilote.js, image(f) retourne un canvas dessiné. Capture : python3 commun/capture.py <chemin de la page> <dossier des images> [largeur hauteur], puis ffmpeg pour mp4.
• evenements.json : [{"image": 12, "type": "ligne|clic|impact|chute|bruissement|eclat|aile|compteur", "puissance": 0-1}]. Même image que dans le visuel. Le son est généré à partir de là, donc son et image ne dérivent jamais.
• Avant de capturer la page du navigateur, testez le JS avec node --check ; en cas d'erreur de syntaxe, la page ne se charge pas et le captureur s'arrête après 60 s.
• Manim : si .venv-manim/bin/python existe à la racine du repo, l'utiliser (MANIM_PY), si pas de LaTeX, utiliser Text au lieu de MathTex.
• Pas de dessin de texte avec ffmpeg (drawtext) ; le texte est dessiné à l'intérieur du moteur.
• Lettres turques (Ç Ğ Ş İ Ö Ü) complètes ; utiliser toLocaleUpperCase('tr') pour les majuscules.
• Première image pleine : pas d'ouverture depuis le noir. Les ~15 dernières images sont calmes (la transition s'applique par-dessus).
• Pas d'éclair/flash soudain : le saut de luminosité entre images reste faible.
• Pour une vidéo verticale (Reels/Shorts), ne pas placer d'éléments significatifs dans les ~250 px du haut, ~420 px du bas, ~150 px de droite.

Installation

./installation.sh installe les paquets des moteurs (nécessite Node 20+, Python 3, ffmpeg, Google Chrome ; Manim est optionnel : pip install manim).