Th3warhawk/cartoon-audio-short

Court métrage cartoon : idée → script → voix-off → MP4 final

L'aspect : personnages cartoon 2D à tête de haricot ("cartes" dessinées sur canevas avec contours prune) dans un monde 3D coloré avec contours à l'encre noire, textures peintes, profondeur de champ et caméras glissantes. La sortie est en 1080x1920, 30 ips, exactement aussi longue que la voix-off. La voix de l'utilisateur reste inchangée. La musique et les effets sonores sont synthétisés et se situent à 50 % du niveau vocal. Déjà testé sur "Le soldat qui n'est jamais parti" (19,7 s, 8 plans).

Règles

• Les histoires, personnages et plans sont toujours originaux. Ne recréez jamais plan par plan la vidéo d'un autre créateur. Proposez plutôt une vision originale de la même idée.
• Pas de personnes réelles nommées comme personnages, ni de mascottes ou logos de marque.
• Pas de sous-titres sauf demande de l'utilisateur. Le texte diégétique (un message gravé, un panneau) est autorisé, et il doit être lisible (non inversé).
• Ne modifiez jamais le rythme de la voix. L'image est calée sur elle, et chaque réaction visuelle se produit 0 à 3 images avant le mot correspondant.
• Niveaux audio : la musique de fond est à 50 % du niveau vocal (−6 dB, RMS fenêtré). Les effets sonores sont à 50 % ou légèrement moins, avec des pics limités pour qu'aucun élément ne dépasse la narration. Mixez toujours avec mix.py, jamais manuellement. N'utilisez ni ducking ni compression qui modifieraient ce rapport ; seul un gain linéaire suivi d'un limiteur de crête est appliqué au mixage complet.
• Tenez l'utilisateur informé avec une liste de tâches. Envoyez une planche contact des images fixes avant le rendu long.

Étape 1 : Accueil (toujours en premier)

Si un fichier audio est déjà joint, passez directement à l'Étape 4. Si un script a également été fourni, utilisez-le pour le minutage. Sinon, posez une seul question (ou texte brut si cet outil est indisponible) : "Par où souhaitez-vous commencer ?"

• Voix-off prête : demandez à l'utilisateur de la télécharger, ainsi que le texte du script s'il l'a (le script permet un minutage précis). Passez à l'Étape 4 à réception.
• J'ai un script, besoin de la voix-off : affinez le script selon l'Étape 3 si nécessaire, renvoyez-le avec des conseils d'enregistrement, demandez le fichier audio, puis passez à l'Étape 4.
• Besoin d'idées vidéo et d'un script : passez à l'Étape 2. Demandez également la durée cible si elle n'a pas été précisée. La valeur par défaut est de 20 à 30 s ; 45 à 60 s est autorisé.

Étape 2 : 10 idées vidéo

Donnez exactement 10 idées en un seul message, numérotées, et demandez à l'utilisateur de répondre avec un numéro (ou "plus"). Chaque idée comprend :

• Titre (5 à 8 mots, suscitant la curiosité, ex. "Le soldat qui n'est jamais parti").
• Phrase d'accroche : la première phrase parlée, un paradoxe énoncé comme un fait ("Un homme a vendu la Tour Eiffel. Deux fois.").
• Le rebondissement en une ligne (le dénouement ironique qui termine la vidéo).
• Pourquoi ça s'anime bien : les 2-3 grands moments visuels (un effondrement, une révélation, une poursuite).
• Vrai ou légende : dites clairement s'il s'agit d'un récit historique documenté, d'une version controversée ou d'un folklore.

Ce qui rend une idée "parfaite" pour ce format :

• Une histoire surprenante avec une cause et un effet physiques que l'on peut montrer.
• Un personnage ordinaire clair, des enjeux qui montent, et un rebondissement dans la dernière ligne.
• Un décor qui peut être construit à partir de formes 3D simples et de cartes cartoon (villages, ponts, bateaux, châteaux, déserts, laboratoires, palais).
• Mélangez les 10 idées à travers époques et thèmes : antique, médiéval, années 1800, moderne, science, animaux, inventions, désastres, lois étranges, accidents heureux.
• Pour tout ce qui est présenté comme vrai, vérifiez les faits clés par une recherche web avant de proposer l'idée. Ne présentez pas une légende virale comme un fait. Si l'utilisateur la veut quand même, encadrez-la comme "la légende dit".
• Pas de personnes réelles vivantes comme objet de plaisanterie, rien de graphique ni de politique.

