om-dubeyyy/vox-style-animation

Animation style Vox

Vous réalisez de courtes vidéos explicatives dans le look éditorial collage : fonds papier, cartes photo teintées avec bordures et ombres, un surligneur jaune sur la phrase clé, des cercles et flèches au stylo rouge, des cartes avec épingles, un mouvement collage sur les deux images, et des coupures physiques, le tout avec un son conçu sur mesure. Le kit se trouve dans kit/, le moteur de rendu dans scripts/, et les règles de réalisation dans references/.

La règle au-dessus de toutes les règles : l'image doit porter l'argument. Décorer un point faible reste une vidéo faible. La deuxième règle : elle doit avoir l'air faite à la main, volontairement. Chaque valeur par défaut du kit ajoute une petite imperfection physique ou supprime une perfection numérique.

Avant de construire : lisez ceci

1. references/LOOK_BOOK.md : ce qui la rend professionnelle, avec des chiffres mesurés et les 18 signes amateurs. Toujours le lire.
2. references/SCRIPT.md : question → archives → script → liste de plans. Lisez-le quand vous écrivez ou chronométrez.
3. references/API.md : chaque appel du kit. Lisez-le avant d'écrire la page.
4. references/TIPS.md : conseils issus de vidéos terminées (image, timing, son, vérité, livraison) et un debunk de 10–12 s plan par plan. À lire avant une accroche courte ou un debunk.
5. references/SOUND.md (bruitages enregistrés, mix documentaire, narration), references/ASSETS.md (licences !), references/QA.md si nécessaire.

Flux de travail

1. Question et script. Une question unique, surprenante, à laquelle on peut répondre, avec quelque chose à montrer. Accroche → contexte → tournant → preuve → conclusion (un debunk de 10 s : affirmation → « pas vraiment » → données → concession → conclusion, SCRIPT.md §7). Environ 215 mots/min quand un créateur parle ; environ 150–165 mots/min pour un narrateur documentaire, avec une indication sur chaque ligne. Citez chaque fait dans SOURCES.md, et n'inventez jamais de chiffres, citations ou documents ; omettez les affirmations que les données ne soutiennent pas.
2. Archives d'abord. Trouvez les images et les vraies séquences avant de terminer le script : NASA, Library of Congress, Smithsonian Open Access, Wikimedia, Pexels (vérifiez chaque licence ; faites un contact-sheet de chaque clip pour les filigranes et le texte incrusté). Les séquences dans les cartes donnent un rendu documentaire ; les images fixes seules donnent un rendu diaporama. Enregistrez le fichier, l'URL, la licence et le crédit. Ne jamais envoyer de fichiers Texturelabs ou de polices commerciales. Pas de logo ou de séquences Vox. Ne laissez jamais le modèle deviner les images (--query noimg montre à quel point cela semble médiocre).
3. Liste de plans. Une ligne par phrase parlée, avec les temps issus d'une transcription mot-à-mot de la voix off : python3 $SKILL/scripts/words.py vo.wav --inject <page>, puis const w = V.wordmap("#words") dans la page et les mêmes mots dans le mix, afin qu'une ligne ré-enregistrée rechronomètre tout. Un mouvement principal par ligne. Choisissez une idée visuelle récurrente pour toute la vidéo. Nommez la coupe à chaque changement de scène (hard cut, curveCut, zoomCut, holePush, whip, paperWipe ; jamais de fondu).
4. Construction. Travaillez dans le dossier de cette compétence (celui qui contient ce SKILL.md ; appelez-le $SKILL, généralement ~/.claude/skills/vox-style-animation). Exécutez cd $SKILL && npm run new -- <nom> ; cela crée videos/<nom>/index.html avec tous les chemins définis. Pour un projet ailleurs, exécutez node $SKILL/scripts/new.mjs <nom> --dir <dossier>. Ne copiez pas les pages à la main : les chemins ../../kit ne fonctionnent que deux niveaux en dessous du dossier de la compétence. Placez les images dans videos/<nom>/assets/ et enregistrez-les dans son SOURCES.md. Gardez les valeurs par défaut sauf raison valable :
   • papier, pas blanc ; photos teintées ; cartes ±1,5–3°, avec bordures de 4 % et ombres douces ;
   • onTwos: true (mouvement collage à 12 fps) ; le papier reste immobile (drift: 0), mais les objets respirent : breathe() sur chaque photo maintenue, float() 2–3 px sur les cartes et découpes, un ou deux scrap() qui dépassent du cadre, un ghost() du vrai document derrière (LOOK_BOOK §10) ;
   • l'affirmation lisible dans l'image 1 ; de vraies séquences dans les cartes avec footage() ;
   • poussées à +1–3 %/s sur les maintiens, +4–6 %/s pour l'emphase ;
   • annotations sur leurs mots ; trois voix typographiques ; 1–3 accents, chacun avec un seul rôle ;
   • en 9:16, rien d'important dans les 12 % du haut ni les 20 % du bas (l'interface de la plateforme les couvre). examples/apollo/index.html montre presque tous les helpers. Pour les cartes, utilisez node $SKILL/scripts/map.mjs …. Pour prétraiter une image fixe ou une séquence, utilisez python3 $SKILL/scripts/photo_treat.py.
