Launch-Video-Skills

Launch-Video

Renderer: das npm-Paket launch-video-skills. Vollständiger Szenenvertrag: https://github.com/anudeepadi/launch-video-skills#scene-contract

• npx launch-video-skills setup: einmalig pro Rechner (Headless Chromium + Python-Sprachpakete). Erfordert Node 18+, Python 3.10+, ffmpeg. Kokoro-Gewichte (~350 MB) und Whisper small.en (~480 MB) werden beim ersten Sprachdurchlauf nach ~/.cache/lvk heruntergeladen.
• npx launch-video-skills new <name>: erstellt launch-videos/scenes/<name>/index.html mit launch-videos/kit/ daneben.
• npx launch-video-skills render <scene.html> [flags]: schreibt nach ./out/.
• Chromium-Download stockt → export LVK_CHROME=/pfad/zu/chrome-headless-shell (beliebiger lokaler Build).
• Python.org-Python auf macOS schlägt bei SSL fehl → export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())').

Was ein gutes Launch-Video von „KI-Slop“ unterscheidet, steht in references/craft.md. Lies es, bevor du das Storyboard erstellst.

Schritte

1. Marke und Fakten vom Live-Produkt. Rufe die Seite mit Playwright auf. Notiere wörtlich Überschrift, Untertitel, Feature-Namen, die eigenen Beispielinhalte der Seite (Demo-Threads, Prompts, Code, Issue-Listen) und CTAs. Lese berechnete CSS-Stile für Schriftart, -gewicht, -abstand und Beispiel-Pixelfarben für Hintergrund/Text/Akzent (CSS-Variablen werden veraltet). Speichere das Logo-SVG und alle Bilder unter launch-videos/scenes/<name>/assets/. Verwende die Schriftart der Seite nur, wenn ihre Lizenz die Weitergabe erlaubt; andernfalls verwende die nächstgelegene mitgelieferte Schriftart (Inter, JetBrains Mono, Space Grotesk). Erfinde niemals Metriken, Kunden, Integrationen oder UI. Wenn etwas als geplant/Vorschau markiert ist, lasse es weg oder kennzeichne es. Wenn du keine echten UI-Beispiele bekommst, brich ab und sage es. Setze die Quell-URL und das Datum in einen Kommentar am Anfang der Szene.
2. Drehbuch, dann Storyboard. Ein bis zwei kurze Zeilen pro Einstellung, übernommen aus dem Text der Seite; insgesamt 20–40 s. Verwende say, wenn sich die gesprochene Form unterscheidet (Punkte, Akronyme: say: 'Build A.I. agents'). 5–6 Einstellungen, eine Idee pro Einstellung: Aufhänger (Produkt oder Überschrift innerhalb von 2 s auf dem Bildschirm) → erster Nutzungsmoment → Produkt in Aktion (echtes UI in HTML aus den eigenen Beispielen der Seite nachgebaut, niemals ein Screenshot) → zweite Fähigkeit → 3 Säulen oder Funktionsweise → CTA mit Logo. Ruhige Marken: music.style: 'ambient', sanfte SFX (0,2–0,6). Dev-Tools: 'pulse' und Hits. Sprache ist optional; Musik nur ist auf X üblich.
3. Schreibe launch-videos/scenes/<name>/index.html unter Verwendung von ../../kit/kit.css und kit.js. Beginne mit der vorbereiteten Vorlage. Markiere Einstellungen mit data-shot="id" ohne hartcodierte --in/--out. Sprachzeilen kommen in SCENE.voice.lines (Schlüssel, Einstellung, Text/say, at/after, pause-Schläge). Binde Sprachschläge an visuelle Ereignisse mit data-on="key", data-on="key:word", data-edge="e". Rufe K.layout() nach der Definition von SCENE auf, dann leite JS-Schläge aus K.at/K.end/K.shot ab: Tippgeschwindigkeit = Textlänge / gesprochene Dauer, Cursor-Klick auf das Schlüsselwort, Tippgeräusch-Hinweise aus denselben Konstanten. onFrame(t) muss rein in t sein. JS-Transformationen erfolgen auf Wrappern ohne CSS-Animationsklasse. Keine großen filter: blur, backdrop-filter oder vollflächige Blend-Modi.
4. Review-Schleife. npx launch-video-skills render launch-videos/scenes/<name>/index.html --sheet 1. Jede <- ASR heard:-Zeile ist ein möglicher Aussprachefehler: mit say umschreiben und erneut prüfen (Whisper hört korrektes Audio manchmal falsch – markiere diese für menschliches Hören). Lese das Sheet-PNG auf: Text über belebten Bildern, Lesbarkeit kleiner Texte, leere Frames, Kollisionen während Übergängen, Tippen, das vor Ende der Einstellung beendet ist, defekte Syntaxhervorhebung. --stills t1,t2 für Vollauflösungsprüfungen. Iteriere mit Geschmacksnoten ("zu schnell", "unklar, was passiert ist") anstatt mit einmaligen Änderungen.
5. Rendern und verifizieren. npx launch-video-skills render launch-videos/scenes/<name>/index.html --workers 4. Dann:
   • ffprobe: h264 + aac, erwartete Dauer.
   • volumedetect: Durchschnitt etwa −19 bis −17 dB, max unter −1 dB.
   • Synchronisation: Transkribiere das finale MP4 mit Faster-Whisper small.en Wortzeitstempeln; erstes Wort jeder Zeile innerhalb von ~0,2 s der im Log ausgegebenen Timeline. Schlüsselwörter treffen auf visuelle Schläge.
   • Kontinuität: Vergleiche Frames über Worker-Grenzen hinweg (Frame-Anzahl / Worker).
6. Ausliefern. Gib den MP4-Pfad weiter. Überschreibe niemals einen früheren Schnitt (mv -n oder ein neues --out). Sage klar, dass Stimme und Musik synthetisiert sind und noch nicht nach Gehör geprüft wurden. Biete Post-Text an, der Behauptungen wie "in einem Prompt erstellt" vermeidet. Kostenpflichtige Stimmen (ElevenLabs, OpenAI, Google) sind ein Austausch in lib/tts.py des Pakets; erwähne es nur, wenn der Benutzer eine menschlichere Lesung wünscht.