launch-video — Zero-API Site→MP4

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 Maschine (headless Chromium + Python-Voice-Pakete). Erfordert Node 18+, Python 3.10+, ffmpeg. Kokoro-Gewichte (~350 MB) und whisper small.en (~480 MB) werden beim ersten Voice-Durchlauf nach ~/.cache/lvk heruntergeladen.
• npx launch-video-skills new <name>: erstellt das Grundgerüst für launch-videos/scenes/<name>/index.html mit launch-videos/kit/ daneben.
• npx launch-video-skills render <scene.html> [flags]: schreibt nach ./out/.
• Chromium-Download bleibt hängen → export LVK_CHROME=/path/to/chrome-headless-shell (jeder lokale Build).
• python.org Python unter macOS hat SSL-Probleme → export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())').

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

Schritte

1. Marke und Fakten vom Live-Produkt. Hole die Seite mit Playwright ab. Notiere wörtlich die Überschrift, die Unterüberschrift, die Feature-Namen, die eigenen Beispielinhalte der Seite (Demo-Threads, Prompts, Code, Issue-Listen) und CTAs. Lese die berechneten Styles für Schriftart/-stärke/-abstand und Beispiel-Pixelfarben für Hintergrund/Text/Akzent (CSS-Variablen werden schnell veraltet). Speichere das Logo-SVG und alle Bilder nach launch-videos/scenes/<name>/assets/. Verwende die Schriftart der Seite nur, wenn ihre Lizenz eine Weiterverteilung erlaubt; ansonsten verwende die nächstgelegene gebündelte 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 bekommen kannst, stoppe und sage dies. Setze die Quell-URL und das Datum als Kommentar an den Anfang der Szene.
2. Skript, dann Storyboard. Ein oder 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 auf dem Bildschirm innerhalb von 2 s) → erster Nutzungsmoment → Produkt in Aktion (echte UI, in HTML aus dem eigenen Beispiel der Seite nachgebaut, niemals ein Screenshot) → zweite Fähigkeit → 3 Säulen oder Funktionsweise → CTA mit Logo. Ruhige Marken: music.style: 'ambient', sanfte Soundeffekte (0.2–0.6). Entwickler-Tools: 'pulse' und Hits. Voice ist optional; reine Musik ist auf X üblich.
3. Schreibe launch-videos/scenes/<name>/index.html verweise auf ../../kit/kit.css und kit.js. Beginne mit der vorbereiteten Vorlage. Markiere Einstellungen mit data-shot="id" ohne hartcodierte --in/--out. Voice-Zeilen kommen in SCENE.voice.lines (key, shot, text/say, at/after, pause beats). Verknüpfe Beats mit Sprache durch data-on="key", data-on="key:word", data-edge="e". Rufe K.layout() auf, nachdem SCENE definiert ist, leite dann JS-Beats 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-Animation-Klasse. Kein großes filter: blur, backdrop-filter oder Vollbild-Blend-Modi.
4. Überprüfungsschleife. npx launch-video-skills render launch-videos/scenes/<name>/index.html --sheet 1. Jede <- ASR heard:-Zeile ist eine mögliche Fehlaussprache: mit say umschreiben und erneut prüfen (whisper hört manchmal korrektes Audio falsch; markiere diese für eine menschliche Überprüfung). Lies das Sheet-PNG auf: Text über überladenen Bildern, Lesbarkeit kleiner Schrift, leere Frames, Kollisionen während Übergängen, Tippen, das vor Ende der Einstellung endet, fehlerhafte Syntaxhervorhebung. --stills t1,t2 für full-res Checks. Iteriere mit Geschmacksnoten („zu schnell", „unklar, was passiert ist") anstelle von einmaligem Durchlauf.
5. Rendern und verifizieren. npx launch-video-skills render launch-videos/scenes/<name>/index.html --workers 4. Dann:
   • ffprobe: h264 + aac, erwartete Dauer.
   • volumedetect: Mittelwert etwa −19 bis −17 dB, Maximum unter −1 dB.
   • Sync: Transkribiere das finale MP4 mit faster-whisper small.en Wort-Zeitstempeln; jedes erste Wort innerhalb von ~0,2 s des im Log gedruckten Timelines. Schlüsselwörter landen auf visuellen Beats.
   • Kontinuität: Vergleiche Frames über Worker-Grenzen hinweg (Frame-Anzahl / Worker).
6. Ausliefern. Gib den MP4-Pfad heraus. Überschreibe niemals einen früheren Schnitt (mv -n oder ein neues --out). Sage deutlich, dass Stimme und Musik synthetisiert sind und nicht nach Gehör überprüft wurden. Biete Post-Text an, der Behauptungen wie „in einem Prompt erstellt" vermeidet. Bezahlte Stimmen (ElevenLabs, OpenAI, Google) sind ein Austausch innerhalb des lib/tts.py des Pakets; erwähne dies nur, wenn der Benutzer eine menschlichere Lesung wünscht.