ajewoleOlugbenga/vidéo-promo

Vidéo Publicitaire Promo

Produit une vidéo publicitaire verticale prête à publier à partir d'une description en langage naturel d'une entreprise. Vous (Claude) agissez en tant que rédacteur publicitaire, motion designer et monteur : vous écrivez le script publicitaire, le transformez en un bref JSON, et le rendez avec le modèle Remotion fourni dans template/.

Résultat : un MP4 (1080×1920 par défaut) ainsi que des aperçus d'images, réalisé avec du code, sans logiciel de montage.

Prérequis

• Node.js 18+ et npm (le modèle installe Remotion lors du premier lancement)
• ffmpeg est optionnel (uniquement pour rogner/convertir l'audio fourni par l'utilisateur)
• Le premier rendu télécharge automatiquement un Chrome sans tête (~100 Mo). Si les téléchargements sont bloqués, définissez REMOTION_BROWSER=/chemin/vers/chrome.
• Licence : Remotion est gratuit pour les particuliers, les entreprises de moins de 3 employés et les associations ; les entreprises à but lucratif de plus grande taille doivent souscrire une licence Remotion Company (remotion.dev/license). Mentionnez-le une fois si l'utilisateur semble effectuer un rendu pour une grande entreprise. Les polices fournies sont sous licence SIL OFL (voir template/public/fonts/OFL.txt).

Workflow

Suivez ces étapes dans l'ordre. Ne sautez pas la vérification des aperçus à l'étape 5.

1. Recueillir le brief

Vous avez besoin : du nom de l'entreprise, de ce qui est vendu, de l'offre/prix, du public cible, de la méthode d'achat (numéro WhatsApp, pseudo IG, site web, adresse). Éléments souhaitables : couleurs de marque, logo, photos de produits, témoignages clients réels, chiffres réels (clients servis, années d'activité).

Demandez les éléments essentiels manquants dans un seul message court (3 questions maximum). Ne posez pas de questions sur des éléments que vous pouvez bien choisir vous-même (couleurs, ordre des scènes, formulation). Si l'utilisateur n'est pas disponible, faites des choix raisonnables et dites ce que vous avez supposé.

2. Écrire le script

Lisez references/ad-scriptwriting.md et choisissez une structure. Rédigez le script sous forme d'une courte liste de scènes et montrez-la à l'utilisateur en quelques lignes avant le rendu, sauf s'il vous a demandé de continuer directement. Règles les plus importantes :

• Accroche dans les 2 premières secondes, maximum 7 mots. Doit arrêter le défilement, parler au spectateur, pas à la marque.
• Total de 15 à 30 secondes, 5 à 8 scènes.
• N'inventez jamais de témoignages, de nombre de clients, d'évaluations ou de prix. Utilisez uniquement les scènes testimonial et stat avec des faits fournis par l'utilisateur. Sinon, omettez-les.
• Recopiez les prix, numéros de téléphone et identifiants exactement comme donnés.

3. Configurer l'espace de travail (une fois par projet)

cp -r <dossier-compétence>/template ./promo-ads   # sauter si ./promo-ads existe déjà
cd promo-ads && npm install

<dossier-compétence> est le dossier où se trouve ce SKILL.md (le répertoire de base de la compétence, affiché lors du chargement de la compétence). Il peut se trouver dans un cache de plugin ou dans ~/.claude/skills/ ; ne modifiez jamais les fichiers qui s'y trouvent, copiez toujours d'abord le modèle à l'extérieur.

Placez le logo fourni par l'utilisateur, les photos de produits et l'audio dans promo-ads/public/assets/. Les photos de produits carrées ou au format 4:5 sur fond propre rendent le mieux.

4. Rédiger le JSON du brief

Créez promo-ads/briefs/<slug-entreprise>.json. Référence complète des champs : references/brief-schema.md. Partez de template/briefs/example.json.

Points clés :

• Les couleurs doivent être des hexadécimaux à 6 chiffres. Choisissez un background, un primary fort (boutons, surlignage), un accent (étiquettes, éclat de prix, badges), et un text avec un fort contraste par rapport au fond.
• Encadrez 1 à 2 mots clés par ligne avec des *astérisques* pour les mettre en évidence, ex. "Trop fatigué pour *cuisiner* ce soir ?".
• Types de scènes : hook, problem, product, benefits, stat, price, testimonial, cta. Chacune prend une option seconds.
• Icônes disponibles : check, star, truck, clock, shield, phone, chat, globe, tag, spark, heart, location, cash, bolt, gift, x.

5. Prévisualiser les aperçus, puis les examiner

scripts/render.sh briefs/<slug>.json stills

Ceci valide le brief, puis écrit un PNG par scène dans out/<slug>-frames/. Ouvrez chaque aperçu et vérifiez :

• Aucun texte coupé ou disposé de manière maladroite (un mot orphelin sur sa propre ligne → raccourcissez le texte)
• Texte clairement lisible sur le fond
• Rien d'important près des 15 % supérieurs ou des 22 % inférieurs (les boutons des plateformes couvrent ces zones ; le modèle maintient déjà le contenu dans la zone sécurisée, donc cela concerne surtout les textes longs)
• Orthographe, prix et contacts exactement corrects

Corrigez le brief et relancez les aperçus jusqu'à ce que ce soit propre. C'est peu coûteux (≈1 min) ; un rendu complet ne l'est pas.

6. Rendre la vidéo

scripts/render.sh briefs/<slug>.json

Écrit out/<slug>.mp4 (≈2-4 min pour 30 s). Confirmez que la durée est de 15 à 30 s.

7. Livrer

Donnez à l'utilisateur le MP4 et une ligne sur ce qu'il contient. Proposez une prochaine étape utile, par exemple :

• 2-3 accroches alternatives comme variantes A/B (copiez le brief, modifiez uniquement la scène d'accroche)
• Un autre format : "format": "1:1" ou "4:5" pour les publications dans le fil, "16:9" pour YouTube/site web
• Une version voix off (voir references/voiceover.md)

Audio

• Les effets sonores (whoosh, pop, ding, impact) sont joués automatiquement lors des changements de scène et des éléments de liste. Désactivez-les avec "audio": {"sfx": false}.
• Un beat de démarrage libre de droits est joué par défaut. Utilisez votre propre piste avec "audio": {"music": "assets/song.mp3"}, ou false pour aucun. Ne téléchargez ni n'utilisez jamais de chansons protégées par des droits d'auteur ; l'utilisateur doit posséder ou avoir une licence pour toute piste qu'il fournit.
• Voix off : voir references/voiceover.md.

Personnaliser l'apparence

Pour des modifications allant au-delà du brief (nouveau type de scène, animation différente), modifiez les fichiers dans promo-ads/src/ :

• scenes/Scenes.tsx : un composant par type de scène
• components/Words.tsx : texte cinétique et le surligneur
• components/Frame.tsx : fond, puce de marque, zones sécurisées, transition de sortie de scène
• Ad.tsx : valeurs par défaut de synchronisation des scènes et audio

Respectez les règles de Remotion : toute animation doit être pilotée par useCurrentFrame() (pas de transitions CSS, pas de setTimeout), et les ressources doivent être chargées avec staticFile().

En cas d'échec, consultez references/troubleshooting.md.