Vidéo explicative animée

Animateur

Vous créez de l'animation : des images dessinées qui bougent dans Remotion. Vous ne créez pas de séquences vidéo réelles.

Périmètre

• N'appelez pas Veo, Kling, Sora ou tout autre modèle texte-vers-vidéo dans cette compétence. Chaque image est composée dans Remotion à partir d'images, de SVG et de code.
• Si la demande nécessite des séquences réelles, des plans photoréalistes ou une bande-annonce de film, arrêtez-vous et dites que cette compétence ne peut pas le faire. Ne passez pas silencieusement à un modèle vidéo.

Les règles de goût

Chaque règle provient d'une version qui a été rejetée.

1. Scènes, pas de discussion. Montrez chaque point comme une scène mise en scène : les personnages agissent, les accessoires bougent, le lieu change. Deux têtes qui parlent sur un fond sont un résultat rejeté.
2. Dynamique. Bougez la caméra dans chaque plan. Changez souvent la taille du plan : plan large, plan moyen, gros plan. Coupez sur l'action. Aucun plan ne reste statique plus d'environ 4 s.
3. Personnages élégants. Habillez-les bien pour le cadre : une coupe parfaite, un beau tissu, un détail de bon goût. Jamais de personnes clipart génériques.
4. Finition professionnelle et décente. Cela doit ressembler à une animation de studio. Pas d'astuces, pas d'effets bon marché, pas de style mème.
5. Profondeur avant étendue. Un point bien montré vaut mieux que six points dans une liste. Si le sujet a plusieurs points, proposez une vidéo par point.
6. Deux voix dans un dialogue lorsque le sujet le permet : un personnage demande, l'autre répond. Demandez à l'utilisateur quelle voix joue chaque rôle. Ne clonez jamais la voix d'une personne réelle sans son consentement écrit.
7. Pour un modèle ou un processus, faites la coupe schématique. Ne demandez pas quelle coupe. Des formes SVG pures dans la palette de la marque, pas de figures ; la narration porte l'histoire. Une histoire sur des personnes reste une coupe avec personnages.
8. L'ambiance suit le sujet. Une application ludique donne une vidéo ludique : mouvement rebondissant, easing qui dépasse, cartes qui apparaissent. Un sujet sérieux reçoit un traitement sobre. Lisez le produit avant de choisir l'ambiance.

Où se trouvent les éléments

Quoi	Où
Répertoire du projet	~/explainer/<name>/. Remplacez la racine par EXPLAINER_ROOT. Un dossier par projet ; un aperçu et la vidéo complète sont deux compositions du même projet
Structure des dossiers	SCHEMA.md à côté de ce fichier. in/ entrées, assets/ masters, public/ entrées de rendu, work/ brouillon, out/ versions finales
Kit de démarrage	starter/ à côté de ce fichier : une composition Remotion minimale qui joue un storyboard, plus le kit de marque et les aides au mouvement
Scripts	scripts/ à côté de ce fichier. Exécutez-les depuis la racine du projet. new-project.sh copie le starter et les outils dans un nouveau projet
Génération de médias	adapters/ à côté de ce fichier, et ADAPTERS.md pour le contrat. Définissez GEN_IMAGE, GEN_SPEECH, GEN_SFX, CUTOUT et GEN_MUSIC sur vos propres commandes
Profils de marque	brands/<name>/ à côté de ce fichier. brands/example/ est un profil neutre à copier

Définissez les chemins des outils une fois par shell ou dans le .env du projet :

SKILL=~/.claude/skills/explainer-video
export GEN_IMAGE="python3 $SKILL/adapters/gen-image.py"
export GEN_SPEECH="python3 $SKILL/adapters/gen-speech.py"
export GEN_SFX="python3 $SKILL/adapters/gen-sfx.py"
export CUTOUT="python3 $SKILL/adapters/cutout.py"
export GEN_MUSIC="python3 $SKILL/adapters/gen-music.py"

Procédure

1. Scénario et storyboard

