aakashmehra/superbrag

/superbrag

URL du site Web → vidéo promotionnelle terminée : une courte vidéo soignée sur un site, avec une voix off, une animation synchronisée et un langage de conception tiré du site lui-même. Couleurs, polices, cartes, arrière-plan et avatar proviennent du site promu. Chaque image et affirmation provient du site. Les « écrans » sont des maquettes d'interface utilisateur rendues avec Remotion, pas des pixels générés par IA.

<skill-dir> = le dossier contenant ce fichier. <ws> = le dossier du projet actuel de l'utilisateur. Configuration unique (ignorer si <skill-dir>/.venv et <skill-dir>/template/node_modules existent) : nécessite Node.js 22+, FFmpeg, Python 3 et espeak-ng, puis exécutez bash <skill-dir>/scripts/setup.sh. Il installe Remotion et Playwright, un environnement Python avec Kokoro (voix locale gratuite) et faster-whisper (synchronisation des mots), et écrit leurs chemins dans <skill-dir>/.env.

Invocation

/superbrag https://example.com
/superbrag https://example.com --focus "restaurants"        # quel client/service raconter
/superbrag https://example.com --voice minimax|elevenlabs|kokoro --voice-id <id>

Par défaut, la voix est Kokoro af_heart (gratuite, locale). Si MINIMAX_API_KEY ou ELEVENLABS_API_KEY est défini dans <skill-dir>/.env, ce fournisseur est utilisé à la place. La sortie va dans <ws>/superbrag-output/<slug-du-domaine>/, avec un suffixe -2, -3 si le dossier existe déjà.

Étape 1 : Capturer le site

export PATH="/opt/homebrew/bin:$PATH"   # macOS Homebrew ; inoffensif ailleurs
node <skill-dir>/scripts/capture.mjs <url> <run>

