Launch-Video

Was macht Launch-Video?

Du bist der Regisseur und der Produkt-Storyteller. Der Editor kommt an zweiter Stelle. Jede Einstellung muss sich ihren Platz verdienen, indem sie den Zuschauer einen Schritt näher an „Ich verstehe es, ich will es“ bringt.

Das Video ist eine Webseite mit einer einzigen Uhr. window.seek(T) zeichnet den globalen Sekundenwert T. Playwright erstellt Screenshots bei 30fps, und ffmpeg kodiert die Frames zusammen mit einer Sprachausgabe und einem Musikbett. Nichts hängt von der Wanduhrzeit ab, sodass jeder Frame für sich neu gerendert werden kann. So kannst du eine Szene korrigieren, ohne den Rest anzufassen.

Startdateien befinden sich in template/ und scripts/, und die README erklärt, wie man sie ausführt.

1. Geschichte zuerst (vor allen Pixeln)

Schreibe das Skript als Sätze, die mit A, B, C usw. gekennzeichnet sind. Jeder Satz wird zu einer Bildunterschrift und einem Beat. Verwende diese Vier-Beat-Struktur:

1. Hook (0–8s). Nenne den Schmerz in den Worten des Betrachters. Keine Logowand, kein „Wir stellen vor“. Die ersten 8 Sekunden entscheiden, ob überhaupt jemand den Rest sieht.
2. Produkt in Aktion (8–45s). Ein Problem, dann die Funktion, die es löst, dann das Ergebnis. Zeige das echte Produkt, das die echte Sache tut: einen Prompt eingeben, eine Antwort erhalten, auf Veröffentlichen klicken. Vermeide eine Funktionenparade und zeige höchstens 4–5 Fähigkeiten.
3. Warum es anders ist (45–75s). Zeige die Architektur- oder Integrationsgeschichte, idealerweise mit einem Diagramm, das sich bewegt. Erkläre, wer was tut. Zum Beispiel: „Wir machen X; Stripe übernimmt Zahlungen und Steuern.“
4. Angebot + Abschluss (letzte 10–15s). Nenne den Preis oder Plan und ende mit einer Markenzeile. Mache diese letzte Zeile kurz und einprägsam.

Strebe insgesamt 80–95s an. Ein 30s-Werbeschnitt und ein 9:16-Schnitt können später aus derselben Zeitleiste erstellt werden.

2. Visuelle Regeln (harte Einschränkungen)

• Kein Browser-Chrome. Zeige niemals Tabs, URL-Leisten oder Lesezeichen. Baue Produktbildschirme als saubere HTML-Karten nach, verwende die echte Aufnahme nur als Referenz und anonymisiere alle Daten.
• Produktbilder schweben. Gib ihnen abgerundete Ecken (16–18px) und weiche, lange Schatten. Halte großzügigen Abstand, sodass die Karte niemals den Rahmen ausfüllt; maximal etwa 75 % der Breite.
• Keine Wörter auf Produktbildern. Erklärungen kommen in Callouts neben der UI oder in Bildunterschriften darunter, niemals über dem Screenshot.
• Die Akzentfarbe erscheint nur auf dunklen Hintergründen. Verwende sie niemals auf einem Produktbild. Wenn die Markenzeile die Akzentfarbe benötigt, platziere die Endkarte auf dunkler Markenfarbe.
• Mache nicht alles in einem Farbton. Verwende sparsam ein oder zwei komplementäre Farbtupfer, z. B. ein Rot wie #C8323C auf einem Alarmpunkt oder ein Lila für eine Partnermarke.
• Fokussiere einen Bereich nach dem anderen. Um eine Funktion hervorzuheben, bewegt sich der Cursor dorthin, doppelklickt, die Kamera zoomt hinein, und der Rest der UI wird grau oder unscharf.
• Callouts sind kleine weiße Pillen mit einem farbigen Punkt, die an echte DOM-Elemente gebunden sind. Sie erscheinen mit einem leichten Überschwingen, maximal drei auf dem Bildschirm, und verschwinden, bevor die Einstellung endet.
• Hintergrund: langsam driftende, unscharfe Markenfarben-Blobs plus 6% Körnung. Er sollte ruhig sein und niemals mit dem Produkt konkurrieren. Kopiere kein Bannerdesign wortwörtlich.

3. Bewegungsvokabular

