kbohara315/what-if-animation

Animation What If

Une ligne de sujet, un épisode fini de 15 à 25 secondes. Chaque image est un SVG écrit par Claude (rendu par Remotion) ; la voix et le son viennent d’ElevenLabs. Deux exemples sont livrés dans studio/src/episodes/, tous deux prêts à rendre : rewind (« Et si vous pouviez rembobiner 10 secondes ? », la preuve de concept : les plans joués à l’envers comme pouvoir) et copy-paste (« Et si vous pouviez copier-coller n’importe quoi ? », le premier cycle complet de la compétence : une nouvelle cuisine, un schéma pour le temps scientifique, un cliffhanger en noir). Lisez celui qui se rapproche le plus de votre sujet avant de commencer.

Fichier	Contenu
references/formula.md	La formule What If en sept temps, le format 15-25 s, les règles du script, le choix d’un sujet
references/look.md	Le style mesuré, le rythme, le vocabulaire des plans, et les listes de vérification du storyboard et de l’animation
references/kit.md	Les blocs de construction : moteur, casting, décors, kit de pièces, lumière, UI, looks, et comment ajouter chaque élément
references/sound.md	Écrire les événements sonores, les prompts, les niveaux, les coûts
references/traps.md	Tout ce qui a fait perdre du temps sur les deux exemples
studio/	Le projet Remotion : copiez-le une fois, puis chaque épisode y vit
scripts/	voix, plan, vignettes, storyboard, sfx, vérif-mix, grille-animation, master (Python 3.9+ et Node)

Règles

• Personnages originaux uniquement. Pip (le héros, look B) et Mo (son ami) sont à nous, ainsi que la sœur, la maman et le costume sur le rig. Jamais le héros d’une chaîne, et rien qui ressemble à un personnage de dessin animé célèbre : vérifiez chaque nouveau look sur la fiche de casting (le premier chapeau de Mo a été abandonné parce qu’il ressemblait à un autre).
• Histoires originales. La formule est partagée ; l’épisode n’est celui de personne d’autre. Ne refaites pas le titre d’une chaîne.
• Ne prétendez jamais que les chaînes virales sont faites avec Claude ou tout autre outil. Personne n’a dit comment elles sont faites.
• Clés par nom uniquement. ELEVENLABS_API_KEY, depuis l’environnement ou un .env au-dessus du studio. Ne jamais imprimer, coller ou coder en dur une clé.
• Signalez les crédits ElevenLabs de chaque exécution : les scripts les enregistrent dans out/<slug>/costs.json et master.py les totalise dans report.json. Le coût de la voix est lu depuis l’historique du compte (exact) ; les clips sonores n’y apparaissent pas, donc leur coût vient du compteur du compte, qui peut être en retard : relisez-le avant de faire votre rapport. Dites le nombre quand vous remettez l’épisode. L’exécution copy-paste a coûté 152 crédits (78 pour la voix, 74 pour 12 nouveaux clips).
• Storyboard avant animation. Aucun rendu vidéo tant que les vignettes n’ont pas passé l’auto-vérification (étape 5) et, quand la personne est dans la boucle, qu’elle a vu le storyboard.
• Chaque fait est réel. Un nombre dans le script est calculé et sourcé dans le champ science de l’épisode d’abord.

Installation (une fois par machine)

Nécessite Node 18+, ffmpeg et ffprobe dans le PATH, Python 3.9+ avec numpy et Pillow, et une clé ElevenLabs.

cp -r <skill>/studio ./what-if-studio && cd what-if-studio && npm install

Tout ce qui suit s’exécute depuis ce dossier studio ; <skill> est le dossier de cette compétence. Pour travailler hors ligne ou avec votre propre marque, placez une police d’affichage dans public/fonts/ et définissez titleFont dans src/studio.config.ts (le titre par défaut, Bricolage Grotesque, et les polices d’interface se chargent depuis Google Fonts au moment du rendu). Pour mettre à jour un studio existant vers un moteur plus récent, copiez <skill>/studio/src/engine par-dessus son src/engine.

Le pipeline

Travaillez les étapes dans l’ordre. Chacune se termine sur quelque chose que vous regardez avant la suivante.

1. Script

Lisez references/formula.md. Cherchez d’abord le postulat sur YouTube : si une chaîne What If a déjà cet épisode exact, changez le pouvoir ou la règle. À partir de la ligne de sujet, décidez le mot du pouvoir, sa règle, trois démonstrations escaladantes et le tournant (un fait réel avec un nombre). Écrivez src/episodes/<slug>/episode.json avec id (PascalCase, le nom de la composition), slug, topic, title (deux lignes), script (une entrée par temps) et science (chaque fait : l’affirmation, le calcul, la source). 45 à 65 mots. Lisez-le à voix haute au rythme : chaque ligne doit être une image.

2. Voix

python <skill>/scripts/voice.py <slug>

Une prise ElevenLabs avec horodatages des caractères (la prise de 356 caractères de copy-paste a coûté 78 crédits), puis les pauses coupées au rythme du genre : public/<slug>/voice.wav et src/episodes/<slug>/words.json. Vérifiez la durée (15-25 s) et les horodatages des mots qu’il imprime. Ajustez les pauses avec gaps dans episode.json et relancez : la prise est mise en cache, donc gratuite. Changez un mot et il rappelle l’API.

3. Liste de plans