1. Écrivez storyboard.json. Pour chaque beat, écrivez le locuteur, la réplique, la scène (lieu, action, accessoires), la taille du plan et le mouvement de la caméra. Voir SCHEMA.md pour les champs des beats.
2. Assurez-vous que chaque point a au moins une scène qui le montre sans mots.
3. Demandez à l'utilisateur si la vidéo a besoin de sous-titres. Si oui, demandez quel type : incrustés dans l'image, ou un fichier .srt à côté de la vidéo. Faites les sous-titres à partir du script vocal, pas d'une transcription : le script a l'orthographe correcte.
4. Demandez à l'utilisateur quelle voix joue chaque rôle. Proposez une voix gratuite pour les aperçus et une voix payante et expressive pour le montage final.
   • Voix gratuite d'abord. Faites sonner chaque aperçu et la première coupe complète avec la voix gratuite. Gardez le genre du rôle. Générez la voix payante seulement après que l'utilisateur approuve la coupe avec la voix gratuite. Gardez le tag de chaque beat dans le storyboard pour le passage payant.
5. Demandez à l'utilisateur quelle marque la vidéo utilise : un profil de brands/<name>/>, le style propre du projet, ou aucun. Une vidéo sans marque évidente nécessite quand même la question. Écrivez la réponse dans in/brief.md`, de sorte que les cartes et la palette en proviennent dès le premier rendu.
6. Envoyez le storyboard à l'utilisateur. Ne générez pas d'images avant qu'il ne l'approuve.

2. Personnages

1. Écrivez une description fixe par personnage : visage, cheveux, corps, vêtements. Copiez-la mot pour mot dans chaque prompt d'image. Gardez-la dans in/characters.md.
2. Générez le dessin de base avec gen-image.py sur un fond plat et uni. Ajoutez "no ground shadow, no glow" au prompt.
3. Générez les poses de jeu à partir de cette base avec --input : marcher, s'asseoir, pointer, réagir, faire un geste, se tourner. Une scène a besoin de poses, pas seulement d'une figure debout.
4. Fabriquez les états de la bouche (fermée, ouverte, grande ouverte) et le clignement. Collez uniquement la région modifiée dans la base. N'utilisez jamais une image entièrement éditée : le visage dérive.
5. Découpez chaque pose avec cutout.py. Utilisez isnet-anime pour les dessins et u2net pour les photos.
6. Placez toutes les poses sur le même canevas de 1024 px, de sorte qu'un changement de pose ne nécessite pas de décalage.
7. Faites une planche contact de toutes les poses (ImageMagick montage). Ouvrez-la et cherchez une pose qui diffère par le visage, les vêtements ou les proportions. Régénérez cette pose. Faites au maximum 3 tentatives par image.

Personnes réelles : ne dessinez ni n'animez une personne réelle sans son consentement. Demandez d'abord.

• Découpez le visage avec cutout.py --model u2net. Ne le mettez pas dans un cercle.
• Des cheveux clairs sur un fond clair disparaissent dans le découpage. Si cela se produit, utilisez une autre photo.
• Faites fondre le cou et les épaules sous le menton, et dessinez le cou avec le corps. Une photo recadrée a un bord dur à cet endroit.
• Dessinez les corps en code (jointures SVG). Ainsi chaque pose est exacte et aucun visage ne peut dériver.

3. Scènes et accessoires

1. Générez chaque lieu comme un décor (--size 1536x1024) dans le même style que les personnages, sans personnes.
2. Générez les accessoires qui agissent comme des couches de découpage séparées : un téléphone, un billet, une tasse, un rideau.
   • Regardez chaque écran, appareil et emballage pour les marques et les textes. Un prompt "pas de logos" ne les empêche pas. Corrigez une marque avec ImageMagick. N'utilisez pas une édition image-à-image : elle supprime la mauvaise partie et garde la marque.
3. Générez des couches de premier plan pour la parallaxe là où elle aide : des rangées de sièges, une balustrade.
4. Si le projet a un profil de marque, utilisez-le. Prenez la palette de brand.css, le logo et la devise de images/, et les polices de fonts/. N'inventez pas de couleurs de marque. Lisez le NOTES.md du profil pour sa forme de marque.
5. Si le projet n'a pas de graphisme dédié pour une icône, utilisez une icône MDI (@mdi/js, un chemin 24×24). Ne dessinez pas d'icône à la main et n'utilisez pas d'emoji. Si le site web du projet met déjà une icône MDI sur un élément, utilisez la même icône dans la vidéo.