• Einstellungsübergang = Blur-Morph. Die Einstellung erscheint im Maßstab 0,92 mit einer Unschärfe von 18px, die auf 0 ausgeblendet wird, über etwa 0,7s auslaufend. Sie verschwindet mit Maßstab +5%, Unschärfe 18px und Deckkraft 0 über 0,55s. Überlappe die Einstellungen um etwa 0,1s. Vermeide ausgefallene Übergänge wie Pixelwipes oder Stoffzüge; sie wirken billig.
• Langsamer Zoom von 3–5% über jede Einstellung, sodass nichts jemals statisch ist.
• Elementeingänge verwenden einen Auslauf über 300–650ms, gestaffelt um 80–150ms (stg()).
• Cursor: gleichmäßige, abgerundete Bewegungen, eine Drückanimation beim Klicken (Maßstab 0,82 für 120ms) und Halten von etwa 0,3s vor dem Klicken.
• Dock-Intro (0–2,5s): ein entspiegeltes macOS-Dock mit echten Apple-App-Icons (aus einem iOS/macOS-UI-Kit, nicht handgezeichnet) und deinem App-Icon in der Mitte. Der Slot der App wächst, die Kamera zoomt darauf zu, der Cursor klickt, das Icon hüpft mit einem laufenden Punkt, und die Szene blur-morpht in die App.
• Kadenz: lass jeden Beat atmen. Lasse 0,8–2s visuelles Halten nach einem VO-Satz, bevor die nächste Idee kommt. Wenn es sich gehetzt anfühlt, ist es das. Passe den VO-Abstand an, bevor du die Bilder schneidest.

4. Audio

• VO: generiere die Sprachausgabe mit dem ElevenLabs-Stimmklon des Gründers, eine einzige Aufnahme des gesamten Skripts. Transkribiere sie (Scribe), um Wort-für-Wort-Timings zu erhalten, und passe den Abstand dann neu an: Schneide an den Stille zwischen Sätzen und füge zusätzliche Stille ein, wo ein Beat Raum braucht. Schreibe die Start- und Endzeiten der Sätze in timeline.js als TL={A:[start,end,text],...}, und verankere jede Animation an TL statt an hartcodierten Sekunden.
• Um eine Zeile zu ändern, generiere nur diese Zeile, füge sie an einer Stille ein und aktualisiere ihren TL-Eintrag.
• Musik: ein instrumentales Bett. Überprüfe, ob das Transkript leer ist, um sicherzustellen, dass es keinen Gesang hat. Mische es mit einer Lautstärke von 0,3 mit Sidechain-Ducking unter der VO und blende es über die letzten 3–4s aus (siehe scripts/mix.sh).

5. Eine Animation von deiner Website ziehen

Scroll-getriebene Site-Animationen können Frame für Frame erfasst werden (scripts/capture-scroll.js):

• Verstecke die Navigation, Cookie-Banner und den Text des Abschnitts, sodass nur das Visuelle übrig bleibt.
• Erfasse dicht, mit 4px-Scroll-Schritten. Ein 16px-Schritt, der über 10s abgespielt wird, ergibt etwa 6fps und wirkt ruckelig.
• Mische im Canvas benachbarte Frames durch fraktionierte Indizes für eine sub-Frame-Glättung.
• Wenn du eine Erfassung auf parallele Browser aufteilst, wärme jeden auf, indem du zuerst von derselben Startposition scrollst. Scroll-Animationen sind zustandsbehaftet, sodass ein frisches Laden mitten in der Seite an den Nähten springt.
• Überprüfe auf Nähte, indem du die mittlere absolute Differenz zwischen aufeinanderfolgenden Frames scanne. Spitzen deutlich über dem Median bedeuten einen Sprung.

6. Pipeline

1. Schreibe das Skript, generiere dann die VO, transkribiere sie, passe den Abstand an und schreibe timeline.js.
2. Baue Szenen in scenes.js. Jede ist S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}}).
3. Überprüfe Standbilder mit node scripts/preview.js page.html out.png T ... an den wichtigsten Beats.
4. Rendere mit scripts/render-parallel.sh. Rendere nur die Zeitbereiche neu, die du geändert hast.
5. Mische mit scripts/mix.sh, kodiere dann mit scripts/encode.sh (libx264 crf 17, yuv420p, AAC 192k, faststart).
6. QA: ziehe Frames aus der kodierten mp4 an jeder Szene und überprüfe die Markenzeile, die Callouts und die Nähte. Höre einmal in voller Geschwindigkeit, bevor du es versendest.

7. Fallstricke, die auf die harte Tour gelernt wurden

• Führe Renderings als einen einzigen verfolgten Hintergrund-Job aus, der auf seine Arbeiter wartet. Getrennte nohup-Jobs werden gekillt und hinterlassen partielle Frames.
• Das Vorladen von Hunderten großer Bilder pro Seite kann Chromium zum Absturz bringen mit „Target crashed“. Wenn eine Seite eine große Bildsequenz vorlädt, verwende maximal 2 parallele Arbeiter. Überprüfe immer die Frame-Anzahl und die Arbeiterlogs vor dem Kodieren, da ein abgestürzter Arbeiter stillschweigend alte Frames hinterlässt.
• Klassennamen können mit dem CSS der App kollidieren. Zum Beispiel machte .dark in einem App-Stylesheet eine Karte 1080px hoch. Präfixiere daher Szenenklassen oder verwende ungewöhnliche Namen.
• Callouts müssen auf die Endzeit der Einstellung begrenzt werden, sonst bleiben sie über der nächsten Szene hängen.
• Übertreibe keine technischen Behauptungen in Callouts. Schreibe „Kein API-Roundtrip · Entscheidung in-prozess“, nicht „0 ms“.
• Wenn du die Outro-Zeile änderst, entferne auch ihre Bildunterschrift, wenn die Endkarte bereits dieselben Wörter zeigt.