Communitygithub.com

Music Video : clip complet calé sur le rythme, dessiné en code

Transformez une chanson (et ses paroles minutées) en clip complet calé sur le tempo, dessiné par le code : dessin animé peint avec p5.js + p5.brush ou motion design vectoriel net, ffmpeg pour l'audio, sous-titres karaoké, validation sur un pilote de 30 secondes et MP4 1080p. Aucune génération d'image ou de vidéo par IA.

Qu'est-ce que Music Video : clip complet calé sur le rythme, dessiné en code ?

Recette Clip musical, étape 1 (le film fini), issue de sagearbor/claude-music-video-skill. Donnez à Claude Code une chanson et des paroles minutées (les exports Suno avec paroles intégrées suffisent) : il écrit un storyboard guidé par les paroles et attend votre accord, ajuste une grille rythmique, produit un pilote de 30 secondes et s'arrête à nouveau, puis construit les chapitres en parallèle avec des sous-agents et rend un MP4 1080p. Styles : painted, editorial, keynote, geometric, hybrid. Chaque image est du p5.js dans Chrome headless, donc aucun coût de génération IA au-delà de votre abonnement Claude.

Compatible avec✓Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add sagearbor/claude-music-video-skill

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation


nom : clip-vidéo description : Créez un clip vidéo complet pour une chanson, entièrement dessiné à partir de CODE (p5.js dans un Chrome headless : un dessin animé peint à la main avec p5.brush, ou un motion design vectoriel net via --style, ffmpeg pour l'audio), sans aucune génération d'image/vidéo par IA et sans dépense API au-delà du plan Claude. Storyboard piloté par les paroles, grille rythmique adaptée aux phases, sous-titres karaoké, un pilote de 30 secondes, puis des chapitres construits en parallèle par des sous-agents. À utiliser lorsque l'on vous demande de créer, animer ou storyboarder un clip vidéo, un clip lyrique ou une animation synchronisée sur le rythme, dans N'IMPORTE QUEL dépôt. métadonnées : auteur : Sage Arbor

clip-vidéo

Sous-commandes (vérifiez d'abord celles-ci)

AppelAction
/music-video aide, /music-video sans chanson, ou « comment utiliser ceci ? »Affichez le bloc Aide ci-dessous textuellement, puis vérifiez les prérequis (node -v, ffmpeg -version, uv --version, Chrome présent) et signalez chaque élément avec ✅/❌ ainsi que la commande d'installation. Arrêtez-vous ; ne démarrez pas une vidéo.
/music-video leçonsAffichez LESSONS.md (la dernière entrée en entier, les entrées plus anciennes uniquement sous forme de titres).
/music-video <fichier chanson> [paroles.srt] [drapeaux] [notes]Analysez les Drapeaux ci-dessous, dites en une ligne quelles étapes sont actives et quels choix sont déjà définis, puis exécutez le pipeline.

Aide

/music-video : transformez une chanson en clip vidéo synchronisé sur le rythmique, entièrement dessiné en code,
             du dessin animé peint à la main au motion design marketing net.

UTILISATION
  /music-video ~/Téléchargements/chanson.mp3                     Les fichiers Suno avec paroles intégrées n'ont besoin de rien d'autre
  /music-video ~/Téléchargements/chanson.mp3 paroles.srt          autres chansons : fournissez les paroles minutées (.srt)
  /music-video chanson.mp3 "style noir, détective chat"           direction créative optionnelle
  /music-video chanson.mp3 --auto --style=éditorial --humain=~/moi.jpg --dossier=~/mesVidéos
                                                        entièrement automatisé : chaque choix défini par des drapeaux
  /music-video aide | leçons

DRAPEAUX (par défaut : arrêt au storyboard ET au pilote pour votre approbation)
  --sauter=storyboard        n'attendez pas le storyboard ; attendez quand même le pilote
  --sauter=pilote             attendez le storyboard ; n'attendez pas le pilote
  --sauter=tout (ou --auto)  pas d'arrêts : chanson entrée, MP4 fini sorti, entièrement agentique
  --design                    PLUS de planification : ajoute une étape de design (fiches de personnages,
                              nuancier de palette, un style cadre par chapitre)
                              et s'arrête pour que vous puissiez itérer sur le look avant l'animation.
                              Combinez : --design --sauter=pilote

CHOIX (les non définis sont demandés lors d'un court entretien ; sous --auto, ils prennent la valeur par défaut)
  --style=peint|éditorial|keynote|géométrique|hybride
                           peint      = dessin animé aquarelle peint à la main (le look original)
                           éditorial  = papier chaud, traits fins précis, police serif, calme
                           keynote    = quasi noir, dégradés lumineux, faisceaux lumineux, particules
                           géométrique = grille suisse, blocs de couleur, courbes paramétriques, sans gras
                           hybride    = couplets éditoriaux, refrains keynote
                           demander (par défaut) = rendre une image par style et vous laisser choisir
                           auto par défaut : éditorial
  --paroles=cinétique|barre|accroches|arrêt   typographie cinétique / barre de sous-titres / lignes d'accroche uniquement / aucun
                           (par défaut : cinétique pour les styles vectoriels, barre pour peint)
  --densité=gras|chaque-ligne|abstrait
                           gras (par défaut) = une image forte toutes les 2–4 lignes, gags supplémentaires en
                           oeufs de Pâques en arrière-plan ; chaque-ligne = un gag par ligne de paroles
  --humain=PHOTO|pip       qui joue « vous » : caricature à partir d'une photo, ou le Pip standard
  --dossier=PARENT         où sont placés les dossiers de chansons (par défaut ~/PROJETS) ; PARENT/_partagé/
                           conserve les éléments réutilisables (votre photo, votre personnage) entre les vidéos
  --entretien / --sans-entretien   forcer ou ignorer l'entretien préliminaire (G0)

  Les étapes sautées ne sont pas du travail sauté : l'artefact est toujours fabriqué et auto-révisé,
  et les choix effectués sont listés dans DECISIONS.md pour que vous puissiez les lire ensuite.

CE QUI SE PASSE (environ 1,5–2 h avec arrêts ; environ 45–60 min avec --auto)
  1. Analyse la chanson : tempo, chutes, sections, minutage des paroles
  1b. Entretien : visuels de style + tous les choix non définis, S'ARRÊTE      (sauf si --auto / tout est défini)
  2. Écrit STORYBOARD.md et S'ARRÊTE pour votre approbation                 (sauf si --sauter)
  2b. Avec --design : fiches de personnages + cadres de style, S'ARRÊTE pour itérer
  3. Construit un clip pilote de 30 s et S'ARRÊTE pour que vous puissiez le regarder   (sauf si --sauter)
  4. Construit le reste en parallèle (sous-agents), vérifie chaque changement de scène
  5. Rend out/<chanson>_full.mp4 (1080p, H.264 + AAC), prêt pour YouTube

BESOINS   Node 20+, Google Chrome, ffmpeg, uv  (Mac : brew install node ffmpeg uv)
COÛT     aucune dépense API ; utilise votre plan Claude (une chanson entière consomme une partie substantielle de l'utilisation)
SORTIE    un dossier de projet (par défaut ~/PROJETS/<chanson>-vidéo/, ou --dossier), en dehors de tout dépôt
APRÈS    « ajouter les leçons d'aujourd'hui à la compétence clip-vidéo » améliore la prochaine vidéo

L'exemple terminé est la vidéo zoo2 ("Please Select Your Ending", 4:30) : environ 100 plans, construit en environ 1 h 40 temps réel. examples/zoo2/ contient son storyboard, chaque fichier de chapitre et le making-of avec chronologie, jetons et coût. Lisez LESSONS.md avant de commencer : c'est le journal d'amélioration, et il remplace tout ce qui entre en contradiction ici.

Pourquoi le code, pas la génération

Les modèles d'images (Deforum, SDXL-Turbo img2img, etc.) redevinent chaque image, ce qui donne du scintillement, des visages fondants et de mauvaises mains. La tentative 1 de zoo2 a fait cela toute la nuit et a été rejetée. Les images dessinées par code sont des fonctions pures du temps de la chanson : lisses, conformes au modèle et exactement sur le rythme. Les modèles vidéo cloud (Kling, Seedance, Veo) sont l'autre voie, pour environ 70 à 300 $ par chanson.

Drapeaux et étapes

Analysez les drapeaux à partir des arguments et des mots simples : « pas d'arrêts », « entièrement autonome », « fais-le » signifient --sauter=tout ; « sauter l'approbation du storyboard » signifie --sauter=storyboard ; « laisse-moi voir les personnages d'abord », « planifie-le plus » signifient --design. Les valeurs se combinent avec des virgules (--sauter=storyboard,design). Drapeau inconnu : dites-le et arrêtez-vous.

ÉtapePar défautQuand elle est sautée
G0 entretienS'ARRÊTE lorsqu'un choix ci-dessous n'est pas définiSous --auto/--sans-entretien, les choix non définis prennent leurs valeurs par défaut et sont enregistrés dans DECISIONS.md.
G1 storyboardS'ARRÊTEÉcrivez-le, effectuez un passage d'auto-critique sur la feuille de paroles (une idée par ligne ? chaque refrain une récompense ? le motif revient à la fin ?), puis continuez.
G2 design (uniquement avec --design)S'ARRÊTE, itère jusqu'à approbation--sauter=design conserve l'étape mais s'auto-critique sur les fiches au lieu d'attendre.
G3 piloteS'ARRÊTEConstruisez quand même le pilote (il crée les SETS partagés dont les chapitres ont besoin). Effectuez deux passages de révision de planche contact et corrigez les bugs habituels de première passe avant de continuer.

Choix (--style, --paroles, --densité, --humain, --dossier ; tableau dans Aide). Les mots simples comptent aussi : « propre », « corporate », « marketing », « pas enfantin », « net » signifient un style vectoriel (demandez lequel, ou éditorial sous --auto) ; « comme la vidéo zoo », « peint à la main » signifient peint. Enregistrez les choix finaux en haut de STORYBOARD.md et dans src/config.js sous PROJECT.style, PROJECT.lyrics, afin que les sous-agents les héritent.

Une étape n'est sautée que lorsque l'utilisateur l'a dit ; en cas de doute, arrêtez-vous. Un ARRÊT est réel : terminez le tour et attendez. Pour chaque étape sautée, ajoutez à DOSSIER/DECISIONS.md : l'étape, ce qui a été décidé, les alternatives que vous avez pesées, et les chemins des images que vous avez révisées. Liez DECISIONS.md dans le rapport final pour que l'utilisateur puisse l'auditer. Ne sautez jamais la vérification ffprobe finale et la vérification ponctuelle des paroles/images à l'étape 8 : ce sont des vérifications, pas des approbations.

Pipeline (faites-les dans l'ordre ; les ARRÊTS sont réels sauf si un drapeau les a sautés)

  1. Projet. Créez le dossier du projet en dehors de tout dépôt : PARENT/<slug-chanson>/ où PARENT est --dossier (par défaut ~/PROJETS), et déplacez la chanson dans son dossier assets/. Placez une photo de référence (--humain) dans PARENT/_partagé/. bash ~/.claude/skills/music-video/scripts/setup_project.sh PARENT/<slug-chanson> Cela clone ClaudeAnimationBase à UPSTREAM_PIN, ajoute src/cast.js (Pip, accessoires, karaoké) et connecte le karaoké. Il nécessite Node 20+, Chrome, ffmpeg, uv et git.
  2. Analyse. uv run ~/.claude/skills/music-video/scripts/analyze_song.py CHANSON --project DOSSIER [--srt PAROLES.srt] Cela écrit src/config.js (bpm adapté à la phase et décalage), src/lyrics.js et analysis.json. Ne faites jamais confiance au BPM de librosa. Utilisez la valeur ajustée. Vérifiez energy_drops par rapport aux débuts de section [Refrain]. Les exports Suno intègrent une piste SRT avec des balises [Section] ; pour d'autres chansons, obtenez d'abord les timings (demandez à l'utilisateur, ou alignez avec whisper). Le BPM ajusté peut ressortir au double du tempo perçu (faible cohérence, une ligne de paroles = deux « mesures ») : notez le tempo perçu dans le storyboard et utilisez bt(2k) pour les battements perçus. 2b. Entretien (G0). Sautez-le uniquement lorsque tous les choix sont définis ou que --auto/--sans-entretien a été donné. Sinon :
    • Style d'abord, sous forme d'images. Si --style n'est pas défini, rendez les images de comparaison : node design/style_tests.mjs (copié par setup) dessine le MÊME moment de paroles en éditorial, keynote, géométrique et hybride (--line1/--line2/--stamp définissent les mots), dans out/design/style_test_*.jpg et style_tests_all.jpg. Envoyez-les, plus une image peinte de l'exemple zoo2 si l'utilisateur ne l'a pas vue. Les gens ne peuvent pas choisir un style à partir de mots.
    • Demandez ensuite les choix restants non définis en un seul tour AskUserQuestion (paroles, densité, humain), plus les appels spécifiques à la chanson qu'un storyboard ne peut pas prendre seul : comment montrer littéralement les marques ou produits réels, et comment montrer les lignes de paroles sensibles (violence, scandale, événements réels).
    • Réutilisez avant de redessiner : si PARENT/_partagé/cast/ contient déjà un personnage pour cette personne (par ex. <nom>.js + <nom>_corps.js, approuvé dans une vidéo antérieure), copiez ces fichiers dans src/vec/, ajoutez leurs balises <script> après vec.js, et utilisez-les tels quels (contrôles d'expression et de pose inclus). Ne redessinez que si l'utilisateur demande des modifications. Après l'approbation d'une nouvelle personne, copiez ses fichiers dans PARENT/_partagé/cast/ (avec une ligne dans _partagé/README.md) pour que la prochaine vidéo les réutilise.
    • Avec une nouvelle photo --humain, regardez-la et écrivez les traits de caricature dans STORYBOARD.md (forme de la tête, cheveux ou non, pilosité faciale, sourcils, yeux, vêtements habituels). Dessinez à partir des traits ; ne tracez ni ne collez jamais la photo dans la vidéo. G0 — ARRÊT après avoir envoyé les images et les questions. Combinez les réponses dans les choix, puis continuez.
  3. Lisez DOSSIER/ANIMATION_GUIDE.md (les règles du kit), LESSONS.md et un exemple de chapitre (examples/zoo2/scenes/c01_pilot.js) avant d'écrire quoi que ce soit. Pour un style vectoriel (tout sauf peint), le guide s'applique toujours pour les sections moteur (timeline, shots(), caméra, easing, rythme, boucle de révision), mais ses règles de look sont inversées : voir Styles vectoriels ci-dessous.
  4. Storyboard. Écrivez DOSSIER/STORYBOARD.md (format : examples/zoo2/STORYBOARD.md) avec le pitch, le casting, l'arc de palette, le motif, un tableau des chapitres pour toute la chanson, et le plan pilote plan par plan avec des « lectures » minutées. La densité d'image suit --densité (gras : une image forte toutes les 2–4 lignes, le reste en oeufs de Pâques en arrière-plan ; chaque-ligne : une par ligne, interprétée par les personnages). G1 — ARRÊT : montrez à l'utilisateur et attendez l'approbation (avec --sauter=storyboard/tout : auto-critique, enregistrez dans DECISIONS.md, continuez). 4b. Design (uniquement avec --design). Avant toute animation, fixez le look sous forme d'images fixes dans out/design/ :
    • cast_<nom>.jpg fiche de modèle par personnage : face, trois-quarts et profil, 4 expressions (neutre, joie, peur, détermination), 3 poses d'action issues du storyboard, et une alignement en hauteur de tout le casting ;
    • palette.jpg : bande de nuancier par chapitre, montrant l'arc de la palette sur la chanson ;
    • style_<chapitre>.jpg : une image clé finale par chapitre au moment héroïque du storyboard, avec paroles. Dessinez-les avec un chapitre jetable scenes/design.js (un chapitre uniquement pour fiches en dehors de la plage temporelle de la chanson) et node render.mjs --sheet=... ; le code du personnage va dans les ajouts à src/cast.js que les chapitres réutiliseront, donc les designs approuvés passent directement dans la vidéo. G2 — ARRÊT : montrez les fiches ; prenez des notes (« yeux plus grands », « palette de refrain plus chaude »), re-rendez, répétez jusqu'à approbation de l'utilisateur. Puis mettez à jour STORYBOARD.md en conséquence.
  5. Pilote. Choisissez environ 30 s qui traversent une limite de section dans un refrain. Construisez-le comme un seul fichier de chapitre avec des ensembles partagés exportés sur window.SETS (voir la fin de c01_pilot.js). Vérifiez-le avec node render.mjs --sheet=... --out=out/check/x.jpg et --strip=a:b, et regardez les images. Les bugs habituels de première passe : personnages trop petits (rapprochez la caméra à 1,3–1,5×), formes d'arrière-plan pas assez larges pour les panoramiques fouettés, accessoires cachés sous la barre de karaoké. Pour un style vectoriel, construisez sur src/scenes/sets.js (le setup copie une version fonctionnelle : pièce, fenêtre, couloir, défilement, mélange d'émotions ; adaptez-la). Rendez node render.mjs --clip --range=a:b --out=out/pilote.mp4. G3 — ARRÊT : l'utilisateur le regarde et l'approuve ou demande des modifications (avec --sauter=pilote/tout : deux passes de révision, enregistrez dans DECISIONS.md, continuez).
  6. Chapitres en parallèle. Ajoutez les fichiers squelettes et leurs balises <script> dans studio.html pour chaque chapitre d'abord (un agent ne doit jamais éditer un fichier partagé). Ensuite, lancez un sous-agent par chapitre (type fork, pour qu'il hérite de ce contexte). Donnez à chacun sa plage temporelle, ses lignes de paroles, son brief de chapitre issu du storyboard, « VOTRE FICHIER UNIQUEMENT », les SETS partagés et les globales, ainsi que le contrat de jointure :
    • entre les chapitres, une transition avec les MÊMES couleurs des deux côtés (peint : brushWipe, sortie p<.5 dans les derniers 0,3 s, entrée .5+lt/.6 ; vectoriel : V.wipe, voir CHAPTER_BRIEF.md)

Skills associés