Concevez un plan par image du script (généralement 9 à 14), en variant la taille et l’angle à chaque coupe (large, insert, moyen, gros plan, champ-contrechamp, plongée, contre-plongée ; voir references/look.md). Ajoutez à episode.json :

• shots : { "id": "S1", "size": "medium", "set": "kitchen", "key": 14, "note": "ce qu’on voit" } (key est l’image de l’horloge du plan que le storyboard montre)
• edit : { "shot": "S1", "at": "cookie" } par coupe, indexée sur le mot où elle tombe (plan.py liste les formes de repère ; reverse, from, to et look pour les pouvoirs qui tordent l’horloge d’un plan)
• fx : flashs et secousses d’une image, { "at": "S3+2", "kind": "flash" }

python <skill>/scripts/plan.py <slug>

Il écrit timeline.json et out/<slug>/shotlist.md et imprime le rythme. Visez plus de 27 coupes par minute dans l’ouverture et aucun plan statique de plus d’environ 3 s ; corrigez ce qu’il signale avant de dessiner quoi que ce soit.

4. Storyboard

Lisez references/kit.md pour les blocs de construction. Écrivez src/episodes/<slug>/shots.tsx, un composant par plan, chacun une fonction pure de son horloge t (copiez les motifs des deux exemples dans shots.tsx), et index.tsx (l’épisode et son look de pouvoir), puis ajoutez l’épisode à src/episodes/index.ts. À cette étape, chaque plan n’a besoin d’être correct qu’à son image key. Quand un sujet nécessite un lieu que la bibliothèque n’a pas, construisez-le avec le kit de pièces et ajoutez-le à src/engine/sets/ (et à la copie de la compétence) pour que le prochain épisode l’ait, comme l’exécution copy-paste l’a fait avec la cuisine et le schéma. Un nouveau personnage ou costume : ajoutez le look, puis vérifiez-le sur la fiche de casting (npx remotion still src/index.ts Cast out/cast.png).

npx tsc --noEmit
node <skill>/scripts/stills.mjs <slug>
python <skill>/scripts/board.py <slug>

out/<slug>/storyboard.jpg : une vignette légendée par plan.

5. Auto-vérification des vignettes

Regardez le storyboard, puis ouvrez chaque vignette dans out/<slug>/board/ en taille réelle, et exécutez la liste de vérification du storyboard dans references/look.md honnêtement, plan par plan. Notez ce qui échoue, corrigez, re-rendez juste ces plans (stills.mjs <slug> S3 S7), reconstruisez la feuille et regardez à nouveau. Répétez jusqu’à ce que ça passe. Consultez references/traps.md pour l’échec que vous voyez avant d’inventer une correction. Si la personne est dans la boucle, montrez-lui le storyboard maintenant et prenez ses notes avant d’animer.

6. Animer

Amenez chaque plan à la vie depuis sa pose clé : poseAt avec anticipation, tenues et dépassement, faceAt pour les expressions, mouvements de caméra avec kf, le look du pouvoir, les fx. Rendez ensuite un brouillon et vérifiez l’animation :

python <skill>/scripts/master.py <slug>
python <skill>/scripts/motiongrid.py <slug> S2 S5
node <skill>/scripts/stills.mjs <slug> --frames 120 240

Lisez les grilles comme un flipbook en regardant la liste de vérification de l’animation dans references/look.md ; corrigez et re-rendez jusqu’à ce que ça fonctionne.

7. Son

Lisez references/sound.md. Ajoutez sound à episode.json : les clips (prompt et durée), un événement par action visible indexé sur son plan, les ambiances par lieu, le tapis musical et les niveaux. Vérifiez ce que la bibliothèque a déjà, puis générez :

python <skill>/scripts/sfx.py <slug> --dry
python <skill>/scripts/sfx.py <slug>

Il imprime les crédits utilisés et définit les volumes des pistes dans timeline.json. Vérifiez ensuite que chaque mot reste clair :

python <skill>/scripts/mixcheck.py <slug>

Il liste les moments, pendant qu’un mot est prononcé, où les effets ou la musique se trouvent à moins de 3 dB de la voix. Un coup qui illustre un mot tombe dans la pause juste après, jamais dessus ; un tapis (un bourdon, un drone) sous une phrase clé descend ; si la plupart de la piste écrase la voix, baissez sfx_lu. Relancez sfx.py et la vérification jusqu’à ce qu’il ne reste que des chevauchements volontaires (un boom de titre, un tournant).

8. Master et remise

python <skill>/scripts/master.py <slug>

Rend, amène le mix à -14 LUFS avec des pics sous -1 dBTP, et écrit out/<slug>/report.json (durée, volume, rythme, crédits). Regardez le fichier final une fois avec le son. Remettez out/<slug>/<slug>-final.mp4 et out/<slug>/storyboard.jpg, avec la durée, les crédits ElevenLabs utilisés, et tout ce que vous amélioreriez encore.

Où vit un épisode

Chemin	Quoi
src/episodes/<slug>/episode.json	Tout ce que vous écrivez : script, science, plans, montage, fx, son
src/episodes/<slug>/shots.tsx, index.tsx	Le dessin : un composant par plan, le look du pouvoir
src/episodes/<slug>/words.json, timeline.json	Écrits par voice.py et plan.py (sfx.py ajoute les volumes)
public/<slug>/	voice.wav, sfx.wav, music.wav
out/<slug>/	Vignettes du storyboard, storyboard.jpg, shotlist.md, grilles d’animation, rendus, costs.json, report.json
library/sfx/	Chaque clip sonore généré, partagé par tous les épisodes