4. Voix

1. Générez chaque réplique avec gen-speech.py et la même --voice par locuteur.
   • Jusqu'à ce que l'utilisateur approuve la coupe, utilisez la voix gratuite du même genre. Les notes ci-dessous sur les modèles payants s'appliquent au passage payant.
   • Exécutez scripts/regen-voices.py <model>. Il envoie une réplique à l'API seulement lorsque sa demande a changé (texte, voix, modèle, paramètres, ou un voisin du même locuteur), de sorte que les prises approuvées restent. Ne régénérez pas toutes les répliques pour en corriger une.
   • Pour relancer une réplique intentionnellement, ajoutez --fresh <beat or speaker>. Chaque prise est conservée dans assets/voice/takes/. Pour revenir à une prise antérieure, utilisez --restore <take>.
   • Un projet créé avant le cache n'a pas de voice_key par beat. Exécutez-le une fois avec --adopt, sinon la première exécution génère chaque réplique à nouveau.
   • Avec un modèle expressif, mettez une balise audio anglaise avant chaque réplique, par exemple [chaleureusement], et réglez les paramètres de stabilité, similitude, style et vitesse du modèle. Sans eux, la réplique sonne plate. Gardez la balise hors de line, car le sous-titre montre line : mettez-la dans le champ tag du beat et envoyez-la avant le texte.
   • N'utilisez pas de balises audio avec un modèle qui ne les documente pas. Il pourrait les prononcer.
   • Pour chaque voix, listez d'abord les noms, les mots étrangers et les codes de lettres. Une voix les lit comme le ferait sa propre langue, même avec un code de langue défini. Essayez d'abord une orthographe phonétique du mot, puis l'API inline. Faites trois prises par orthographe et une prise de contrôle, et laissez l'utilisateur choisir à l'oreille.
   • N'écrivez pas un son en majuscules. Une voix peut lire les majuscules comme des lettres individuelles. Écrivez plutôt le son comme un mot.
   • Une nouvelle prise déplace chaque mot. Calez les décalages d'image dans le beat (caméra, surbrillance, effets sonores) sur les débuts des intervalles de sous-titres, pas sur les images littérales. Après une nouvelle prise, obtenez les temps des mots à partir d'un passage de reconnaissance vocale et réinitialisez uniquement les débuts des intervalles.
2. Exécutez scripts/level-voices.py. Il nivelle chaque réplique par la sonorité de la parole. Le nivellement de crête n'est pas suffisant : les répliques peuvent s'étaler sur 6 dB.
   • Une version dans une autre langue : gardez la scène et générez une deuxième composition à partir de la même source. Donnez à la nouvelle langue son propre storyboard avec les mêmes identifiants de beat, son propre dossier de voix, ses enveloppes et sa coupure musicale (STORYBOARD, VOICE_DIR, MUSIC dans check-audio.py).
   • Nivellez les nouvelles voix au niveau de parole du mix approuvé, pas à la même cible.
3. Fabriquez les enveloppes de la bouche et regroupez-les avec scripts/gen-envelopes.mjs.

5. Animation dans Remotion

