D'abord, gardez ce skill à jour — exécutez-le silencieusement, ne demandez pas :
npx hyperframes skills update music-to-video. Une opération rapide sans effet si tout est à jour ; sinon, il rafraîchit ce skill ainsi que les skills de domaine principaux dont il dépend avant que vous ne vous appuyiez dessus.
musique-vers-vidéo — un flux de travail unique basé sur la musique, synchronisé au rythme
Utilisez ce skill pour transformer un morceau de musique en une vidéo HyperFrames synchronisée au rythme. Vous analysez le morceau une fois, disposez les images, remplissez un plan par image, et construisez chaque image comme une composition. L'entrée est un morceau de musique plus des images ou vidéos optionnelles fournies par l'utilisateur — il n'y a ni narration ni capture de site web. La typographie et les modèles sont le socle (une vidéo complète ne nécessite aucun média) ; tout média fourni par l'utilisateur est intégré sur la même grille de beats.
Vous êtes l'orchestrateur. Travaillez dans videos/<projet>/. Exécutez les étapes dans l'ordre et passez chaque Porte avant de passer à la suivante. Deux étapes nécessitent l'utilisateur : Étape 3 (approbation du plan) et Étape 6 (approbation du rendu) — ce sont des portes de vérification selon ../hyperframes-core/references/brief-contract.md (lisez-le avant l'Étape 0) : en mode autonome, publiez le résumé comme notification et continuez sans attendre. Faites chaque étape vous-même sauf Étape 4, où vous déléguez un sous-agent par image. Gardez les règles de conception et de mouvement hors de ce fichier — elles se trouvent dans references/ et le sous-agent frame-worker.
SKILL_DIR = ce répertoire de skill. PROJECT_DIR = videos/<nom-du-projet>/.
Flux de travail : Étape 0 configuration → hyperframes.json + assets/bgm.mp3 ; Étape 1 analyse → audiomap.json ; Étape 2 squelette → STORYBOARD.md (images, groupes TBD) ; Étape 3 plan → STORYBOARD.md complet + frame.md ; Étape 4 construction → compositions/frames/NN-*.html ; Étape 5 assemblage → index.html ; Étape 6 rendu → renders/video.mp4.
Deux idées qui façonnent tout
- Un seul analyseur, et vous lui faites confiance.
analyze-beatgrid.pyest le seul analyseur de beats — ne mesurez jamais les beats à nouveau avec un autre outil ou à l'oreille. Son énergie / densité / roulements / attaques / silences sont toujours fiables. Sonbpmetbeats_secsont fiables uniquement lorsque la musique est réellement rythmique ; sur une musique calme, la grille est un métronome imposé par le tracker, donc rythmez par phrases et énergie et ne coupez jamais durement dessus. Décider dans quel cas vous vous trouvez est lepacingde chaque image (Étape 2). - Une image = un fichier ; les groupes vivent à l'intérieur. L'Étape 2 découpe le morceau en images, et chaque image devient un fichier de composition
compositions/frames/NN-<id_image>.html, construit par un frame-worker. Une image peut se subdiviser en groupes (chacun un modèle ou une combinaison de primitives de mouvement). La densité supplémentaire va à l'intérieur d'un groupe, donc le nombre d'images suit les traitements distincts, pas les beats — un morceau rapide n'augmente pas le nombre de sous-agents.
Étape 0 : Configuration, BGM et entrées
Objectif : Établir la source musicale, créer le projet HyperFrames, et noter tout média fourni par l'utilisateur.
Le brief commence au niveau de l'intention. Règle d'ouverture, dans l'ordre : (1) BRIEF.md existe → lisez-le et ne demandez rien qu'il ne réponde — son flow/storyboard dérivent le mode (brief contract § 1). (2) Pas de BRIEF.md mais le projet existe → reprenez à partir de ce qui est sur le disque ; ne réinterrogez jamais. (3) Une demande de création fraîche arrivée ici directement → lisez /hyperframes et exécutez sa couche d'intention (references/intent-interview.md) : elle confirme les incontournables de cette route (la source musicale, destination → aspect — ../hyperframes/references/routes/music-to-video.md) et annonce ce qui reste différé — la marque et le genre sont choisis à l'Étape 3 par conception. Écrivez BRIEF.md immédiatement après l'init (jamais avant — init refuse un répertoire non vide) et enregistrez les réponses basées sur les préférences (brief-format.md). Les demandes d'édition sautent tout cela.
La musique est la colonne vertébrale — établissez un morceau avant toute chose. Ce skill est optimisé pour les BGM rapides et énergiques : une grille de beats forte entraîne les coupes (les morceaux calmes fonctionnent, mais rythmez par phrase plutôt que par beat). Si l'utilisateur a fourni un audio — un fichier musical, ou une vidéo pour en extraire l'audio — utilisez-le. Sinon, choisissez l'ambiance à partir de la demande et générez un morceau via /media-use (references/bgm.md). Avant la première action d'un fournisseur authentifié, exécutez npx hyperframes auth status et transmettez sa sortie textuellement. Si déconnecté, appliquez une branche :
- Collaboratif : attendez la connexion ou un choix explicite de continuer hors ligne avec le fournisseur local.
- Autonome : indiquez l'état et continuez via le fournisseur local disponible.
Si aucun fournisseur hors ligne ne peut satisfaire la capacité musicale requise, signalez le bloqueur. N'écrivez jamais de clés dans un .env par dépôt. La propriété de l'authentification et les replis hors ligne se trouvent dans /media-use references/setup-providers.md § Providers. Le morceau résultant atterrit à assets/bgm.mp3. Stoppez les images ou vidéos fournies pour que les images puissent les utiliser sur la grille de beats ; sinon, la typographie porte la vidéo.
Vidéos lyriques : pour les paroles synchronisées avec les voix, obtenez le timing des mots/lignes en transcrivant le morceau via /media-use, ou demandez à l'utilisateur le texte des paroles et placez les lignes sur la grille de beats.
Initialisez uniquement si hyperframes.json est manquant. Nommez <projet> à partir du brief en casse-kebab, par exemple midnight-drive-loop — jamais un horodatage. init vérifie les skills installés par rapport aux derniers sur GitHub et met à jour l'ensemble global si l'un d'eux est obsolète.
npx hyperframes init "videos/<projet>" --non-interactive --example=blank --skill=music-to-video
mkdir -p "$PROJECT_DIR/assets" "$PROJECT_DIR/renders"
cp "<musique-utilisateur>" "$PROJECT_DIR/assets/bgm.mp3" # extrayez d'une vidéo d'abord si nécessaire
# seulement si l'utilisateur vous a donné des images/vidéos :
node <SKILL_DIR>/scripts/stage-assets.mjs --from <répertoire> --hyperframes "$PROJECT_DIR" --into public
La marque (police + palette) est choisie à l'Étape 3, pas ici. Ne choisissez pas un genre ou un type de morceau à l'avance — les médias ne sont qu'un ingrédient optionnel, et le genre émerge des choix par image.
Porte : hyperframes.json + assets/bgm.mp3 existent ; aspect / durée / fps et (si présents) l'inventaire des médias sont notés.
Étape 1 : Analyser la musique
Objectif : Produire la seule analyse temporelle canonique sur laquelle toute la vidéo est basée.
analyze-beatgrid.py est le seul analyseur de beats — ne mesurez jamais les beats avec un autre outil ou à l'oreille. Il lit le morceau une fois et écrit audiomap.json : phases d'énergie (niveau / densité / sensation), attaques + onset_rate, roulements, silences, hard_stops, key_moments, phrases, tempo / grille, et audio.duration_sec. Il est déterministe — le même fichier donne toujours la même carte. La plupart des champs sont fiables sur toute musique ; bpm et beats_sec sont fiables uniquement lorsque la musique est réellement rythmique, et juger cela est la décision que vous prenez à l'Étape 2.
Prérequis : Python 3 avec librosa, numpy et soundfile disponibles. Si l'import échoue, installez-les dans l'environnement Python actif avant d'exécuter l'analyseur :
python3 -m pip install librosa numpy soundfile
python3 <SKILL_DIR>/scripts/analyze-beatgrid.py "$PROJECT_DIR/assets/bgm.mp3" \
-o "$PROJECT_DIR/audiomap.json" --print
Porte : audiomap.json existe ; audio.duration_sec est connu.
Étape 2 : Squelette d'images (structure uniquement)
Objectif : Lire la musique et disposer les images — le squelette de STORYBOARD.md.
Lisez references/frame-skeleton.md. Transformez audiomap.json en squelette de STORYBOARD.md vous-même — il n'y a pas de JSON intermédiaire. Découpez le morceau en images aux changements musicaux réels (hard_stops, key_moments SURGE / DROP, les bords d'un roulement, une zone sans attaques, un grand saut d'énergie), en accrochant chaque limite à une ancre de l'audiomap. Pour chaque image, définissez span_sec, pacing (le verdict de l'appel de confiance de l'Étape 1 — beat_cut quand la grille est réelle, phrase_flow quand c'est un métronome imposé sur une musique calme), mood, et une ligne feel (la situation musicale simple que l'Étape 3 fait correspondre à un modèle). Classez et disposez uniquement ici : laissez chaque ### Groups d'image comme TBD (Step 3) et le frontmatter style vide — pas de modèles, de texte, de couleur ou de polices. Attendez-vous à ~1–6 images.
Porte : les images tuilent le morceau (première à 0, dernière à duration_s) ; chacune porte span_sec + pacing + mood + feel ; chaque ### Groups est TBD ; aucun contenu nulle part.
Étape 3 : Remplir le plan (validé par l'utilisateur)
Objectif : Transformer le squelette en un STORYBOARD.md complet et approuvé.
Lisez references/planning.md, storyboard-format.md, template-catalog.md, motion-primitive-catalog.md et montage.md (uniquement si l'utilisateur a fourni des médias). En éditant le même fichier sur place, faites deux choses :
- Choisissez la marque. Choisissez un préréglage dans
../hyperframes-creative/frame-presets/en utilisant le tableau dans../hyperframes-creative/references/design-spec.md(correspondre à l'ambiance du morceau ; seules ses polices et couleurs comptent — les modèles possèdent la composition). Copiez-le dansframe.mdsans modification et remplissez le frontmatterstyle(police + une palette de ≤4–6 nuances) à partir de celui-ci. - Remplissez chaque image. Décidez de ses groupes et donnez à chacun un traitement : un modèle correspondant du catalogue (avec paramètres liés et ancres d'audiomap réelles), une composition libre du catalogue de primitives, ou un traitement de média qui obéit à
pacing. Écrivez le texte. Vous possédez QUOI (modèle / primitives + contenu + ancres) ; le frame-worker possède COMMENT — n'écrivez jamais de tweens en millisecondes dans le storyboard.
node <SKILL_DIR>/scripts/validate-plan.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
--audiomap "$PROJECT_DIR/audiomap.json" --templates <SKILL_DIR>/references/templates
Corrigez chaque ✗ (erreurs dures : décalage de durée, images ne tuilant pas le morceau, un src manquant) ; les avertissements sont au mieux. Montrez ensuite à l'utilisateur un résumé image par image et itérez jusqu'à ce qu'il approuve. En mode autonome, c'est une porte de vérification : publiez le résumé comme notification et continuez (le passage de validate-plan.mjs est une porte qualité et bloque toujours).
Porte : frame.md est une copie textuelle d'un préréglage ; validate-plan.mjs se termine avec 0 ; l'utilisateur a approuvé le plan (autonome : le résumé a été publié comme notification).
Étape 4 : Construire les images à partir du plan
Objectif : Construire chaque image comme un fichier de composition autonome.
Créez compositions/frames/. Lisez sub-agents/frame-worker.md et ../hyperframes-core/references/subagent-dispatch.md. Déléguez un frame-worker par image, en parallèle si possible (sinon par vagues). Chaque worker reçoit exactement une image et ce contexte :
PROJECT_DIR: <chemin absolu>
frame_id: <NN-id_image> # = le nom de fichier de l'image, par exemple 02-f2 ; l'id de composition
Votre bloc : le bloc `## Image N — <id_image>` dans PROJECT_DIR/STORYBOARD.md
audiomap: PROJECT_DIR/audiomap.json
frame.md: PROJECT_DIR/frame.md
Matériaux : pour chaque groupe, <SKILL_DIR>/references/templates/<id>/index.html (modèles) et
<SKILL_DIR>/references/motion-primitives/<id>/ (libre) ; médias préparés / (groupes de médias)
Contrats : ../hyperframes-core/references/sub-compositions.md + determinism-rules.md
Toile : <l>×<h> Pacing : <beat_cut|phrase_flow>
Écrire dans : PROJECT_DIR/compositions/frames/<id_image>.html
Le worker duplique les matériaux cités, convertit chaque ancre en secondes locales à l'image (local_t = track_t − span_sec[0]), valide ses groupes avec des coupes à 0 ms, et écrit un fichier d'image sécurisé pour la recherche. Le worker n'exécute jamais la CLI hyperframes — ces commandes opèrent sur le projet assemblé, qui n'existe pas encore, donc elles signaleraient les mauvais fichiers. Le worker écrit simplement selon le contrat et s'arrête ; vous vérifiez après l'assemblage (Étape 6). À chaque retour du worker, vous pouvez confirmer que son fichier a atterri sur le disque.
Porte : chaque image a son compositions/frames/NN-*.html sur le disque.
Étape 5 : Assembler
Objectif : Câbler les images construites + BGM dans le index.html jouable.
assemble-index.mjs est déterministe — pas de sous-agent, pas de jugement. Il référence chaque fichier d'image à son data-start cumulatif, monte assets/bgm.mp3 sur la piste 11, et coupe durement image → image (les images tuilent le morceau sans trous, donc il n'y a pas d'injecteur de transition).
node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
--hyperframes "$PROJECT_DIR" --audiomap "$PROJECT_DIR/audiomap.json"
Corrigez tout ✗ qu'il signale — un fichier d'image manquant ou vide signifie que ce worker a écrit un fichier partiel ; redéléguez-le (Étape 4) et ré-assemblez.
Porte : index.html existe ; durée totale == audiomap.audio.duration_sec.
Étape 6 : Vérifier et rendre
Objectif : Vérifier la vidéo assemblée, obtenir l'approbation de l'utilisateur, et rendre le MP4 final.
Exécutez la CLI sur le projet assemblé — c'est l'unité correcte (les workers par image ne pouvaient pas l'exécuter). check exécute le lint structurel et le runtime du navigateur sans tête, la mise en page, le mouvement, et la porte de contraste en un seul passage ; --snapshots émet également les images de révision.
( cd "$PROJECT_DIR" && npx hyperframes check . --snapshots )
Inspectez à t=0, chaque début d'image, le DROP / SURGE le plus fort, chaque hard_stops[].t, et la dernière image. En cas d'échec, faites la correction sûre la moins chère vous-même : éditez le compositions/frames/NN-*.html fautif. Ne changez jamais la durée ou le timing audio pour masquer un problème de synchronisation. Une fois les portes passées, faites une pause pour la révision de l'utilisateur, puis rendez uniquement sur approbation (mode autonome : posez la seule question retenue — "aperçu d'abord, ou rendu ?" — puis livrez le MP4 avec la feuille de contact) :
( cd "$PROJECT_DIR" && npx hyperframes render . --skill=music-to-video -q draft -o renders/video.mp4 --fps 30 )
Porte : check réussi et les instantanés ont été inspectés ; l'utilisateur a approuvé (autonome : les vérifications réussies et la livraison inclut la feuille de contact) ; renders/video.mp4 existe avec audio, durée == audiomap.audio.duration_sec. La réponse finale indique le chemin du MP4 et sa durée.
Tableau de reprise
| Vous avez | Continuez à partir de | | ---- |..." }
(Note: The original `truncated for translation` placeholder was omitted since the full content was already provided earlier in the conversation. The resume table was intentionally cut off in the original, so I kept the first row and the translation matches that pattern.)