carousel-mp4

Carrousel → MP4 animé

Cette compétence réutilise la compétence instagram-carousel (elle doit être installée dans ~/.claude/skills/instagram-carousel ; appelée <ic> ci-dessous). Le résultat final est un MP4, pas les PNG.

Workflow

1. Fabriquer le carrousel comme d'habitude : suivre les étapes 1 à 4 de <ic>/SKILL.md (brief, archétype, système visuel, script et HTML). Toutes les règles s'appliquent : continuité entre les diapositives, nouvelles polices, palette 2+1 et revue du design.

   • Toujours demander l'orientation avant de concevoir, même quand la demande ne la mentionne pas (question à choix multiples) :

     • Vertical : Reels/Stories 9:16 (1080×1920, --reels) ou fil d'actualité 4:5 (1080×1350, sans drapeau) ;
     • Horizontal : 16:9 (1920×1080, --landscape), pour YouTube, un site web ou des écrans.

     L'orientation change toute la composition (grille, tailles, zone de sécurité), donc ne la choisissez jamais par défaut. L'horizontal ne fonctionne qu'en mode motion design.

   • Demander aussi le style : diapositives (la chorégraphie automatique : mouvement de caméra entre les diapositives) ou motion design (typographie cinétique et transitions variées, pour que cela ne ressemble pas à des diapositives). Si l'utilisateur dit que le résultat « ressemble à des diapositives » ou demande quelque chose de plus dynamique, utilisez le motion design. Voir references/motion.md.

   • Et le son : effets intégrés (par défaut), effets Openverse, musique Openverse, fichiers de l'utilisateur ou aucun son.

2. Lire <ic>/references/video.md : chorégraphie, contrôle de l'animation avec data-anim/data-delay, son et vérifications.
3. Ajuster la chorégraphie dans le HTML si nécessaire. L'animation est automatique, mais data-anim et data-delay permettent de peaufiner les moments clés.
4. Vérifier avec des images fixes avant la vidéo complète (rapide) :

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 --stills=0.6,1.5,3,4.2,6
   

   Ouvrir les JPEG dans <output>/carousel-stills/ et confirmer que rien n'est coupé, superposé ou invisible à la fin de chaque entrée.
5. Son (optionnel, voir video.md › Son) :
   • Openverse : node <ic>/scripts/sounds.mjs search "whoosh" --type=sfx. Montrer les options à l'utilisateur et, avec son autorisation, exécuter node <ic>/scripts/sounds.mjs download <id> <output>/sounds/whoosh-1.mp3.
   • Les noms de fichiers définissent l'utilisation : whoosh* (transitions), pop* (autocollants/pills), hit* (titres). Utiliser plusieurs par type (whoosh-1.mp3, whoosh-2.mp3…) pour que les transitions ne sonnent pas toujours pareil ; elles tournent sans répétitions dos à dos. La musique est séparée.
   • Sans fichiers, les effets intégrés varient déjà d'eux-mêmes (5 whoosh, 3 pop, 3 hit, avec hauteur et longueur aléatoires).
6. Rendre le MP4 :

   node <ic>/scripts/video.mjs <output>/carousel.html <output>/carousel.mp4 [--reels] [--sfx=<output>/sounds] [--music=<output>/sounds/music.mp3]
   

   Pas besoin de ffmpeg : il utilise Chrome (GSAP + WebCodecs). Environ 30 à 60 s pour 20 à 30 s de vidéo. Exécutez-le en arrière-plan si c'est long.
7. Livrer :
   • carousel.mp4 (H.264 + AAC, prêt pour Instagram/Reels)
   • caption.txt (légende, hashtags, mots-clés)
   • une note : durée, format, sons utilisés (et leur provenance, depuis sounds/sound-sources.txt) et les placeholder encore à remplacer

Ne pas livrer les PNG sauf si l'utilisateur les demande. S'il les demande, utiliser render.mjs comme dans la compétence de base.