bayvibe/promo-video-skill

Compétence Vidéo Promo (Remotion)

Générer une vidéo promotionnelle à partir d'une URL de site web ou d'informations de marque fournies par l'utilisateur.

Deux Parcours

Parcours A : L'utilisateur a fourni une URL

Lorsque l'utilisateur vous donne une URL :

1. Exécutez python generate_promo.py --source <url> pour générer src/data/brand.json et src/data/script.json
2. Montrez immédiatement le script généré à l'utilisateur — présentez un résumé propre :

   Nom de la marque : xxx
   Accroche : xxx
   Couleur principale : #xxx
   Planification des scènes :
     1. Intro (3s) — Logo + Nom + Accroche
     2. Fonctionnalités (5s) — Fonction 1 / Fonction 2 / Fonction 3
     3. Tableau de bord (4s) — Affichage de l'interface produit
     4. Appel à l'action (3s) — "xxx" + Bouton
   

3. Demandez : « Confirmez-vous ce script ou souhaitez-vous des ajustements ? »
4. Après confirmation, exécutez npm run dev et dites à l'utilisateur de prévisualiser à l'adresse http://localhost:3000

Parcours B : L'utilisateur n'a rien fourni

Lorsque l'utilisateur dit simplement « générer une vidéo » / « faire une promo » sans précision, ne commencez pas à coder. Posez plutôt les questions suivantes (un seul message, toutes à la fois) :

1. Quel est le nom de la marque ? (ou le nom du produit/projet que vous souhaitez promouvoir)
2. Une phrase pour décrire votre produit (utilisée comme accroche)
3. Avez-vous une couleur de marque ? (sinon, je vous aiderai à en choisir une)
4. Quels sont les points forts à mettre en avant ? (3 maximum)
5. Avez-vous une URL de site web ? (si oui, je peux récupérer automatiquement les informations)

Une fois que l'utilisateur a répondu, écrivez directement src/data/brand.json et src/data/script.json en fonction de ses réponses. Affichez ensuite le résumé du script et confirmez (comme aux étapes 2-3 du Parcours A).

Après Confirmation

1. Exécutez npm run dev pour démarrer Remotion Studio
2. Dites à l'utilisateur de prévisualiser à l'adresse http://localhost:3000
3. Pour exporter : npx remotion render PromoVideo out/promo.mp4

Principes de Conception

Principes Visuels

• Remplir le cadre, réduire les espaces vides — Les scènes du milieu (Fonctionnalités / Tableau de bord) utilisent flex: 1 ou une mise en page pleine largeur pour occuper le canevas 1920×1080, évitant les grandes zones vides
• Éviter les mises en page répétitives — Ne pas répéter la même structure « grand titre à gauche + carte/mockup à droite + sous-titres en bas » au sein d'une même vidéo. Chaque vidéo doit utiliser au moins 3 compositions nettement différentes : par exemple titre pleine page, ticker incliné, composition centrée sur axe, cartes en collage, colonnes façon magazine, interface produit plein écran, overlay de code, composition chronologique/chemin.
• Les coins arrondis des cartes doivent être cohérents dans une même vidéo — Définir un jeton CARD_RADIUS pour toute la vidéo. Toutes les cartes, panneaux, conteneurs mockup, blocs de fonctionnalités utilisent la même valeur. Ne pas avoir tantôt des angles droits, tantôt 12px, tantôt 34px dans la même vidéo. Les sous-titres, logos, petits boutons, barres de progression peuvent avoir leurs propres coins arrondis fonctionnels, mais les cartes de contenu doivent être uniformes.
• Les cartes ne sont pas la solution par défaut — Les scènes de fonctionnalités peuvent utiliser des compositions décalées, des superpositions en profondeur, des tickers, des diagrammes de nœuds, des panneaux d'éditeur, des recadrages de captures d'écran produit ; ne pas utiliser par défaut trois cartes égales sur une ligne horizontale.
• La page de fin doit utiliser un format différent — La scène d'appel à l'action/fin ne doit pas réutiliser la structure titre à gauche + carte à droite ou titre à gauche + bouton à droite des scènes précédentes. Privilégier une composition centrée, une mise en page façon affiche, des blocs d'informations enveloppants, une fermeture typographique plein écran, ou la marque/URL comme centre visuel, créant ainsi une dernière image distincte. En composition centrée, le bouton d'appel à l'action et l'URL doivent être empilés verticalement, en maintenant un axe central stable.
• La couleur principale est extraite du bouton d'appel à l'action du site — La couleur de la marque doit être extraite du dégradé dans le style en ligne des éléments button/a, pas d'une couleur CSS aléatoire
• Sous-titres globaux — Chaque scène affiche une barre de sous-titres centrée en bas (fond semi-transparent en forme de pilule), taille de police 32px, padding 18px 48px, animation d'entrée ressort. Les sous-titres sont contrôlés par le champ subtitle de chaque scène dans script.json ; s'il n'est pas défini, ils ne s'affichent pas.
• Seule l'entrée via URL est prise en charge — Le mode SVG a été supprimé ; seules les URL de sites web sont acceptées comme source de données.

Règles d'Extraction

