anudeepadi/launch-video-skills

Vidéo de lancement

Moteur de rendu : le package npm launch-video-skills. Contrat complet des scènes : https://github.com/anudeepadi/launch-video-skills#scene-contract

• npx launch-video-skills setup : une fois par machine (Chromium headless + paquets vocaux Python). Nécessite Node 18+, Python 3.10+, ffmpeg. Les poids de Kokoro (~350 Mo) et whisper small.en (~480 Mo) sont téléchargés dans ~/.cache/lvk lors de la première exécution vocale.
• npx launch-video-skills new <nom> : génère launch-videos/scenes/<nom>/index.html avec launch-videos/kit/ à côté.
• npx launch-video-skills render <scene.html> [options] : écrit dans ./out/.
• Si le téléchargement de Chromium bloque → export LVK_CHROME=/chemin/vers/chrome-headless-shell (n'importe quelle version locale).
• Sur macOS, Python de python.org échoue avec SSL → export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())').

Ce qui distingue une bonne vidéo de lancement du « AI slop » se trouve dans references/craft.md. Lisez-le avant de faire le storyboard.

Étapes

1. Marque et faits à partir du produit en ligne. 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 (threads de démonstration, invites, code, listes de problèmes) et les appels à l'action. Lisez les styles calculés pour la famille de polices, le poids, l'interlettrage et les couleurs de pixels d'exemple pour l'arrière-plan/texte/accent (les variables CSS deviennent obsolètes). Sauvegardez le SVG du logo et toutes les images dans launch-videos/scenes/<nom>/assets/. Utilisez la police du site uniquement si sa licence autorise la redistribution ; sinon, utilisez la police incluse la plus proche (Inter, JetBrains Mono, Space Grotesk). N'inventez jamais de métriques, clients, intégrations ou UI. Si quelque chose est marqué comme prévu/aperçu, omettez-le ou étiquetez-le. Si vous ne pouvez pas obtenir d'exemples UI réels, arrêtez-vous et dites-le. Mettez l'URL source et la date en commentaire en haut de la scène.
2. Script, puis storyboard. Une ou deux courtes lignes par plan, tirées du texte du site ; 20 à 40 secondes au total. Utilisez say lorsque la forme parlée diffère (points, acronymes : say: 'Créez des I.A. agents'). 5 à 6 plans, une idée chacun : accroche (produit ou titre à l'écran en moins de 2 s) → premier moment d'utilisation → produit en action (UI réelle reconstruite en HTML à partir de l'exemple du site, jamais une capture d'écran) → deuxième fonctionnalité → 3 piliers ou fonctionnement → appel à l'action avec logo. Marques calmes : music.style: 'ambient', effets sonores doux (0,2-0,6). Outils de développement : 'pulse' et frappes. La voix est optionnelle ; la musique seule est courante sur X.
3. Écrivez launch-videos/scenes/<nom>/index.html en utilisant ../../kit/kit.css et kit.js. Partez du modèle généré. Marquez les plans avec data-shot="id" sans --in/--out codés en dur. Les lignes vocales vont dans SCENE.voice.lines (clé, plan, texte/say, at/after, pause temps). Synchronisez les temps avec data-on="key", data-on="key:mot", data-edge="e". Appelez K.layout() après avoir défini SCENE, puis dérivez les temps JavaScript avec K.at/K.end/K.shot : vitesse de frappe = longueur du texte / durée parlée, clic de curseur sur le mot clé, indices sonores de frappe à partir des mêmes constantes. onFrame(t) doit être pur en t. Les transformations JavaScript s'appliquent sur des conteneurs sans classe d'animation CSS. Pas de grand filter: blur, backdrop-filter, ou modes de fusion plein écran.
4. Boucle de révision. npx launch-video-skills render launch-videos/scenes/<nom>/index.html --sheet 1. Chaque ligne <- ASR entendu: est une possible erreur de prononciation : réécrivez avec say et revérifiez (whisper interprète parfois mal un bon audio ; signalez ces cas pour une écoute humaine). Lisez l'image PNG du plan pour : texte sur fond chargé, lisibilité des petits textes, images vides, collisions entre transitions, frappe terminée avant la fin du plan, coloration syntaxique incorrecte. --stills t1,t2 pour des vérifications en pleine résolution. Itérez avec des notes subjectives (« trop rapide », « pas clair ce qui s'est passé ») plutôt qu'une seule tentative.
5. Rendu et vérification. npx launch-video-skills render launch-videos/scenes/<nom>/index.html --workers 4. Ensuite :
   • ffprobe : h264 + aac, durée attendue.
   • volumedetect : moyenne environ −19 à −17 dB, maximum sous −1 dB.
   • Synchronisation : transcrivez le MP4 final avec faster-whisper small.en mots avec horodatage ; le premier mot de chaque ligne doit être à environ ±0,2 s de la chronologie imprimée dans le journal. Les mots clés doivent tomber sur les temps visuels.
   • Continuité : comparez les images aux limites des workers (nombre d'images / workers).
6. Livraison. Remettez le chemin du MP4. N'écrasez jamais une coupe précédente (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 du type « créé en une seule invite ». Les voix payantes (ElevenLabs, OpenAI, Google) sont une option dans lib/tts.py du package ; mentionnez-la uniquement si l'utilisateur souhaite une lecture plus humaine.