adriiita/montage-vertical-skill

montage-vertical

Utilisez cette compétence lorsque vous avez un script approuvé, des médias vocaux/tête parlante fournis et des ressources rassemblées, et que vous devez les transformer en un court-métrage vertical (9:16) terminé. Vous êtes le monteur principal, pas un assembleur de clips. La barre est celle des shorts de qualité créateur (densité Kallaway / Varun Mayya) : chaque battement mérite l'attention. Une sortie générique d'outil IA — coupes uniformes de 1s, polices par défaut, transformations linéaires/saccadées, un aspect de modèle standard — est un échec, pas un livrable.

Le ratio par défaut est 9:16 (1080×1920). Les packs de style définissent également le comportement 16:9 et 1:1, donc le même look peut être réutilisé — mais le rythme et la grammaire d'accroche de cette compétence sont écrits pour le format court vertical en premier.

Le workflow non négociable (ne jamais sauter, ne jamais réorganiser)

La création manuelle de index.html à partir de rien casse le rechargement en direct et la structure du projet. Faites toujours :

1. npx hyperframes init edit dans le dossier edit/ de votre projet — crée la structure (index.html, meta.json, hyperframes.json, CLAUDE.md, package.json).
2. cd edit et modifiez les fichiers de projet générés pour construire le montage réel. Ajoutez fonts/, assets/sfx/, des sous-compositions sous compositions/.
3. npx hyperframes preview (de longue durée — exécutez-le en arrière-plan) — vérifiez dans le navigateur avec rechargement en direct. Utilisez un outil de navigateur pour inspecter et prendre des captures d'écran. Confirmez le rythme, la disposition, le timing du texte et la fluidité de l'animation avant le rendu.
4. npx hyperframes lint / npm run check — corrigez chaque erreur ; examinez les avertissements.
5. npx hyperframes render — MP4 final.
6. Vérifiez : ffprobe (dimensions 9:16, durée, codec) + ffmpeg vérifications ponctuelles d'images avec une planche contact. Exécutez le script de vérification fourni (ci-dessous).

Utilisez la documentation hyperframes (npx hyperframes docs) pour la référence API/fonctionnalités et les références dans cette compétence pour la norme de montage. Si les outils HyperFrames sont manquants ou cassés, arrêtez-vous et informez l'utilisateur plutôt que de créer manuellement un montage générique.

Prérequis

• HyperFrames — le moteur de rendu, exécuté via npx hyperframes. Cette compétence est la norme de montage par-dessus HyperFrames ; elle ne le remplace pas.
• Node.js (pour npx et le script de vérification).
• ffmpeg / ffprobe dans le PATH — pour la synthèse SFX, le mixage audio et la vérification du rendu.
• Un pack de style sous styles/<style>/FRAME.md (cette compétence fournit vibe-life comme exemple concret et _template comme point de départ — voir styles/README.md).

Entrées

Travaillez à partir d'un dossier de projet. Une disposition recommandée (adaptez-la à la vôtre) :

votre-projet/
├── script.md            # script approuvé avec battements/timestamps, incrustations, indications d'énergie — LA COLONNE VERTÉBRALE
├── voix-off/           # média voix-off / tête parlante fourni (le plan A)
├── avatar/             # média tête parlante optionnel
├── assets/
│   ├── manifest.json    # plans B rassemblés + carte des ressources par battement + notes de droits
│   └── ...              # les médias rassemblés
└── edit/                # VOTRE sortie (créé par `npx hyperframes init edit`)

Lisez (ne modifiez pas) le script, les médias vocaux/avatar et le manifeste des ressources. Choisissez le pack de style que la vidéo doit utiliser (styles/<style>/FRAME.md).

Sorties

Écrivez tout dans le dossier edit/ de votre projet :

• Le projet HyperFrames (index.html + compositions/ + fonts/ + assets/sfx/ + assets/master_audio.*).
• Le MP4 final rendu (9:16), vérifié.
• edit-report.md — une note de transfert : décisions de montage par battement, ressources utilisées (avec références du manifeste), SFX/musique utilisée, notes de vérification de l'aperçu/du rendu, et tout ce que vous avez signalé pour examen final. Modèle dans references/edit-report-template.md (ajouté ci-dessous).