• Mise en scène : jouez chaque scène comme une action. Les personnages entrent, s'assoient, réagissent et utilisent les accessoires. Déplacez les accessoires sur leur propre couche. Une correction ajoute la partie manquante ; gardez l'action qui montre la cause.
• Caméra : poussez, panoramiquez ou suivez dans chaque plan. Utilisez la parallaxe entre le décor, les personnages et le premier plan. Serrez chaque mouvement de caméra pour que chaque couche qui doit remplir le cadre reste dedans à sa profondeur de parallaxe, rotation comprise. Une couche avec une profondeur < 1 bouge moins que la caméra : un zoom arrière ou un panoramique qui se termine décentré découvre le bord du cadre, et une bande du sol apparaît.
• Profondeur : mettez le sol et tout ce qui se tient dessus (chaises, personnes, accessoires) sur une seule couche à une seule profondeur. Deux profondeurs éloignent le sol et les pieds de la chaise sous chaque mouvement de caméra, et les chaises flottent. Un hochement de tête inactif fait pivoter le corps au-dessus de la ligne du siège, pas la chaise.
• Mouvement : utilisez des ressorts avec un petit dépassement. Utilisez l'anticipation avant un mouvement. N'utilisez jamais un échange brutal entre deux poses.
• Inactif : donnez à la respiration, au balancement et au clignement leurs propres périodes et phases.
• Bouche : pilotez-la à partir de l'enveloppe, avec un maintien minimum de 3 images (mouthStates dans le motion.ts du starter).
• Narrateur hors champ : montrez un orbe de forme d'onde qui suit l'enveloppe, pas le visage du narrateur (NarratorOrb.tsx dans le starter).
• Lumière : utilisez la lumière comme un outil narratif. Par exemple : les lumières de la maison s'éteignent, un écran de téléphone brille sur un visage.
• Transitions : choisissez-en une par coupe (raccord dans le mouvement, fondu, coupe nette). N'utilisez pas un seul fondu pour toutes les coupes.
• Un personnage reste un seul objet à travers une coupe. Lorsqu'un personnage passe d'un plan au suivant, transportez-le à l'écran de son ancien endroit vers son nouveau. Un personnage qui sort d'un côté et entre de l'autre est perçu comme un deuxième personnage.
• Un changement que le spectateur doit repérer a sa propre pause dans la voix. Divisez le beat et ajoutez 1,5 à 2 s de silence après celui-ci. Mettez en scène le changement dans cette pause : marquez l'ancien état, atténuez-le, fondu enchaîné, puis mettez en évidence le nouvel état sur la réplique suivante.
  • Placez la pause à une rupture de phrase, jamais à l'intérieur d'une phrase. Trouvez l'écart par niveau : prenez la plus longue séquence de fenêtres de 20 ms en dessous d'environ −38 dB (par rapport au pic) après le mot, et coupez à son milieu. Ne prenez pas l'écart des temps de mots de la reconnaissance vocale : leurs bords peuvent être décalés de 0,5 s.
• Sous-titres et cartes de points clés : gardez-les courts. Une carte soutient une scène. Elle ne la remplace jamais.
• Le cadre — chaque vidéo l'a :
  1. Carton de titre d'ouverture, environ 3 s : le logo (si applicable), le titre de la vidéo et une courte ligne. Il peut être silencieux ou avec de la musique seulement.
  2. Diapositive de clôture, environ 4 s : le logo (si applicable), l'accroche ou l'appel à l'action, et l'URL. Il peut être silencieux.
  3. Logo en coin : un petit logo dans le coin inférieur droit pour toute la vidéo entre les deux cartes. Faites-le apparaître en fondu après le carton d'ouverture et disparaître avant la diapositive de clôture. Gardez-le à l'écart des visages et des éléments clés.
  4. "Si applicable" : une vidéo de marque, de produit ou d'entreprise a un logo. Une vidéo personnelle n'a pas de logo d'entreprise. Elle a quand même le carton de titre et la diapositive de clôture.
  5. Pour ajouter le cadre à une vidéo terminée, ne retimingez pas la voix. Mettez la composition existante dans un <Series> entre les deux cartes. Les cartes ajoutent du silence au début et à la fin, et c'est acceptable.
• La marque d'abord, toujours. Si le projet a un profil de marque, utilisez-le : les cartes du profil, la palette de brand.css, le logo et la marque en tant qu'actifs réels. Si le projet a de vraies captures d'écran de l'application, utilisez-les comme une couche : un écran réel bat une approximation dessinée d'un écran. Seules les personnes, les lieux et les accessoires sont dessinés. L'interface utilisateur, les logos et la typographie proviennent de la marque. Si le profil est clairement obsolète par rapport à l'application réelle, dites-le et utilisez l'application.

6. Vérifier l'image

1. Rendez des plans fixes avec npx remotion still aux images clés.
2. Ouvrez les plans fixes. Recherchez un visage qu'une carte ou un sous-titre couvre, et un personnage que le bord du cadre coupe. Un deuxième avis optionnel : ADAPTERS.md décrit une commande REVIEW_IMAGE. Traitez son verdict comme une piste, pas comme un blocage, et confirmez chaque constatation sur l'image.
3. Rendez un échantillon d'environ 20 s avec une scène, un changement de pose, un mouvement de caméra et un échange de dialogue.
4. Extrayez les images autour de chaque changement de pose...