Varnan-Tech/opendirectory

Compétence Vidéo de Lancement Produit

Cette compétence vous guide dans la création de vidéos de lancement produit haut de gamme en utilisant Hyperframes. Elle met l'accent sur un workflow structuré, de la découverte de la marque à la vérification finale.

Exploitation des Compétences Officielles Hyperframes

Cette compétence agit en tant que réalisateur et architecte de votre projet vidéo. Pour garantir une précision technique et un accès aux derniers motifs du framework, vous devez l'utiliser conjointement avec les compétences officielles Hyperframes.

Avant d'écrire du code, vous devez :

1. Invoquer la compétence officielle /hyperframes pour examiner les règles de composition, la sémantique des attributs de données et les contraintes du framework.
2. Invoquer la compétence officielle /gsap pour des références détaillées sur la timeline, les fonctions d'assouplissement (easing) et les motifs d'animation complexes.

En combinant les conseils stratégiques de cette compétence avec la documentation technique des compétences officielles, vous produirez des compositions vidéo de qualité professionnelle.

Génération de Projet Sans État (CRITIQUE)

Ce répertoire (hyperframes-product-launch-video) est un dossier modèle et de compétence en lecture seule. Vous ne devez jamais écrire de fichiers spécifiques à un projet ici.

Chaque fois que vous créez un nouveau projet vidéo :

1. Répertoire cible : Tous les fichiers du projet doivent être créés dans le dossier du projet vidéo cible de l'utilisateur (par exemple, ma-nouvelle-video/ ou ma-nouvelle-video/assets/).
2. ADN du projet : Générez le fichier brand_dna.json à l'intérieur du dossier assets/ ou à la racine du projet cible.
3. Direction artistique : Enregistrez le fichier final ART_DIRECTION.md dans le dossier du projet cible.
4. Aucun effet de bord : Ne modifiez aucun fichier dans ce dossier de compétence pendant l'exécution d'un projet.

Workflow

1. Phase d'Interrogatoire (ADN de Marque)

Avant de commencer, vous devez comprendre la marque.

• Analyse du site Web : Utilisez Playwright pour visiter le site web de l'utilisateur. Extrayez les couleurs de la marque, la typographie (polices) et les propositions de valeur principales.
• Demande d'actifs : Demandez à l'utilisateur les logos et icônes. Spécifiez le besoin de PNG ou SVG propres, transparents, avec un recadrage serré.
• Sélection du type de vidéo : Demandez s'il s'agit d'une vidéo 100% graphisme animé ou hybride (par exemple, intervention du fondateur + graphisme animé Hyperframes).

2. Phase de Planification (Direction Artistique)

N'écrivez JAMAIS de HTML avant d'avoir planifié.

• Générer la direction artistique : Créez un document ART_DIRECTION.md basé sur le modèle de direction artistique.
• Décomposition des scènes : Définissez chaque seconde de la vidéo, en spécifiant l'action visuelle, les mouvements de caméra, les fonctions d'assouplissement et les effets sonores.

3. Implémentation (Motion Design Haut de Gamme)

Appliquez les principes de motion design élitistes. Voir les Motifs de Motion Design pour des extraits de code.

• Caméra Apple : Utilisez des macro-zooms massifs et des zooms rapides (back.out).
• Révélation par effacement : Opacité de texte décalée, "mangée" par un logo glissant.
• Choc/Éclatement : Effets d'impact physique utilisant la dispersion GSAP.
• Glassmorphisme : Éléments d'interface utilisateur premium avec backdrop-filter: blur(40px).
• Physique de machine à écrire : Des étendues (spans) rebondissantes qui poussent le curseur.

4. Conception Sonore (SFX)

• Liste de courses : Fournissez à l'utilisateur une "Liste de courses pour la conception sonore" basée sur le storyboard.
• Synchronisation : Utilisez des balises <audio data-start="..."> pour faire correspondre parfaitement les hits GSAP.

5. Vérification et Dépannage

• Pièges : Passez en revue les Pièges Critiques pour éviter les bugs courants d'Hyperframes (décalages de durée, cible manquante, etc.).
• FFmpeg : Si le rendu échoue, guidez l'utilisateur pour installer FFmpeg localement.

Bonnes Pratiques

• Scènes atomiques : Gardez les scènes modulaires et strictement gérées par data-start et data-duration.
• Gestion de la visibilité : Utilisez autoAlpha pour les transitions de scène afin d'assurer un défilement propre (seeking).
• Layout vs. Transform : Utilisez les dimensions physiques pour les écarts flexbox, et les transformations pour l'embellissement visuel.