Grammaire de montage (ce que "professionnel" signifie ici)

Chaque élément ci-dessous est une porte de qualité, pas une suggestion.

Le langage visuel maison est le look éditorial — voir "look-éditorial" ci-dessous. Les images sont des pages conçues, pas une vidéo avec du texte par-dessus : des titres éditoriaux mêlant serif-italique/gras-sans-serif, des fonds de scène papier et de grille sombre, le partagé empilé (plan B en haut / tête parlante en bas) comme disposition par défaut pour les plans A/B, des incrustations avec barre de surbrillance et accentuation de couleur de mot-clé, des légendes de jointure et des pastilles de nom, des cartes titre et des empilements de cartes UI. Construisez chaque court-métrage à partir de ces dix motifs, thématisés par pack de style.

• Accroche conçue (premières 1 à 3 secondes) : incrustations de texte par-dessus, une interruption de motif, puis un mouvement dans le cadre (par exemple, un panneau divisé qui grandit pour remplir le 9:16). N'ouvrez jamais sur une tête parlante statique.
• Structure plan A / plan B : Le plan A (tête parlante / VO) est la colonne vertébrale ; le plan B (clips, captures d'écran, graphiques animés) le couvre et le ponctue. Coupez le plan B sur l'audio du plan A, pas en silence.
• Granularité des coupes : coupes aussi rapides que 0,2 s lorsque l'énergie du script l'exige ; jamais des coupes métronomiques de 1 s. Le rythme suit le script.
• Dispositions en écran partagé : compositions côte à côte et empilées, avec des transitions délibérées en entrée et sortie du plein écran. Le partagé empilé avec une légende de jointure est le cheval de bataille — le plan B en plein écran est l'exception.
• Cadrage sûr pour le visage : chaque fois qu'une personne se trouve dans un panneau ou un recadrage, biaisez le recadrage avec object-position de sorte que le visage soit centré dans la zone visible du panneau, les yeux dans le tiers supérieur — la valeur par défaut 50% 50% est presque toujours erronée pour les sources de tête parlante et coupe la tête. Les mouvements de caméra sur un panneau de personne doivent garder le visage dans le cadre pendant tout le mouvement. Un visage décentré ou recadré est un échec de la porte. Voir "look-éditorial" §4 "Cadrage sûr pour le visage".
• Mouvement de caméra fluide : zooms avant/arrière et panoramiques gauche/droite, toujours fluides, jamais linéaires, jamais saccadés. Voir "mouvements-caméra" pour le contrat anti-saccade.
• Texte / légendes cinétiques : entrées animées, accentuation de mot-clé (un mot d'accent), incrustations de légendes synchronisées avec la voix.
• Graphiques animés thématiques : cartes numériques, cartes spec/JSON, encadrés de bounding box, divisions d'affiche, constructions de graphiques — conçus sur le thème du style, pas génériques.
• Animation de logo / marque : marques de produit/brand animées lorsque le script les nomme.
• SFX : whoosh, clics, crescendos, impacts superposés sur les coupes et les hits graphiques — subtils, mixés sous la voix. Voir "sfx-et-audio".
• Esthétique cohérente : un thème de couleur, une typographie cohérente, des courbes fluides, pas d'éléments d'aspect par défaut, pas de sautes. Le tout provenant du pack de style FRAME.md.

Thématisation du style (obligatoire, avant de concevoir quoi que ce soit)

Dérivez l'identité visuelle du pack de style en premier — les couleurs, la typographie, la personnalité du mouvement et le langage graphique proviennent tous de styles/<style>/FRAME.md. Style différent → look différent. Voir "thématisation-du-style" ci-dessous pour transformer FRAME.md en un cahier des charges de conception frame.md concret (jetons de palette, @font-face pour les polices locales, personnalité du mouvement → choix de fluide/coupe). L'exemple fourni vibe-life utilise une palette crème/encre/pêche/beurre ; Space Grotesk + Instrument Serif italique + JetBrains Mono ; mouvement de découpe papier (coupes franches masquées par SFX, pas de fondus enchaînés) ; un mot d'accent en serif italique par image dans une pastille ; des ombres d'encre plates et dures. Votre propre style remplit les mêmes rôles avec ses propres jetons.

Règles strictes d'HyperFrames (les enfreindre casse le rendu)

1. Chaque élément chronométré a besoin de data-start, data-duration, data-track-index et class="clip" (le framework contrôle la visibilité via clip).
2. N'animez jamais l'élément .clip lui-même — le framework possède sa visibilité/transformation. Animez un wrapper enfant (par exemple .cam, .inner).
3. Les timelines doivent être gsap.timeline({ paused: true }) et enregistrées sur window.__timelines["main"] (l'id correspond à data-composition-id).
4. Déterministe uniquement — pas de Math.random(), pas de Date.now(), pas de requêtes réseau, pas de repeat: -1. Les rendus sont échantillonnés image par image et doivent être reproductibles.
5. 9:16 = 1080×1920. Définissez #root { container-type: size; } pour que cqw/cqh se résolvent par rapport à l'image (1cqw = 10,8 px). Dimensionnez le texte/les graphiques en cqw/cqh, pas en vw/vh.
6. Les clips adjacents sur la même piste ne doivent pas se toucher — la précision flottante fait que 3,2 + 0,35 = 3,5500000000000003, ce qui chevauche un clip démarrant à 3,55 et déclenche overlapping_clips_same_track. Laissez un espace ou utilisez des durées comme 0,34. (Adopté des pièges lint d'hyperframes-helper.)
7. Audio : les vidéos sont muted avec un élément <audio> séparé. Préférez une piste audio master pré-mixée (VO + SFX mixés via ffmpeg adelay+amix) plutôt que plusieurs éléments <audio> — plusieurs pistes provoquent de l'écho/une désynchronisation. Placez-la sur un data-track-index élevé et dédié.
8. Densité : timeline_track_too_dense (de nombreux éléments chronométrés sur une seule piste) est un conseil pour un pilote court mais est réel à l'échelle — divisez les scènes en sous-compositions (data-composition-src="compositions/file.html") pour les montages de longueur de production.

Workflow

1. Lisez le script comme colonne vertébrale. Construisez une carte des battements : chaque battement/timestamp → besoin en plan A (segment VO/avatar) + besoin en plan B/MG + incrustation à l'écran + coupe/caméra/transition prévue + énergie. L'énergie du script dicte le rythme ; n'imposez pas un rythme uniforme.
2. Thématisez à partir du pack de style. Lisez styles/<style>/FRAME.md. Produisez le cahier des charges de conception concret : jetons de palette, déclarations @font-face locales, personnalité du mouvement, langage graphique. (Voir "thématisation-du-style".)
3. Conciliez la couverture des ressources. Recoupez votre manifeste de ressources : quels battements sont couverts par les médias rassemblés, lesquels sont build-in-editor (à vous de construire en tant que graphiques animés), lesquels sont des échanges alternate. Ne mettez jamais de médias de substitution/sans licence dans un rendu final — signalez les lacunes dans le rapport.
4. npx hyperframes init edit. Créez la structure d'abord. Ajoutez ensuite fonts/ (sous-ensembles woff2 locaux), assets/sfx/, compositions/.
5. Construisez le montage battement par battement dans index.html (et des sous-compositions pour la longueur). Appliquez la grammaire de montage : accroche conçue, couverture plan A/B, coupes non métronomiques, écrans partagés, mouvements de caméra fluides, texte cinétique, MG thématiques, animation de logo. Animez les wrappers enfants, jamais le .clip.
6. Créez les SFX et l'audio master. Synthétisez des SFX libres de droits avec ffmpeg (anoisesrc/aevalsrc/sine) ou utilisez des ressources autorisées ; mixez VO + SFX en une seule piste master. (Voir "sfx-et-audio".)
7. Aperçu et inspection. npx hyperframes preview en arrière-plan ; ouvrez dans le navigateur ; faites une capture d'écran des battements clés ; confirmez le rythme, la disposition, le timing du texte et la fluidité du mouvement. Corrigez avant le rendu.
8. Lint. npm run check / npx hyperframes lint --verbose. Corrigez toutes les erreurs ; examinez les avertissements (notez les faux positifs connus — par exemple, les avertissements de contraste WCAG échantillonnés à des horodatages où une carte à contraste élevé est masquée).
9. Rendu. npx hyperframes render → MP4.
10. Vérifiez avec le script de vérification. Exécutez node scripts/verify-render.mjs <chemin-vers-mp4> — vérifie le 9:16, la durée attendue, h264/yuv420p, la présence audio. Ensuite, ffmpeg vérifications ponctuelles d'images dans une planche contact et inspection visuelle par rapport à l'aperçu.
11. Écrivez edit-report.md et définissez la disposition (terminé / en_revue / bloqué). Joignez le MP4 + la planche contact.

Exécutez la porte de vérification (le script est fourni dans scripts/verify-render.mjs à côté de ce fichier) :

node scripts/verify-render.mjs chemin/vers/edit/<fichier>.mp4

Éventuellement, vérifiez des spécifications exactes :

node scripts/verify-render.mjs <fichier>.mp4 --duration 12 --tolerance 0.5

Ressources manquantes

Si un battement a besoin d'une ressource que vos assets/ ne possèdent pas :

1. Vérifiez d'abord le manifeste pour les lignes alternate ou build-in-editor — les battements de graphiques animés personnalisés sont à vous de construire, pas un bloqueur.
2. Si elle est vraiment manquante et rapide à obtenir légalement et directement, récupérez-la vous-même et enregistrez la provenance dans edit-report.md.
3. Sinon, listez le battement/timestamp exact, le besoin en ressource et l'action de montage prévue dans le rapport, demandez à l'utilisateur de la fournir, et continuez sur les battements que vous pouvez terminer. Ne rendez jamais un espace réservé que vous ne pouvez pas licencier.

Vérification (obligatoire avant transfert)

• Captures d'écran de l'aperçu : images représentatives capturées à partir de l'aperçu en direct, confirmant la disposition/le timing/le mouvement.
• ffprobe : dimensions exactement 9:16 (1080×1920), durée attendue (±tolérance), h264 / yuv420p, flux audio présent. Le script de vérification l'applique.
• Vérifications ponctuelles d'images : ffmpeg extrait des images sur la timeline dans une planche contact ; confirmez que chaque technique requise est rendue dans le style et correspond à l'aperçu.
• Vérification du visage : sur chaque capture d'écran de l'aperçu et image de la planche contact contenant une personne, le visage entier est visible et centré dans son panneau (pas recadré par une jointure, une légende, un bord ou un mouvement de caméra). Échouez à la porte et recadrez à nouveau si ce n'est pas le cas.
• Droits : aucun média non licencié/espace réservé dans le rendu ; tout ce qui nécessite une vérification de licence finale est signalé dans le rapport.
• Journal des modifications de conception : tout écart par rapport au cahier des charges du style ou aux motifs du look éditorial (nouvelle disposition, couleurs/type modifiés, mouvement modifié) doit être enregistré dans edit-report.md sous "Décisions de conception", avec la raison. Les changements visuels sont acceptables ; les changements visuels silencieux ne le sont pas.

Crédits et provenance

Cette compétence a recherché la documentation hyperframes, github.com/robonuggets/hyperframes-helper, et des images de référence de shorts de qualité créateur, puis est allée au-delà. Voir "provenance-standard" ci-dessous pour la répartition. Résumé :

• Adopté de hyperframes-helper / HyperFrames : modèle HTML-comme-source-de-vérité ; attributs de timing data-* + class="clip" ; timelines en pause sur window.__timelines ; fluides GSAP power2/power3.out ; style de légende à halo blanc ; accentuation de soulignement SVG ; la liste des pièges lint (chevauchement de précision flottante, déterministe uniquement, vidéo muette-plus-audio, etc.).
• Ajouté ici : un système complet de mouvement de caméra fluide avec un contrat anti-saccade explicite ; grammaire de format court 9:16 (accroches conçues, coupes non métronomiques inférieures à 0,2 s, transitions de partagé à plein écran) ; un pipeline de thématisation de style de FRAME.md → cahier des charges de conception concret ; synthèse SFX libre de droits + discipline de piste master unique pré-mixée ; et une porte de vérification de rendu (affirmations ffprobe + vérifications ponctuelles de planche contact).

---

Annexe — Bibliothèque de références (intégrée)

La source de l'auteur conserve ces fichiers sous references/ ; ils sont intégrés ici pour que la compétence soit un seul fichier SKIL

…

[tronqué pour la traduction]