david-d2c2/motion-promo-reels

Bandes-annonces promotionnelles avec animations graphiques générées par code

Vidéos de 15 à 30 secondes entièrement générées par code : canvas 2D → images → ffmpeg, avec audio synthétisé dans numpy. Pas de modèles vidéo, pas d'After Effects, pas de musique tierce. Cela couvre trois cas :

• une personne ou une marque personnelle (16:9) ;
• une poignée de produits (9:16) ;
• le catalogue complet d'une boutique (9:16, des dizaines ou centaines de vidéos).

Principe directeur : rien d'inventé. Chaque chiffre, prix, couleur ou caractéristique montré dans la vidéo provient d'une source vérifiée : site web, API de la boutique, page produit ou documents du projet. Si quelque chose ne peut pas être confirmé, signalez-le comme « en attente » et dites-le.

Ce package fournit trois modèles complets dans ${CLAUDE_SKILL_DIR}/templates/ (dans la conversation sur claude.ai : templates/, à côté de ce fichier). Copiez le modèle le plus proche dans le projet de l'utilisateur et adaptez-le au lieu de reconstruire le moteur (voir section 4). templates/README.md liste ce qu'il faut modifier dans chaque modèle.

Rédigez tous les textes à l'écran dans la langue du public de la marque et répondez à l'utilisateur dans sa langue. Les chaînes d'interface fixes (« from », « colors », « NOT HIM »…) sont remplacées via le bloc textos du modèle, jamais en modifiant le moteur. Accordez le genre de la personne dans no_es.

0. Choisir le cas

Cas	Modèle	Format	Durée	Unité de gag
Personne ou marque personnelle	persona-16x9	1920×1080	27 s	Un, écrit à la main
Site web ou service	persona-16x9, adapté	16:9 ou 9:16	20–30 s	Un, écrit à la main
Quelques produits (≤10)	producto-9x16	1080×1920	15,5 s	Un par produit, écrit à la main
Catalogue (des dizaines à centaines)	catalogo-9x16	1080×1920	15,5 s	Un par catégorie, avec des phrases modèles remplies à partir des données de chaque produit

Si l'utilisateur ne précise pas, utilisez le 9:16 pour les produits et dites-le en une ligne.

