Vidéo de lancement : le film principal du directeur créatif

Vidéo de lancement SaaS : directeur créatif

Chaque vidéo doit sembler faite pour son produit : son propre concept, sa structure, son look et ses transitions. Cette compétence est un directeur + boîte à outils, pas un modèle. Ne jamais se rabattre sur un style maison unique.

Prérequis

Node 18+, FFmpeg dans le PATH, npx [email protected]. Les compétences HyperFrames hyperframes-creative, hyperframes-animation et hyperframes-registry (installation : npx [email protected] init <n'importe-quel-dossier> ; mise à jour : npx [email protected] skills update). Python + pip install librosa uniquement pour l'analyse musicale.

Vidéo de référence ? Si l'utilisateur envoie une vidéo à reproduire (« comme ça »), suivez references/REFERENCE.md : exécutez scripts/analyze-reference.mjs et écrivez reference.md juste après l'étape 1. Cela façonne ensuite le pitch, le script, les vérifications de construction et la musique.

Flux de travail (4 points de contrôle nécessitent l'utilisateur)

1. Configuration et découverte du produit. Exécutez node <skill>/scripts/new-project.mjs <dir>. Ensuite, découvrez le produit à partir de la meilleure source disponible :

   • Code : lisez les composants, routes, thème et contenu ; écrivez brand.json (references/BRAND.md) et exécutez scripts/brand.mjs.
   • Lien : node <skill>/scripts/from-link.mjs <url> <dir> écrit brand.json et brand-kit.md ; vérifiez les logos et les couleurs.
   • Captures d'écran : demandez le logo, les couleurs et les écrans clés.

   Listez les fonctionnalités réelles, l'audience et le ton.

2. POINT DE CONTRÔLE : pitch 3 directions. Utilisez references/PITCH.md. Combinez les looks de references/DIRECTIONS.md (4 familles × 3 looks) avec les structures de references/NARRATIVES.md. Les trois doivent différer (au moins 2 familles) et chacune reçoit une image clé rendue. L'utilisateur choisit ou mélange ; enregistrez la décision dans direction.md. Avec une référence, la direction A est la référence à la fidélité demandée, et chaque image est montrée à côté de l'image de référence à laquelle elle répond.

3. POINT DE CONTRÔLE : script. Un tableau de séquences (scène, contenu à l'écran, texte, mouvement, transition, son) pour la direction choisie, plus les actions UI exactes. Après approbation, demandez les écrans dans l'application nécessaires (references/UI-REBUILD.md).

4. POINT DE CONTRÔLE : images (uniquement si la direction en a besoin). Écrivez les prompts et attendez les fichiers ; ne les générez ou ne les simulez jamais vous-même (references/IMAGES.md).

5. Construction.

   • Une sous-composition par scène.
   • Pour chaque scène, lisez son blueprint HyperFrames et cherchez dans le registre (npx [email protected] catalog <mots> --json) avant de construire manuellement.
   • Les scènes produit commencent à partir de reference/ui-rig.html. Utilisez lib/fx.js pour les mouvements et lib/three-stage.js pour la 3D.
   • Bouclez lint → capture d'écran → corrigez jusqu'à ce que chaque image soit bonne, puis faites un rendu brouillon (references/WORKFLOW.md). Avec une référence, vérifiez le brouillon avec analyze-reference.mjs --compare.

6. POINT DE CONTRÔLE : musique. Écrivez music-plan.json, exécutez scripts/music-plan.mjs, et dites à l'utilisateur de générer 2 à 4 pistes dans ElevenLabs. Alignez-les avec analyze-track.py --drop, mixez-les avec mix-variations.mjs, et laissez l'utilisateur choisir (references/MUSIC.md).

7. Livraison. Montez la piste, effectuez le rendu avec -q delivery, puis exécutez scripts/finalize.mjs (master -14 LUFS + une copie de téléchargement de moins de 100 Mo).

Règles

• Uniquement des fonctionnalités réelles, UI réelle, données de démonstration. N'inventez jamais d'écrans ; demandez-les.
• Un mouvement signature et 2-3 transitions par vidéo (ou l'ensemble propre à la référence), utilisés de manière cohérente. Maintenez chaque ligne de texte assez longtemps pour être lue.
• Uniquement des variables de marque dans les scènes (var(--brand-primary), var(--font-display)) ; ne codez jamais en dur un hex ou une famille de polices de la marque.
• Une référence est une grammaire, pas un contenu. Copiez son rythme, ses transitions, ses rôles de typographie et de couleur ; jamais ses images, logos, noms, contenu ou musique.
• Pas de look par défaut. Si un brouillon commence à dériver vers un « dégradé sombre + fenêtre inclinée + cartes de texte » générique, arrêtez-vous et relisez direction.md.
• Lisez references/GOTCHAS.md avant de construire. Il liste les pièges HyperFrames qui coûtent des rendus.

Fichiers

Chemin	Description
toolkit/fx.js	Aides au mouvement : frappe, texte défilant, whip, révélation masque, curseur, compteur, tracé de chemin/suivi
toolkit/three-stage.js	Scène Three.js pour ordinateur portable / téléphone / panneaux flottants avec caméra animée par images clés et échanges d'écran
toolkit/ui-rig.html	Rig de reconstruction UI (caméra plate / inclinée / avant), copié dans reference/ dans chaque projet
toolkit/skeleton/	index.html racine vide (marqueurs de marque, importmap, fx)
examples/	Démonstrations techniques, une par famille : new-project.mjs <dir> --examples les monte. Étudiez, ne copiez jamais.
scripts/	new-project, from-link, brand, analyze-reference, fetch-sfx, music-plan, analyze-track.py, mix-variations, finalize