saas-promo

SaaS promo (modèle : "skill 1")

Cette compétence produit une vidéo promotionnelle complète à partir d'un seul fichier de configuration, promo.json : le classique ~11 s, ou une version longue d'environ 50 s quand promo.json contient chapters. Une scène canvas dessine chaque image dans Chrome headless. Il n'y a ni séquences vidéo pré-enregistrées, ni IA vidéo, ni service de template :

• Image : les propres captures d'écran, UI, designs ou images vidéo de l'utilisateur. Des cartes UI intégrées comblent les lacunes.
• Texte : les propres textes de l'utilisateur.
• Son : un effet sonore sur chaque signal, plus une bande-son ambiante originale ou le morceau de l'utilisateur.

La structure est fixe et reproduit le rythme de la vidéo de référence skill 1 .MP4 (une vidéo TikTok d'agence SaaS). Seules les techniques sont copiées, jamais ses images, ses mots, sa marque ou son filigrane.

Temps	Scène
0-0,5 s	De grands glyphes (# < @ ! ?) clignotent au centre ; des barres néon violet et citron vert et des étincelles à 4 pointes stroboscopent sur un champ de glyphes en matrice de points faible
0,5-3,3 s	text.typed s'affiche lettre par lettre avec un curseur ; 26 cartes arrivent de loin et orbitent autour du mot comme un anneau 3D (d'abord en points de trame, puis l'image réelle) ; l'anneau accélère, passe rapidement devant la caméra et s'estompe
3,3-6,45 s	Un pré peint avec nuages, oiseaux et papillons, lavé en pastel puis saturant ; trois cartes glissent depuis la droite, puis les autres volent vers un mur bento de 12 cartes. bento[0] tape sur la carte héros, bento[1] tape verticalement sur une carte en verre haute, deux cartes échangent leurs images, et bento[2] tape sur une carte blanche. La caméra zoome ensuite sur cette carte
6,45-~8,8 s	Champ d'ondes de points sombres ; un orbe dégradé lumineux apparaît et glisse vers la gauche ; headline apparaît mot par mot (flou à net), puis sub apparaît par balayage ; tout se défocalise
~8,8-11,1 s	Glitch (décalage de teinte, tranché) vers le héros : une fleur bleue/blanche en longue exposition sur un ciel bleu à orange, des symboles volants ! @ # $ % * et une pluie numérique. from apparaît en fondu et disparaît, puis to arrive avec un impact et le logo optionnel apparaît en dessous. Se termine par un fondu au noir

La durée est d'environ 11,1 s. Elle augmente légèrement avec un long titre, car le sous-titre occupe toujours environ 0,85 s à l'écran.

Version longue (~50 s) : chapters

Ajoutez "chapters" (un par produit, projet ou thème) et les quatre mêmes scènes se répètent en temps forts de 1,5 mesures chacun, le final prenant 2 mesures :

Temps forts	Ce qui est joué
intro	ouverture (typed + tourbillon de tout) → mur (toutes les images, bento) → orbe (headline / sub)
chaque chapitre	ouverture (le typed du chapitre, ses images dans le tourbillon ; ignoré sans typed) → mur (ses images en premier, son bento, son apparence wall) → orbe (son headline / sub / couleurs orb)
fin	final (from / to / url / logo), 2 mesures

Quatre chapitres avec trois ouvertures typées donnent 23 mesures, soit ~50 s à 109 BPM.

• Images : étiquetez chacune avec "tag" pour la classer sous son chapitre.
• Apparences du mur : "meadow" (jour), "dusk" (coucher de soleil) ou "dark" (champ d'ondes de points avec lueurs dans les couleurs de l'orbe du chapitre). En les alternant, les chapitres restent distincts.
• Synchronisation musicale :
  • Avec music, assets.py mesure le tempo du morceau et son drop (la plus grande montée d'énergie, calée sur une grosse caisse). La vidéo commence de sorte que la première coupe, après le tourbillon d'intro, tombe sur le drop, et chaque coupe suivante se place sur la grille des mesures.
  • Vérifiez la ligne imprimée music: … bpm, drop at … s. Si elle est erronée, donnez vous-mêmes bpm et musicDrop (secondes du morceau).
  • Utilisez sfxLevel (par exemple -4) pour placer les effets sous le morceau.
• Copyright : un morceau commercial peut entraîner la coupure du son ou un signalement de la vidéo lors de sa publication. Mentionnez-le et suggérez la bibliothèque sonore de la plateforme pour les publications publiques.

Prérequis : ffmpeg, Node 22+, Google Chrome ou Chromium (CHROME_PATH), et un Python avec numpy et scipy (PROMO_PY ; promo.sh en trouve un automatiquement).

Flux de travail

1. Rassembler ce dont la promo a besoin

• Cartes (8 à 20 images) : captures d'écran du produit, du site web, de l'application ou du tableau de bord ; travaux de design ; ou images fixes des vidéos de l'utilisateur. Les images et les vidéos fonctionnent toutes les deux. Une vidéo donne une image fixe, à "at" secondes ou à 30 % de sa durée. Les images en paysage vont dans les emplacements larges et les portraits dans les emplacements hauts. Avec moins de 8 images, des cartes UI intégrées comblent le reste (barre de recherche, formulaire, graphique, orbe dégradé, pastille, etc., étiquetées avec text.labels). Regardez d'abord les images et éliminez celles qui sont quasiment vides.
• Textes : gardez-les courts, car la scène les tape et les révèle à des vitesses fixes.
  • typed : un mot ou un nom avec ponctuation, environ 4 à 8 lettres ("SaaS.", "KumNit.").
  • bento : trois courtes phrases (1, 2-4 et 2-3 mots).
  • headline : 5 à 8 mots. sub : une ligne d'environ 90 caractères maximum.
  • from / to : la paire de fermeture "De… / À…".
  • Pour le khmer ("lang": "km"), écrivez en khmer naturel. Mettez un espace entre les morceaux de headline, from et to qui doivent apparaître un par un. Kantumruy Pro est inclus.
• Optionnel :
  • logo : affiché sous la dernière ligne. Un logo opaque devient une icône d'application arrondie.
  • text.url : une ligne de site web sur la carte de fin.
  • hero : votre propre image de final au lieu de la fleur.
  • backdrop : une image au lieu du pré peint.
  • music : votre propre morceau. Dans la version longue, son drop atterrit sur la première coupe ; définissez musicStart pour le remplacer.
  • chapters : la version longue d'environ 50 s, avec le tag, typed, bento, headline, sub, wall et orb de chaque chapitre.
  • sfxDir : un dossier contenant vos propres effets sonores.
  • colors : couleurs de marque pour le néon, l'orbe, le ciel et les symboles.

2. Écrire le projet

Créez un dossier de projet et copiez examples/kumnit-saas.json (ou -km.json) dedans sous le nom promo.json, puis modifiez-le. Chaque clé est décrite dans references/config.md. Les chemins sont relatifs au dossier du projet.

3. Prévisualisation (environ 10 s)

<skill>/scripts/promo.sh <project>/promo.json --preview

Ceci prépare les images (et mesure la musique) et rend 12 images fixes (une par temps fort dans la version longue) dans out/<name>-preview.png. Lisez-la et vérifiez :

• Le mot tapé ne chevauche pas les cartes.
• Aucun texte n'est trop serré : les textes longs se réduisent pour tenir, mais ils sont moins lisibles.
• La carte héros (grande, à gauche) affiche une bonne image : elle prend la première image en paysage de cards.
• Le texte de fin est lisible sur la fleur ou le héros.

4. Rendu (moins d'une minute ; environ 4 minutes pour la version longue, donc lancez-la en arrière-plan)

<skill>/scripts/promo.sh <project>/promo.json

Les étapes s'exécutent dans cet ordre : assets, plan (timeline et signaux sonores de la scène), rendu (3 rendus Chrome, --jobs N), mixage, encodage.

• --from mix remixe le son et ré-encode sans rendu des images.
• --from render redessine l'image.

Sortie : out/<name>-1080p60.mp4 et out/<name>-contact.png (environ 30 images réparties sur la vidéo).

5. Vérifier avant de remettre

• Lisez la feuille de contact.
• ffprobe doit indiquer environ 11,1 s (classique) ou le total des temps forts (longue ; build/cues.json liste chaque temps fort). Le mixage est normalisé à -14 LUFS / -1 dBTP : mesurez-le avec ffmpeg -i out.mp4 -af ebur128 -f null -.
• L'étape de mixage affiche combien d'effets proviennent de sfxDir et combien ont été synthétisés.
• Vous ne pouvez pas entendre le résultat, alors dites à l'utilisateur ce que vous avez vérifié et demandez-lui d'écouter. Les clics d'intro et l'impact du pré sont les moments les plus forts.

Réglage

• Tempo :
  • plan() en haut de scripts/scene.mjs contient les temps de la scène classique.
  • beatSpecs() dispose les temps forts : mapT() déplace et étire ces temps dans chaque temps fort.
  • Les signaux sonores dans cuesFor() suivent automatiquement, car audio.py les lit depuis build/cues.json.
• Aspect :
  • Les couleurs proviennent de colors.
  • La disposition bento est la table SLOTS dans scene.mjs.
  • Le pré, la fleur et l'orbe sont dessinés dans buildMeadow, drawFlower et drawOrb.
• Son : les noms de fichiers essayés dans sfxDir sont la table SFX dans scripts/audio.py, avec des variantes choisies par signal. Les accords et sections de la bande-son sont dans make_bed().
• Taille : 1920×1080 uniquement, comme dans le modèle. Une version verticale 9:16 nécessiterait ses propres mises en page.