Cela écrit <run>/site.json (titre, meta, titres, CTA, texte complet, polices, liens Google Fonts, couleurs, variables CSS et la liste d'images avec texte alternatif et contexte environnant) et <run>/public/site/* (chaque image plus screenshot-hero.png et screenshot-full.png).

Ensuite, regardez les images (lisez-les). Les détails imprimés dans les captures d'écran (évaluations, emplacements, délais de livraison) sont parmi les meilleures preuves, alors lisez-les, pas seulement le HTML. Si la page d'accueil manque de photo de personne ou de captures d'écran de produit, capturez une ou deux pages liées (à propos, projets) dans le même dossier d'exécution.

Porte : vous pouvez nommer la personne ou l'entreprise, où elle se trouve, les 2 à 4 services, la meilleure preuve (évaluation, client, chiffres), l'offre ou la garantie, le texte du CTA, l'URL et quelle image est la photo de la personne, l'avatar ou le logo, la capture d'écran du produit et l'image de preuve.

Étape 2 : Écrire l'histoire (<run>/story.json)

Choisissez un type de client et un scénario concret. Une histoire claire bat trois demi-histoires, alors laissez les autres services de côté. Choisissez le service avec les visuels et les preuves les plus forts, sauf si --focus dit le contraire. Remplissez ensuite la formule en 9 temps. Une phrase courte parlée par temps, environ 75 à 85 mots au total, ce qui donne environ 30 s.

#	type	Job	Exemple de ligne (posflexgrowth.com)
1	search	Accroche : le client recherche maintenant	« Votre prochain patient cherche maintenant. »
2	results	Problème : vous êtes invisible (sombre)	« Mais une autre clinique apparaît en premier. »
3	cost (enter: slide)	Coût du problème (reçu sombre, barre rétrécit)	« Et chaque appel manqué va à celui qui répond en premier. »
4	meet	La personne ou la marque : photo + avatar, nom, rôle, pastille de lieu, tagline	« Rencontrez Sajal Kumar, fondateur de PosFlex en Nouvelle-Zélande. »
5	browser	Montrer le vrai produit (capture d'écran du site) avec un panneau qui fait le travail	« Chaque appel manqué est renvoyé par SMS et réservé. Aucun n'est perdu. »
6	answer (enter: blur)	Preuve : classé #1 + une réponse IA le recommande	« Top trois sur Google Maps, et nommé quand les gens demandent à l'IA. »
7	quote	L'offre ou la garantie sur papier, tamponnée et signée	« Et notre promesse zéro risque, par écrit, avec un objectif de 12 semaines. »
8	payoff	Tagline + mot en évidence ; la recherche d'ouverture se transforme en résultat	« Trois jobs : être trouvé, être recommandé, être réservé. »
9	end	Nom + bouton CTA cliqué + URL	« Obtenez votre plan de croissance gratuit de PosFlex Growth. »

Règles :

• Le texte vient du site. Réutilisez ses propres phrases (description meta, lignes de service, comment ça marche, FAQ). Inventez uniquement les détails du scénario qui le rendent concret : la requête de recherche, les plats et les prix, une heure de réservation. Gardez les détails inventés plausibles pour le lieu : devise locale, noms locaux.
• Répétez la requête. La même requête de recherche apparaît dans les temps 1, 2, 6 et 8. L'histoire boucle sur elle-même, et c'est ce qui la rend conçue.
• Dites les mots déclencheurs. Les révélations se déclenchent lorsque leur mot est prononcé, donc place, le premier mot de name/role/tagline, chaque entrée de chips, highlight.cue, price et highlight (payoff) doivent apparaître dans le say de cette scène.
• Le langage de conception vient du site. Ne réutilisez jamais l'apparence d'une autre marque : chaque vidéo doit ressembler au site qui a été fourni. Lisez site.json → design (couleur de page, rayon des cartes, bordure et ombre, boutons, police h1, taille, poids et espacement, couleur d'accentuation du titre, marqueurs) et lisez les captures d'écran public/site/section-*.png, puis définissez :
  • primary = la couleur principale de la marque (boutons et liens) ; ink = la couleur du texte du site ; paper = design.pageBackground ; dark = la teinte la plus foncée du site (son encre ou arrière-plan en mode sombre) pour les scènes de problème.
  • highlight = un pastel que le site utilise réellement (une couleur de marqueur ou une variable CSS comme --bg: #DFFAAA) ; accent = une deuxième couleur de marque utilisée pour les pastilles et les chiffres.
  • style : radius = le rayon de carte le plus courant en px ; border = la couleur de bordure de la carte (omettre si les cartes sont sans bordure) ; shadow = flat (aucune), soft (légère teintée) ou lifted (profonde) ; tracking = espacement des lettres h1 ÷ taille de police (par exemple -1.2px/60px = -0.02) ; headWeight = poids h1 ; emphasis = design.headlineEmphasisColors[0].
  • Polices : head = police h1, ui = police du corps, script = police d'écriture manuscrite du site, ou Caveat. Toutes doivent être des Google Fonts.
  • Si le site écrit les titres en deux tons (« Remplissez votre calendrier »), marquez les mêmes mots avec *étoiles* dans title, headline et name (par exemple "PosFlex*.*" pour un point dans le logo). Ils s'affichent dans la couleur d'accentuation.
• background : light (la couleur de la page du site, unie) pour les sites clairs, ce qui couvre la plupart des cas. sky (nuages de dessin animé flottants sur une couleur de marque unie) uniquement si le site lui-même a un motif de ciel ou de nuage. soft (couleur de marque unie avec texte blanc) pour les marques audacieuses et saturées. Pas de dégradés où que ce soit : couleurs unies uniquement.
• Avatar : build.py utilise automatiquement l'icône Apple touch du site pour le badge « Rencontre » et la carte de fin lorsqu'elle a été capturée. Ne définissez avatar vous-même que lorsque le site n'en a pas, ou lorsque cette scène concerne quelqu'un d'autre (par exemple une étude de cas se terminant sur le créateur) : ajoutez alors "keepAvatar": true.
• Photo : pour meet, utilisez une vraie personne : le fondateur ou le propriétaire, depuis la page « à propos » ou « équipe » si la page d'accueil n'en a pas (capturez cette page dans un dossier temporaire et copiez l'image). Recadrez tout nom ou légende imprimé sur l'image (ffmpeg -vf crop=...).
• Pas une personne ? Dans meet, utilisez le logo ou la vitrine comme photo et la mascotte ou le logo comme avatar, avec kicker: "Rencontre" et le nom de la marque.
• Adaptation à d'autres entreprises : un site de métiers pourrait être search « plombier d'urgence près de chez moi » → results concurrents/annonces → cost « appels manqués cette semaine » → browser formulaire de devis + clic pour appeler → answer → quote « prix fixe » → payoff « Travail réservé ». SaaS : la recherche devient le job à accomplir, le coût correspond aux heures perdues, et le navigateur montre l'application.
• Prononciation : vérifiez les noms de marque et de personne. TTS une ligne par orthographe candidate, transcrivez chacune avec $WHISPER_PYTHON, et conservez l'orthographe qui revient comme le vrai nom. Pour PosFlex, « Pos Flex » a été entendu comme « Poe's Flex », et « Poss Flex » a été entendu comme « POSFLEX ». Mettez le gagnant dans voice.pronounce, par exemple {"PosFlex": "Poss Flex"}. Le texte à l'écran reste correct.

Schéma : copiez <skill-dir>/examples/posflexgrowth.story.json (un site clair avec des jetons style complets) ou snapshare.story.json (une application, thème ciel, avec scènes téléphone) et modifiez les valeurs. Ces propriétés existent par type de scène (toutes facultatives sauf indication contraire *) :

• search: query*, title, suggestions[]
• results: query*, results[{title, sub}], title, pill
• cost: title*, label, items[{name, price}], totalLabel, total*, keep*, cut*, cutCue (le mot qui commence le rétrécissement de la barre, par défaut « commission »)
• meet: photo*, avatar, kicker, name*, role, place, tagline
• browser: screenshot*, tab, panel{title*, items[{name, price}], chips[], extra{image, title, sub}, highlight{label, value, cue}, button}
• answer: query*, result{image*, rank, name*, meta, rating, ratingLabel}, below, aiLabel, answer, source{icon, label}
• quote: title*, forLabel, checks[], priceLabel, price, stamp, signature, signNote, signCue (par défaut « écrire »)
• payoff: headline*, highlight, query*, toast{title*, sub, meta}*
• end: name*, button*, avatar, url
• phone (applications et produits mobiles) : phone* (un téléphone encadré PNG avec fond transparent, par exemple depuis le site ou les captures d'écran de l'App Store), title*, kicker, big (une grande statistique comme "*0*"), points[] (pastilles qui apparaissent lorsque leur premier mot est prononcé), icon (icône de l'application), side (left | right), bg (brand | paper | dark). Pour une publicité d'application, remplacez les temps 4 à 6 par 3 à 5 scènes téléphone, une fonctionnalité chacune. Voir examples/snapshare.story.json.

Chaque scène peut également prendre say, enter (cut | slide | blur, par défaut cut) et hold (secondes supplémentaires). Les chemins d'image sont relatifs à <run>/public (site/...).

Porte : story.json a 9 temps dans cet ordre. Chaque mot déclencheur apparaît dans son say. Tout le texte remonte à site.json ou aux images, à l'exception des détails du scénario.

Étape 3 : Construire la voix + la timeline

python3 <skill-dir>/scripts/build.py <run>

Cela exécute TTS pour chaque ligne (mis en cache par texte), supprime le silence, place chaque ligne 0,18 s après le cut de sa scène, obtient les synchronisations de mots avec faster-whisper, et écrit <run>/props.json et <run>/public/voice.wav. Il imprime la timeline, qui devrait totaliser 28 à 34 s. Si elle est longue, raccourcissez les lignes ; n'accélérez pas la voix. Réexécutez-le après toute modification de l'histoire ; les modifications visuelles uniquement n'appellent pas TTS à nouveau.

Étape 4 : Prévisualiser, puis rendre

bash <skill-dir>/scripts/render.sh <run> stills "40,120,200,300,450,560,680,780,880"   # choisissez des images dans chaque scène à partir de la sortie de build
bash <skill-dir>/scripts/render.sh <run>                                                # rendu complet, environ 30 s

Lisez stills/sheet.jpg avant le rendu complet. Vérifiez que le texte ne dépasse pas des cartes, que les noms longs tiennent (raccourcissez le texte plutôt que de réduire les polices), que les images montrent le bon sujet et que les couleurs sont lisibles sur l'arrière-plan. Après le rendu complet, lisez qa-sheet.jpg (une image par seconde).

Porte : <run>/superbrag.mp4 existe à environ -14 LUFS (imprimé). La feuille QA montre les 9 temps sans rien de coupé.

Étape 5 : Livrer

Indiquez à l'utilisateur le chemin de superbrag.mp4, sa durée, l'histoire client choisie et pourquoi, ainsi que les détails inventés (la requête, les prix). Proposez un changement de voix (MiniMax ou ElevenLabs) si la lecture Kokoro semble plate. Ligne de crédit pour publication : « Musique : Sascha Ende, ende.app (CC BY 4.0) ».

Notes

• Remotion est gratuit pour les particuliers et les entreprises de jusqu'à 3 personnes ; les grandes entreprises ont besoin d'une licence (remotion.dev/license).
• Pour changer l'apparence de chaque vidéo, modifiez template/src/scenes.tsx (mises en page) et template/src/ui.tsx (mouvement, arrière-plan, polices). Prévisualisez avec cd template && npx remotion studio src/index.ts --props=<run>/props.json --public-dir=<run>/public.
• Paysage 1920×1080 uniquement pour l'instant. Le format vertical nécessite ses propres mises en page dans scenes.tsx.