1. Recherche (avant d'écrire une seule ligne de script)

Sources, dans l'ordre :

1. Le dossier du projet, s'il existe. Lisez CLAUDE.md, AGENTS.md, les journaux de décision, les rapports et les plans de réseaux sociaux. C'est là que se trouvent les règles de marque et de rédaction (par ex. « pas de noms de marque tiers », « ton informel », « pas de superlatifs vides »), ainsi que les jetons de conception, les règles de modération et les mentions légales (étiquetage IA). Ces règles priment sur toute idée créative.
2. Le site web officiel. Hero, services, statistiques, méthode, stack, références. Sur un site riche en JS, utilisez un navigateur et lisez document.body.innerText section par section.
3. Boutiques en ligne :
   • WooCommerce : /wp-json/wc/store/v1/products?per_page=100&page=N et /products/<id>. Les prix sont en centimes. prices.price_range avec min ≠ max → « from » ; on_sale + regular_price → prix barré ; attributes (couleurs, tailles, mesures) ; description (souvent avec des listes à puces structurées) ; permalink.
   • Shopify : /products.json et /products/<handle>.json.
   • Ne devinez jamais les slugs ou les URL : lisez-les dans permalink.
4. Recherche web. Utile pour les personnes, mais les noms courants renvoient des homonymes. Si cela se produit, transformez-le en matériau de script (voir section 2) au lieu de le cacher.
5. Photos : fichiers locaux du projet d'abord. Les environnements cloud ne peuvent souvent pas télécharger depuis la boutique ; ne réessayez pas sans cesse. Utilisez soit des photos locales, soit dessinez le produit en code (les rayures, les vagues satinées et les formes simples rendent mieux que vous ne le pensez).

Notez la date à laquelle vous avez lu les données : les prix deviennent obsolètes.

2. Concept : le gag

Un gag est une propriété réelle du produit ou de la personne, transformée en quelque chose que la vidéo elle-même fait. Ce n'est pas une blague ajoutée par-dessus. Exemples de mécaniques, toutes implémentées dans les modèles (les identifiants de gag sont en espagnol dans le code) :

Mécanique	Propriété réelle	Ce que fait la vidéo
invisible	Transparent, caché, discret	Un cadre vide : « Il y a un étui ici. Vous ne le voyez pas ? Bien sûr que non, il est transparent. » L'écran se dézippe ensuite comme une fermeture éclair.
contador (compteur)	Une grande quantité (mètres, heures, unités)	« Cette bande-annonce dure 15 s. Ce rouleau, 50 m. Vous n'aurez pas le temps de l'épuiser. » Un compteur tourne.
diagonal	Coupe en biais, rayures ou motif diagonal	Le texte s'incline à 45° et des rayures traversent l'écran.
brillo (brillance)	Finition brillante ou satinée	« Ce texte est mat. / Celui-ci brille. » (avec un éclat)
cortar (couper)	Pas de lacets, pas de câbles, pas d'attaches	Deux fils tiennent le texte, sont coupés, et le texte reste en place.
elevar (élever)	Plateforme, push-up, hauteur	Le texte s'élève sur un « coussin ».
secuencia (séquence)	De nombreuses tailles, largeurs ou variantes	Les variantes réelles défilent une par une : « Ici, du E au H. »
quitar (enlever)	« Sans X »	Deux anneaux sont dessinés et s'envolent : « Disparu. »
ritmo (rythme)	Sport, mouvement	Les mots atterrissent sur le rythme.
reordenar (réorganiser)	Multi-usage, convertible	Deux lignes changent de position : parallèles, croisées, en V.
patron (motif)	Broderie, imprimé, dentelle	Un motif décoratif se dessine tout seul.
calma (calme)	Catégories sensibles (santé, post-opératoire, maternité…)	Pas de gag, pas de chocs sonores, pas de percussions : un ton serein.
homonimos (homonymes, personne)	Un nom courant sur Google	investigar("Nom") montre les homonymes barrés avec « PAS EUX », puis « SOURCE TROUVÉE ».

Règles :

1. Une propriété réelle et vérifiable.
2. Trois lignes : mise en place, rebondissement, chute (la chute en italique ou dans la couleur d'accent).
3. La chute ne doit pas être fausse. Si la page produit ne le dit pas, ne l'affirmez pas. Les phrases conditionnelles (si/sino dans la configuration) permettent à une chute de n'apparaître que lorsque la description la justifie.
4. Un élément autoréférentiel fixe dans toute la vidéo, lié au secteur : un HUD avec code temporel et compteur d'images (technologie), une ligne de couture avec un compteur de points (artisanat, textile), un mètre ruban qui « mesure » la bande-annonce (mode, taille). Faites-le résonner dans l'outro (« Cette bande-annonce mesure 15,5 s. Une taille unique. »).
5. Ne plaisantez jamais sur les corps. Les catégories sensibles utilisent calma. Vérifiez aussi qu'aucun dessin abstrait ne pourrait être interprété comme une silhouette humaine.
6. Pas de superlatifs vides, pas de comparaisons avec les concurrents.

3. Structure

9:16 produit (15,5 s à 30 ips = 465 images)

Scène	Temps	Contenu
Accroche	0–3,0	Le gag
Produit	3,0–5,6/5,8	Nom + photo avec un rebond (ou un dessin procédural, ou une carte de substitution)
Gamme	~2,8 s	Nombre réel de couleurs, ou gamme (tailles), variantes et couleurs avec leurs noms
Faits	~2,6 s	Trois faits issus de la page produit, avec des coches animées
Prix	~1,8 s	Prix réel, « from » ou solde, note fiscale si applicable
Outro	13,2–15,5	Logo ou marque, site web dans une pastille, livraison ou CTA, et le clin d'œil de fin

16:9 personne ou marque (27 s) : terminal → homonymes barrés avec un glitch → drop (source trouvée + titre) → statistiques avec compteurs → méthode en phases → bandeau défilant de la stack technique (se fige sur un élément autoréférentiel : « ↑ c'est moi ») → « CETTE VIDÉO : 0 modèles · N lignes de code » (nombre réel) → citation de la personne → outro avec monogramme, nom et CTA.

4. Moteur

<projet>/<dossier-reels>/
├── METODO.md        méthode, règles et liste de contrôle (pour les humains)
├── CLAUDE.md        état et tâches à faire (pour la prochaine session)
├── config.json      (catalogue) boutique, attributs, étiquettes, palette et catégories → gag + phrases
├── productos.json   marque + un bloc par produit
├── motor.html       canvas 1080×1920 ou 1920×1080 ; window.renderFrame(f) est DÉTERMINISTE
├── render.js        puppeteer-core → une JPEG par image → ffmpeg image2pipe ; puis audio et muxage
├── audio.py         synthèse numpy/scipy utilisant la MÊME table de repères que motor.html
├── catalogo.js      (catalogue) API → fiche produit : gag, phrases, faits, suppression de marque
├── extraer.js       (catalogue) télécharge le catalogue et les photos avec un UA navigateur et des pauses ; REVISAR.md
├── fonts/           woff2 locales + leur licence (fontsource : `npm pack @fontsource/<famille>@<version>`)
├── img/             photos locales
└── out/             vidéos finales

Clés techniques :

• Déterminisme : chaque image est calculée à partir de t = f/FPS. Pas de requestAnimationFrame, pas d'aléatoire non ensemencé (utilisez hash(n)).
• Aides : clamp, P(t,a,b) (progression), easings (eOC, eIOC, eOX, eIX, eOB avec rebond), T_() pour le texte avec letterSpacing et alpha, fit() pour réduire le texte jusqu'à ce qu'il tienne, rr() pour les rectangles arrondis.
• Les scènes sont des fonctions qui reçoivent le temps local u = t - T.scene. Les transitions sont un voile de couleur de fond de ±0,16 s à chaque coupe.
• render.js : page.evaluateOnNewDocument(spec => window.SPEC = spec), attend window.READY (polices et images chargées), puis canvas.toDataURL('image/jpeg', .93) → stdin de ffmpeg -f image2pipe -c:v mjpeg -i - -c:v libx264 -preset veryfast -crf 18 -pix_fmt yuv420p.
  • Lancez Chrome avec --allow-file-access-from-files ; sinon les images locales corrompent le canvas.
  • Cherchez Chrome ou Edge dans leurs chemins standards, ou dans CHROME_PATH.
  • Gardez un mode --stills t1,t2,… pour la révision.
• Muxage : -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -movflags +faststart -shortest.
• Audio : une progression de 4 accords correspondant au ton de la marque (technologie : 128 BPM avec kick, basse et pluck ; artisanat : 112 BPM pizzicato et marimba ; élégant : 96 BPM piano et cordes).
  • Effets par gag : fermeture éclair = une rafale accélérée de clics ; machine = un train de clics + ronronnement ; ciseaux = deux claquements ; brillance = un arpège aigu.
  • Effets partagés : whoosh sur les coupes, tic sur les compteurs, carillon sur le prix.
  • Sidechain léger sous le kick, tanh pour limiter, puis normaliser.
• Sous Windows, les scripts appellent python ; sous Linux et macOS, python3.

5. Données du catalogue sans rien inventer (catalogo.js + config.json)

• Nom affiché : le nom du produit sans marcas_a_quitar (marques à supprimer, si les règles de copie l'exigent) et sans palabras_tipo (mots génériques de type tels que « Sneaker » ou « Boot »). S'il ne reste qu'un code, utilisez le nom sans la marque.
• Faits : les puces sous titulo_datos dans la description, à l'exclusion de la composition. S'il n'y en a pas, prenez des phrases de la description courte coupées sur « . » et « : ». Le troisième fait est la composition à partir de l'attribut matière, en conservant les acronymes comme EVA.
• Coupe : coupez les phrases à ~54 caractères. Coupez d'abord à une virgule ; sinon avant la dernière proposition subordonnée (« avec », « pour », « qui », « et »). Ne terminez jamais sur une préposition ou un article.
• Couleurs : table nom → hex dans motor.html. Les couleurs bicolores (« Noir/Blanc ») reçoivent un échantillon divisé. Les couleurs inconnues sont rendues en gris neutre avec leur nom réel.
• Éditions manuelles : "manual": true sur un produit le protège contre l'écrasement lors de la prochaine extraction.
• REVISAR.md (liste de révision) : ton sensible, pages sans puces, produits sans photo ni attributs.
• Testez la transformation sur le catalogue réel en collant la fonction dans la console du navigateur de la boutique avant de faire confiance à l'extracteur. Si l'étape de téléchargement n'a pas pu être testée, dites-le.

6. Contrôle qualité (obligatoire avant livraison)

1. Rendez des images fixes pour chaque scène, construisez une planche contact avec PIL (pas xstack avec de nombreuses entrées : ffmpeg peut planter) et regardez-la. Vérifiez :
   • texte qui se chevauche ou phrases tronquées ;
   • accents sur les grands titres qui entrent en collision avec la ligne du dessus ;
   • éléments qui empiètent sur une autre ligne ;
   • lettres qui disparaissent sous un éclat trop blanc ;
   • blocs « — » vides lorsqu'un attribut manque ;
   • moitiés inférieures vides en format vertical.
2. Zones de sécurité 9:16 : rien d'important au-dessus de ~250 px (interface Reels) ni dans les ~320 derniers px (légende). Seul l'élément décoratif va là-bas.
3. Données : prix du jour, « from » lorsqu'il y a une fourchette, soldes qui peuvent expirer, unités non confirmées (signalez-les), URL vérifiées.
4. Légal et modération :
   • Photos avec des personnes générées ou modifiées par IA → une étiquette visible dans la vidéo (règlement européen sur l'IA, art. 50 ; ia.mostrar_si_foto dans la configuration). Divulguez-le aussi lors de la publication.
   • Produits montrés sur le corps : photo pleine, style catalogue, pas de recadrages agressifs, peu de temps d'écran.
   • Ne promettez jamais de retours ou de garanties qui ne s'appliquent pas.
5. Audio : ffmpeg -af ebur128 → environ −14 LUFS. Vérifiez la durée et la résolution avec ffprobe.

7. Livraison

• Lorsque vous travaillez sur la machine de l'utilisateur, écrivez tout dans un sous-dossier de son projet et conservez les fins de ligne de tout fichier que vous modifiez. Ne touchez pas aux fichiers CLAUDE.md ou aux documents existants : créez les vôtres dans le sous-dossier.
• METODO.md : ce qui s'y trouve, comment l'exécuter, d'où vient chaque donnée, les règles de marque appliquées, comment ajouter un produit ou un gag, une liste de vérification pré-publication et les limites connues.
• CLAUDE.md du sous-dossier : état, tâches à faire et règles non négociables, en quelques lignes.
• Montrez les vidéos et résumez : les gags (un par ligne), où tout se trouve, la commande pour régénérer, et toutes les données encore à confirmer.

Erreurs courantes (à éviter)

• Deviner les slugs des produits. Lisez-les dans permalink.
• Un gag de texte pivoté qui empiète sur les lignes suivantes : repositionnez les lignes lorsque le texte pivote.
• Un éclat satiné trop blanc mange les lettres. Utilisez une teinte de marque claire, pas du blanc pur.
• Les dégradés d'échantillons dont les arrêts de couleur s'effondrent laissent des bandes diagonales. Utilisez plutôt une couche d'éclat séparée et masquée.
• Un prix barré sur un produit avec une fourchette de prix : utilisez « from » + un badge de solde, sans le barré.
• Unités manquantes sur la page produit (par ex. mesures sans « cm ») : omettez-les ou signalez-les pour confirmation.
• Formes abstraites qui ensemble suggèrent une silhouette humaine : remplacez-les par des figures sans ambiguïté.