Communitygithub.com

launch-video — site→MP4 sans API

Vidéos de lancement SaaS depuis le site produit : scènes HTML/CSS → frames Playwright → MP4 ffmpeg + Kokoro TTS local. Sans clés API. Extraction de marque et QA contact sheet.

Qu'est-ce que launch-video — site→MP4 sans API ?

Launch Video étape 1 : URL live → marque → scènes HTML → Playwright/ffmpeg. Zéro clé API.

Compatible avec~Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/anudeepadi/launch-video-skills/tree/HEAD/skills/launch-video

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Vidéo de lancement

Rendu : le paquet npm launch-video-skills. Contrat complet de scène : https://github.com/anudeepadi/launch-video-skills#scene-contract

  • npx launch-video-skills setup : une fois par machine (Chromium sans tête + paquets vocaux Python). Nécessite Node 18+, Python 3.10+, ffmpeg. Les poids Kokoro (~350 Mo) et whisper small.en (~480 Mo) sont téléchargés dans ~/.cache/lvk lors du premier exécution vocale.
  • npx launch-video-skills new <name> : crée launch-videos/scenes/<name>/index.html avec launch-videos/kit/ à côté.
  • npx launch-video-skills render <scene.html> [flags] : écrit dans ./out/.
  • Le téléchargement de Chromium se bloque → export LVK_CHROME=/path/to/chrome-headless-shell (n'importe quelle construction locale).
  • Python de python.org échoue SSL sur macOS → export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())').

Ce qui distingue une bonne vidéo de lancement de « l'IA de mauvaise qualité » se trouve dans references/craft.md. Lisez-le avant de storyboarder.

Étapes

  1. Marque et faits à partir du produit en direct. Récupérez le site avec Playwright. Enregistrez textuellement le titre, le sous-titre, les noms des fonctionnalités, le contenu d'exemple du site (fils de discussion, invites, code, listes de problèmes) et les appels à l'action. Lisez les styles calculés pour la famille de police/le poids/l'espacement des lettres et les couleurs de pixels d'exemple pour le fond/le texte/l'accent (les variables CSS deviennent obsolètes). Enregistrez le logo SVG et toutes les images dans launch-videos/scenes/<name>/assets/. Utilisez la police du site uniquement si sa licence permet la redistribution ; sinon, utilisez la police fournie la plus proche (Inter, JetBrains Mono, Space Grotesk). N'inventez jamais de métriques, clients, intégrations ou d'interface utilisateur. Si quelque chose est marqué comme prévu/aperçu, laissez-le de côté ou étiquetez-le. Si vous ne pouvez pas obtenir d'exemples d'interface utilisateur réels, arrêtez-vous et dites-le. Mettez l'URL source et la date dans un commentaire en haut de la scène.
  2. Scénario, puis storyboard. Une ou deux courtes lignes par plan, tirées du texte du site ; 20 à 40 s au total. Utilisez say lorsque la forme parlée diffère (points, acronymes : say: 'Build A.I. agents'). 5 à 6 plans, une idée chacun : accroche (produit ou titre à l'écran dans les 2 s) → premier moment d'utilisation → produit en action (interface utilisateur réelle reconstruite en HTML à partir de l'exemple propre du site, jamais une capture d'écran) → deuxième capacité → 3 piliers ou comment cela fonctionne → appel à l'action avec logo. Marques calmes : music.style: 'ambient', effets sonores doux (0,2-0,6). Outils de développement : 'pulse' et hits. La voix est facultative ; la musique seule est courante sur X.
  3. Écrivez launch-videos/scenes/<name>/index.html en utilisant ../../kit/kit.css et kit.js. Commencez à partir du modèle créé. Marquez les plans data-shot="id" sans --in/--out codés en dur. Les lignes vocales se trouvent dans SCENE.voice.lines (clé, plan, texte/dire, at/after, temps pause). Épinglez les temps à la parole avec data-on="key", data-on="key:word", data-edge="e". Appelez K.layout() après avoir défini SCENE, puis dérivez les temps JS de K.at/K.end/K.shot : vitesse de frappe = longueur du texte / durée parlée, clic du curseur sur le mot clé, indices sonores de frappe à partir des mêmes constantes. onFrame(t) doit être pur en t. Les transformations JS se font sur des wrappers sans classe d'animation CSS. Pas de grand filter: blur, backdrop-filter ou de modes de fusion plein écran.
  4. Boucle de révision. npx launch-video-skills render launch-videos/scenes/<name>/index.html --sheet 1. Chaque ligne <- ASR heard: est une possible erreur de prononciation : réécrivez avec say et revérifiez (whisper entend parfois mal un audio correct ; signalez-les pour une écoute humaine). Lisez le PNG de la feuille pour : texte sur image chargée, lisibilité des petits caractères, images vides, collisions en milieu de transition, fin de frappe avant la fin du plan, coloration syntaxique cassée. Utilisez --stills t1,t2 pour des vérifications en haute résolution. Itérez avec des notes de goût (« trop rapide », « ce qui s'est passé n'est pas clair ») plutôt qu'en un seul essai.
  5. Rendu et vérification. npx launch-video-skills render launch-videos/scenes/<name>/index.html --workers 4. Ensuite :
    • ffprobe : h264 + aac, durée attendue.
    • volumedetect : moyenne environ −19 à −17 dB, max inférieur à −1 dB.
    • Synchronisation : transcrivez le MP4 final avec les horodatages des mots de faster-whisper small.en ; le premier mot de chaque ligne dans environ 0,2 s de la chronologie imprimée dans le journal. Les mots clés atterrissent sur les temps visuels.
    • Continuité : comparez les images entre les limites des travailleurs (nombre d'images / travailleurs).
  6. Livraison. Remettez le chemin du MP4. Ne remplacez jamais une version antérieure (mv -n ou un nouveau --out). Dites clairement que la voix et la musique sont synthétisées et n'ont pas été vérifiées à l'oreille. Proposez un texte de publication qui évite les affirmations « fait en une seule invite ». Les voix payantes (ElevenLabs, OpenAI, Google) sont un échange dans lib/tts.py du paquet ; mentionnez-le seulement si l'utilisateur souhaite une lecture plus humaine.

Skills associés