• Le nom de la marque utilise d'abord og:site_name, puis la balise title (en prenant la première partie avant - ou |)
• L'accroche utilise d'abord og:description, tronquée à 80 caractères maximum
• La couleur de la marque extrait d'abord la couleur du dégradé dans le style en ligne des éléments button/CTA
• Les titres des fonctionnalités sont filtrés pour que leur longueur soit < 45 caractères ; les phrases trop longues sont ignorées
• Détecter le thème clair/sombre du site et adapter automatiquement les couleurs d'arrière-plan et de texte

Liste de Vérification des Données

Après avoir généré les données, vérifiez les points suivants avant de les soumettre à l'utilisateur :

• Le nom de la marque est-il court et propre (pas le titre HTML complet) ?
• L'accroche fait-elle moins de 80 caractères ?
• La couleur principale provient-elle du bouton CTA (pas d'une couleur aléatoire) ?
• Y a-t-il exactement 3 fonctionnalités, avec des titres courts et percutants ?
• Le texte de chaque scène est-il lisible sur le canevas 1920×1080 ?

Liste d'Auto-Vérification Visuelle (Obligatoire)

Après avoir implémenté ou modifié une vidéo, vous devez effectuer une inspection visuelle vous-même, sans vous limiter à exécuter npm run lint :

1. Exécutez npm run lint
2. Utilisez npx remotion compositions src/index.ts pour confirmer que la composition existe et que sa durée est correcte
3. Exportez au moins 1 image fixe par scène principale pour vérifier la mise en page. Par exemple :

   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene1.png --frame=30
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene2.png --frame=120
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene3.png --frame=210
   

4. Ouvrez les images des images clés et vérifiez les points suivants. Si l'un d'eux est détecté, corrigez-le avant de livrer.
   • Aucun texte clé, bouton ou sous-titre n'est coupé ou ne dépasse du canevas
   • Les éléments de décoration/mise en page dynamique (ticker, graphiques d'arrière-plan, titres surdimensionnés coupés) doivent donner l'impression d'être un choix de conception, pas une erreur ; ils peuvent dépasser du canevas
   • Les contrôles à l'intérieur des cartes (barres de progression, barres de graphiques, champs de saisie, boutons, barres d'état) ne doivent pas dépasser des limites de la carte ; ces débordements involontaires doivent être corrigés
   • Aucun élément ne se chevauche au point de rendre la lecture difficile
   • Les sous-titres sont centrés et ne masquent pas l'appel à l'action principal ou l'élément visuel central
   • Tous les contenants de cartes/panneaux/mockup d'une même vidéo utilisent le même CARD_RADIUS
   • Au moins 3 mises en page différentes sont utilisées ; la vidéo entière ne répète pas la même structure de division gauche-droite
   • Les bords de l'image ont une zone de sécurité : le texte clé est à au moins 64px du bord
   • Les mots longs, les titres longs et le texte des boutons ne débordent pas de leur conteneur
5. Si l'utilisateur souhaite simplement prévisualiser dans Studio, ne l'exportez pas en mp4 ; assurez-vous simplement que http://localhost:3000 est accessible.

Structure des Fichiers

src/
├── Root.tsx              # Enregistrement de la composition Remotion
├── PromoVideo.tsx        # Orchestrateur vidéo principal
├── scenes/
│   ├── Scene01_Intro.tsx     # Logo + Nom de la marque + Accroche
│   ├── Scene02_Feature.tsx   # Trois cartes de largeur égale en ligne horizontale avec animation d'apparition
│   ├── Scene03_Dashboard.tsx # Simulation d'interface produit pleine largeur
│   └── Scene04_CTA.tsx       # Appel à l'action + Bouton
└── data/
    ├── script.json       # Script vidéo (texte, chronologie)
    └── brand.json        # Données de marque (couleurs, polices, logo)

Format des Données

brand.json

{
  "name": "Nom de la Marque",
  "tagline": "Description en une ligne",
  "colors": {
    "primary": "#3E4E33",
    "secondary": "#687058",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#0F172A",
    "textSecondary": "#64748B",
    "accent": "#3E4E33"
  },
  "font": "Inter, sans-serif",
  "logoUrl": "",
  "features": [
    { "title": "Fonctionnalité 1", "description": "Brève description" },
    { "title": "Fonctionnalité 2", "description": "Brève description" },
    { "title": "Fonctionnalité 3", "description": "Brève description" }
  ],
  "cta": {
    "headline": "Prêt à commencer ?",
    "buttonText": "Commencer gratuitement",
    "url": "https://example.com"
  }
}

script.json

{
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "scenes": [
    { "id": "intro", "duration": 90, "headline": "", "subtext": "", "subtitle": "" },
    { "id": "feature", "duration": 150, "headline": "", "subtitle": "", "items": [] },
    { "id": "dashboard", "duration": 120, "headline": "", "subtitle": "" },
    { "id": "cta", "duration": 90, "headline": "", "buttonText": "", "subtitle": "" }
  ]
}

Personnalisation

• Modifiez src/data/brand.json pour changer les couleurs, polices, logo, nom de la marque
• Modifiez src/data/script.json pour changer le texte et le timing des scènes
• Modifiez les composants des scènes dans src/scenes/ pour les modifications de mise en page et d'animation