5. Vérifiez d'abord les images fixes. Exécutez node $SKILL/scripts/render.mjs videos/<nom>/index.html --stills t1,t2,… à chaque changement de scène et annotation. Ouvrez les PNG et regardez-les. Parcourez references/QA.md et corrigez chaque problème. Si le rendu s'arrête avec une erreur de page, le message nomme le helper et la cible manquante.
6. Rendu. Pour les brouillons, node $SKILL/scripts/render.mjs videos/<nom>/index.html --voice vo.wav [--music bed.mp3] --gif mixe les indices synthétisés du kit (musique −22 dB et ducking, room tone, −14 LUFS). Pour un rendu final, utilisez des foley enregistrés : rendez avec --no-sfx, puis python3 $SKILL/scripts/doc_mix.py silent.mp4 --cues cues.json --words <page> --voice vo.wav --music … --room $SKILL/kit/sfx/cc0/room_tone_office.mp3 --out final.mp4 --stems (narration en référence, chaque échantillon réglé par son pic et aligné au pic sur son mot ; SOUND.md). Ne masterisez jamais les effets seuls. Si la vidéo doit un jour être diffusée en 4K, rendez avec --scale 2 (un master natif en 3840×2160).
7. Vérification finale. Extrayez des images du MP4 aux transitions. Confirmez la loudness avec ffmpeg -i out.mp4 -af ebur128 -f null -. Ensuite, signalez ce que vous avez fabriqué ainsi que ses sources et licences.

Configuration (une fois par machine)

npm install                      # gsap, playwright, d3-geo, topojson-client, world-atlas
npx playwright install chromium  # le navigateur du moteur de rendu
# optionnel, pour régénérer les textures et sons : pip install numpy scipy pillow
# optionnel, pour words.py et doc_mix.py : pip install faster-whisper numpy
# optionnel, pour l'accélération préservant la voix de narration.py : un ffmpeg avec rubberband (macOS : brew install ffmpeg-full)

Vous avez besoin de Node 18+ et ffmpeg 4.4+ dans le PATH. Le kit est du JavaScript navigateur pur ; il n'y a pas d'étape de build. Pour l'aperçu navigateur, exécutez npm run preview, laissez-le tourner, et ouvrez http://localhost:8080/videos/<nom>/.

Non-négociables

• Uniquement des faits réels, avec sources. Une carte « fiche d'information » tapée est acceptable. Une lettre, un reçu ou un titre forgé présenté comme réel ne l'est pas.
• La licence de chaque image est connue. Les séquences empruntées reçoivent un badge à l'écran (« Archive · NASA »), ou un crédit en légende lorsque la chaîne interdit les badges à l'écran.
• N'utilisez pas le logo ou les séquences de Vox. « Style Vox » décrit un look ; le logo implique un parrainage. Si l'utilisateur souhaite le mot « Vox » à l'écran comme indice de style (comme le font de nombreux reels style Vox), mettez-le dans une police sérif libre incluse, gardez une étiquette « style Vox » quelque part, et informez-le du risque de marque ; c'est son choix.
• Vérifiez les frontières contestées sur les cartes.
• Gardez le texte hors des images générées par IA ; ajoutez tout le texte dans la page.
• Cartes de l'Inde (et autres zones contestées) : les frontières de Natural Earth sont de facto, pas officielles. Consultez ASSETS.md avant de publier.

Non affilié à, approuvé par, ou connecté à Vox Media. « Vox » est une marque de Vox Media, LLC.

Quand la vidéo de l'utilisateur « a l'air médiocre »

Prenez des images fixes et parcourez les 18 signes amateurs dans LOOK_BOOK.md. Les corrections habituelles, par ordre d'impact :

1. Fond papier et teinte photo.
2. Mouvement sur deux images, avec une seule chose qui bouge à la fois.
3. Annotations liées aux mots.
4. Rotation, bordure et ombre des cartes.
5. Objets parfaitement immobiles entre l'entrée et la sortie : ajoutez breathe, float, un scrap.
6. Son : foley enregistré sur les actions clés, aligné au pic, sous la voix ; musique 18–24 dB sous la voix.
7. Remplacez les fondus par des coupures.