Étape 3 : Script (après le choix de l'utilisateur)

Écrivez uniquement la narration (pas d'indications scéniques dans le texte parlé), à un rythme d'environ 3,7 mots/s : 20 s ≈ 75 mots, 30 s ≈ 110, 60 s ≈ 220. Formule :

1. Accroche (phrase 1, sans préambule) : le fait absurde.
2. Contexte en 1-2 lignes : quand, où, qui, un détail concret.
3. Montée en tension, 2-4 temps, chacun plus fort. Les autres doutent ou se moquent. Utilisez une blague par exagération.
4. Mystère ou tournant : "Mais quand..." / "Vous voyez," introduit le mécanisme réel, souvent avec une analogie quotidienne.
5. Rebondissement / chute : court, ironique, et ce sont les derniers mots de la vidéo. Utilisez un anglais parlé simple, des contractions, des phrases de 8 à 15 mots et les nombres écrits en toutes lettres. Ne décrivez jamais ce que le spectateur voit déjà.

Répondez ensuite avec :

• Le script dans un bloc copiable, avec le nombre de mots et la durée estimée.
• Un plan visuel d'un paragraphe (les plans que vous allez animer).
• Des conseils d'enregistrement : une voix de narrateur stable et chaleureuse ; ElevenLabs fonctionne bien (voix de narrateur grave, vitesse environ 1,05-1,1, stabilité environ 45-55 %). Mp3 ou wav conviennent. Laissez des pauses naturelles en fin de phrase. Exportez sans musique.
• La demande : "Téléchargez la voix-off lorsqu'elle est prête et je réaliserai la vidéo complète." Gardez le texte final du script. Il pilote le minutage à l'Étape 4, donc aucune reconnaissance vocale n'est nécessaire. Si l'utilisateur enregistre une version modifiée, demandez le texte final.

Étape 4 : Construire la vidéo (après le téléchargement de la voix-off)

Faites tout à partir d'ici sans vous arrêter. Ne demandez que si le minutage ne peut pas être résolu.

4.0 Obtenir la boîte à outils

La boîte à outils est livrée dans ce dossier de compétence sous kit/ (moteur, outils, exemple de travail, ainsi que three.js r160 fourni et la bibliothèque toon.ts Pen de github.com/mromidev/claude-animated-shorts, tous deux sous licence MIT). Localisez le dossier avec find / -name SKILL.md -path "*cartoon-audio-short*" 2>/dev/null et traitez son kit/ comme en lecture seule.

Exécutez ensuite bash <skill>/kit/tools/setup.sh ~/shorts/<slug>. Il copie le moteur et les outils dans le projet, installe le three.js fourni, supprime les types de toon.ts avec Node 22 module.stripTypeScriptTypes, et lie Playwright. Aucun réseau n'est nécessaire. Si les fichiers fournis sont manquants, il utilise npm ou un clone git.

• Prérequis : Node 22.6+, Python 3 avec numpy + Pillow, ffmpeg, et Playwright avec Chromium (npm i -g playwright && npx playwright install chromium si manquant).
• Si les registres de paquets sont bloqués, git via GitHub fonctionne généralement. Ne désactivez jamais TLS et ne contournez pas le proxy.
• Chromium : utilisez le navigateur Playwright préinstallé avec --use-angle=swiftshader --enable-unsafe-swiftshader --ignore-gpu-blocklist. Cela donne un WebGL CPU à environ 3-10 s par image.

4.1 Minutage

Exécutez python3 timing.py voice.mp3 script.txt --out work.

• Avec whisper ou faster-whisper installé, il utilise les horodatages des mots.
• Sinon, il aligne les phrases du script (divisées aux signes de ponctuation) sur les segments de parole détectés par silence, avec une programmation dynamique qui fait correspondre les syllabes à la durée et pénalise les fins de phrase à l'intérieur d'un segment et les longues pauses à l'intérieur d'une phrase.
• Sans ASR et sans script, demandez le script. Claude ne peut pas entendre l'audio.
• Vérifiez work/phrases.json : les pauses doivent tomber en fin de phrase. Nombre total d'images = round(durée × 30).

4.2 Plan des plans (work/PLAN.md avant le code)

Faites une ligne par plan : images, mots, cadre, lumière, mouvement de caméra, personnages/poses/expressions, effets et signal SFX.

• L'image 0 est déjà l'image d'accroche.
• Généralement un plan par phrase. Fusionnez les toutes petites phrases dans le plan suivant.
• Illustrez chaque phrase littéralement. Les accessoires portent les blagues.
• Variez les tailles de plan : accroche en plan moyen rapproché → grand plan de révélation → plan à deux → gros plan d'insertion sur l'objet clé → gros plan de réaction → plan d'ensemble pour le dénouement.
• Utilisez la lumière pour les temps : jour pour le normal, doré pour le déclin ou le drame, bleu nuit pour l'explication. Un saut dans le temps obtient un flash blanc de 6 images.
• La ligne de rebondissement obtient un sting (la musique s'arrête, coup bas, zoom avant avec roulis). Le dénouement visuel du dernier plan tombe sur le mot final.

4.3 Monde (web/main.js)

Conservez les sections du moteur : matériaux toon, encre, add/tbox, ciel, lumières, cartes, cibles de rendu/post, applyLight, drawActors, swapForNd, renderFrame. Remplacez le monde exemple entre // ---------- world ---------- et // ---------- cards ----------, ainsi que les parties de l'histoire de worldState().

• Construisez à partir de primitives avec des textures peintes sur canevas (paint.js : planches, poutres, bois pourri, pierre, mousse/lierre, herbe, terre, plâtre, tuiles, marbre, bannières, texte gravé). Écrivez de nouveaux peintres dans le même style plat avec coutures sombres.
• Utilisez tbox pour une densité de texel constante, un dégradé toon en 2 étapes, et un brouillard de couleur horizon.
• Arrière-plan : collines (sphères à moitié enterrées), montagnes (cônes + calottes neigeuses), cyprès/pins, maisons lointaines, panneaux publicitaires nuageux peints.
• Les éléments de décor (effondrements, chutes, portes) sont des groupes pivots pilotés par une progression 0..1 de worldAt(f), avec des parties lissées et décalées.
• Le texte diégétique courbe utilise des UV plans. Vérifiez qu'il n'est pas inversé.

4.4 Casting (web/roman.js → web/toon.js)

• romanFront(p, outfitKey, opts) dessine sur un canevas de design 600x1000 avec les semelles à y=975. La carte mesure 2,25 m de haut, donc 1 unité = 0,00225 m.
• Ajoutez des tenues à OUTFITS (tunique/cape/armure/casque/cheveux/bonnet/barbe/tablier/robe/toge) et de nouveaux couvre-chefs et accessoires dans le même style.
• Poses de bras : pendre, lancer, pointer, lever, agiter, hanche, ventre, tempe (+tourbillon), soulever, attraper (+lever), joue, bouclier, croiser, pouce.
• Expressions : l'ensemble FACE de toon.ts plus ronfler, têtu, plisser. Étendez FACE si besoin.
• Reconstruisez après les modifications avec cat web/toonbase.js web/roman.js > web/toon.js. Rendez une feuille de test des personnages avant d'utiliser de nouveaux designs.
• Les panneaux publicitaires tournent uniquement sur le lacet, reçoivent une tâche de contact et une ombre testée alpha, et ne sont jamais encrés par le passage monde.
• Construisez les clés des cartes à partir de valeurs arrondies avec q() (afin que le canevas ne se redessine qu'en cas de changement visible).
• Une partie détachée (par exemple un casque soulevé) est sa propre carte, alignée avec headCenter(seed) : y = DECK + (partY − hc) × 0,00225.

4.5 Mouvement : fluide et vivant (web/motion.js)

• Caméras : camFromKeys(keys, f, {kicks}). Utilisez des glissements smootherstep (18-45 images), easeOut pour les révélations et les mouvements rapides, et des points de passage path (Catmull-Rom) pour les mouvements courbes. Chaque maintien bouge légèrement et rien n'est statique plus de 4 images. Utilisez 3-5° de roulis sur le drame et des tremblements-retournements de 7 images sur les impacts.
• Continuité : préférez les mouvements continus (reculer d'un gros plan vers le plan large, changement de mise au point, grue traversant le pont, zoom avant sur un objet). Coupure nette uniquement sur les sauts de lieu ou de temps, avec un flash.
• Les personnages ne gèlent jamais : appliquez idle(f, seed) à chaque carte, blinkAt pour les clignements, et hochements de tête sur les mots accentués.
• Actions : anticipation → dépassement back → stabilisation spring. Un coup de pied est une plongée de 2 images + bouffée de poussière + coup. Les rires sont une inclinaison + hochement alternés.
• Mouvement secondaire : vagues de tissu de bannière, feuilles/poussière/gouttelettes/Zzz cartes d'effet, eau courante. Quelque chose bouge toujours.
• Marches : walk() donne la distance + la phase de pas. Pieds plantés, hochement 3-7 %.
• Objectif : profondeur de champ sur les gros plans et les plans moyens (cercle de confusion 8-14 px), mise au point sur les yeux. Les plans larges sont nets. Les changements de mise au point prennent ~14 images.

4.6 Vérification du rendu (avant le rendu complet)

Rendez des images fixes au milieu de chaque plan ainsi qu'aux transitions et actions clés : node render.mjs stills/a "5,40,…" puis python3 sheet.py stills/a stills/sheet_a.jpg. Regardez la planche et corrigez ces pièges :

• Cadre vertical étroit : demi-largeur horizontale = d·tan(champ horizontal/2), avec champ horizontal = 2·atan(tan(champ vertical/2)·0,5625). À 4 m et champ 40°, cela donne ±0,8 m, donc placez les personnages en profondeur.
• Balustrades ou poteaux devant les visages (caméra à l'intérieur du garde-corps ou ~2,5 m de haut). Le chemin de la caméra à travers les maisons, les toits ou les buissons. Accessoires de premier plan à moins de ~2 m. Le héros caché derrière un pilier.
• Texte inversé. Une carte de partie détachée décalée dans le mauvais sens.
• Groupes de matériaux extrudés : 0 = capuchons, 1 = côtés+dessus.
• Encre manquante : déboguez la sortie des bords uniquement. Rayon d'encre ~2,5 px à 1080. Le ciel compte comme profondeur lointaine, pas une carte.
• Envoyez la planche à l'utilisateur avec un résumé d'une ligne par plan, puis lancez le rendu complet.

4.7 Son (audio.py → pistes → mix.py)

Réécrivez la table des signaux sonores pour l'histoire ; les synthés restent. audio.py écrit uniquement les pistes (music.wav, sfx.wav).

• Musique : une boucle courte de type marche (grosse caisse/caisse claire, basse pincée, nappe de cuivres). Elle s'arrête à la ligne de rebondissement, puis un bourdon grave continue.
• Effets sonores sur les événements (en images/30) : whoosh sur les grands mouvements, thunk sur les coups de pied, grondement+fracas sur les effondrements, grattement sur le métal, ting sur les révélations, sting sur le rebondissement, craquements, claquements, éclaboussures, ronflements, feuilles, ambiance aquatique.
• Mixez avec python3 mix.py voice.mp3 music.wav sfx.wav. Il règle la musique exactement à 50 % du RMS fenêtré de la voix (−6 dB) et les effets sonores à 50 % avec des pics limités à 0,7× le pic de la voix. Il imprime les niveaux mesurés : confirmez que la musique montre −6,0 dB par rapport à la voix et que les effets sonores sont à ce niveau ou en dessous.
• Verrouillez le minutage de l'image avant de faire le son. Tout changement de minutage signifie relancer audio.py et mix.py.

4.8 Rendu + finalisation

• Exécutez node render.mjs frames "0-<N-1>" avec Bash run_in_background, surveillé par une boucle Monitor qui signale la progression et détecte les erreurs ou la sortie du processus. RESUME=1 continue après une interruption. N'exécutez pas de Python lourd en même temps sur des petites machines.
• Exécutez bash finish.sh "Titre". Il applique un gain linéaire à environ −14 LUFS plus un limiteur de crête à −1 dBFS, encode en H.264 CRF 17 + AAC, exécute les contrôles de qualité d'image figée/noire et de volume sonore, et écrit out/qa_sheet.jpg. Examinez la planche. Les passages figés ≥0,4 s ou les images noires nécessitent une correction.
• Livrez le MP4 avec SendUserFile et quelques lignes sur ce que chaque plan montre. Proposez des sous-titres, des ajustements, ou l'idée suivante de la liste.

Pièges du moteur (conservés dans la boîte à outils ; conservez-les si vous reconstruisez)

• #include <fog_vertex> / <fog_fragment> sont sur leurs propres lignes.
• Le passage final écrit linearToOutputTexel(...) (les cibles de rendu sont en HalfFloat linéaire).
• Le passage normal+profondeur échange les matériaux par maillage : monde → normal/profondeur, cartes → masque testé alpha (rgb 0, a = profondeur), blobs/nuages/ciel cachés, eau → normale plate. Le brouillard et les ombres sont désactivés pendant.
• L'encre va sur le côté proche des sauts de profondeur uniquement. Les plis proviennent du produit scalaire des normales. Les voisins des cartes sont ignorés. L'encre s'estompe à ~140-520 m.
• Profondeur de champ : 48 échantillons avec un test CoC par échantillon (pas de débordement du premier plan).
• Le soleil vient de l'azimut/élévation par préréglage de lumière. La caméra d'ombre est centrée sur l'action de chaque plan.

Architecture (référence pour modifier la boîte à outils)

• web/index.html charge main.js (module ES) via un serveur HTTP local.
• main.js : moteur de rendu, matériaux toon, monde, cartes (plans 1200x2000 CanvasTexture, origine aux semelles), passe couleur (échantillons RT 4) → normal/profondeur → encre+étalonnage (saturation, gain/lift, …)

[Le reste du document a été tronqué pour la traduction.]