serenakeyitan/launch-video-skill

launch-video

Generieren Sie ein Produkt-Launch-Video als Code (Remotion → MP4). Dieses Skill ist eine Szenenbibliothek + ein Workflow, keine feste Vorlage. Unterschiedliche Produkte erzählen unterschiedliche Geschichten – eine CLI-Tool-Geschichte spielt im Terminal, eine SaaS-App im Browser, eine mobile App auf dem Telefon, eine Bibliothek im Editor. Sie entwerfen zuerst den Bogen für DIESES Produkt, dann setzen Sie es aus der Szenenpalette zusammen. Zwingen Sie kein Produkt in die Form des tdoc-Beispiels.

Die unverhandelbare Regel

Entwerfen Sie den Storybogen, bevor Sie Code berühren. Fragen Sie: Was macht dieses Produkt eigentlich, wer ist der Benutzer, was ist der einzelne „Aha!“-Moment? Schreiben Sie eine Beat-Liste (5–9 Beats, jeweils mit einer Dauer in Frames bei 24fps) und bestätigen Sie sie mit dem Benutzer. Erst dann bauen Sie die Szenen zusammen. Ein Launch-Video ist eine Geschichte, keine Feature-Tour.

Workflow

1. Das Produkt verstehen. Was ist es? Wo interagiert der Benutzer damit (Terminal / Browser / Telefon / Editor / gemischt)? Was ist das Vorher→Nachher? Was ist der eine Moment, der jemanden dazu bringt, es haben zu wollen?
2. Die Beat-Liste schreiben. Jeder Beat: Name, was auf dem Bildschirm zu sehen ist, Dauer in Frames. Gesamt ≈ 30–45s (720–1080 Frames). Vor dem Bauen per AskUserQuestion mit dem Benutzer bestätigen.
3. Szenen aus der Palette auswählen (siehe unten) pro Beat. Die meisten Videos verwenden 1–3 Szenentypen + ein optionales Outro. Nicht jeder Typ wird benötigt.
4. Assets sammeln. Echte Screenshots > Mockups. Legen Sie sie in <project>/public/ ab. Erstellen Sie UI als scharfe Komponenten nur dann nach, wenn ein Screenshot eine niedrige Auflösung hätte oder wenn Sie es 1:1 animieren müssen.
5. Ein Projekt aufbauen unter dem Repo (kopieren Sie examples/tdoc als Startskelett – seine Struktur, nicht seinen Inhalt) oder in einem benachbarten Verzeichnis. Verdrahten Sie eine einzelne <Composition>, deren Dauer die Summe der Beat-Dauern ist, mit einer <Sequence> pro Beat.
6. Beats bauen, dann SFX hinzufügen (scripts/make-sfx.sh <public>), dann rendern, dann jeden geänderten Beat visuell überprüfen, iterieren.
7. Das MP4 übergeben erst nachdem der Verifikationsloop bestanden wurde.

Szenenpalette (src/)

Aus der Bibliothek importieren; nur das zusammenbauen, was die Geschichte braucht.

Szene	Verwenden für	Wichtige Props
Terminal	CLI-Tools, Agenten, Entwickler-Tools – Geschichte in einer Shell	lines (getippte Eingabeaufforderung, Tool-Aufrufe, Ergebnisse, Alert, URL), spinner, title. Ein führender /slash-command in einer getippten Eingabeaufforderung hebt sich automatisch fett hervor.
BrowserWindow	Web-Apps, Dokumentationen, Dashboards, SaaS	Screenshot/HTML als Kinder, `chrome="bar"
MobileFrame	Mobile Apps	Telefonhülle; Screenshot/UI als Kinder
CodeEditor	Bibliotheken, SDKs – „schreibe dies → erhalte jenes"	code Zeilen, getippte Enthüllung
Outro / LogoCard	Abschluss (optional)	Überschrift/Unterüberschrift, oder drehendes Logo + Wortmarke
WaveBackground	Ruhiger, gebrandeter Hintergrund hinter jedem Fenster	Farben
Cursor	Klicken auf ein Artefakt/Link/Button	von/nach Koordinaten, clickAt
PixelPet	Ein freundliches Maskottchen über einem Fenster	crown/base Pixel-Reihen, color; Augen wippen hoch/runter (keine Augenweiß – liest sich klein sauber)
Caption	Einzeiliger Kicker unter einem Fenster	at, text

Diese sind unabhängig. Ein Bibliotheks-Launch könnte nur CodeEditor + Terminal + LogoCard sein. Ein SaaS-Launch könnte BrowserWindow + Outro sein.

Temporegeln & Übergangsregeln (auf die harte Tour gelernt)

• @24fps. Beat-Dauern in Frames. Halten Sie die Gesamtdauer knapp: kürzen Sie statische Haltepunkte, nicht die Aktion. Wenn ein Beat größtenteils ein eingefrorenes Bild ist, verkürzen Sie ihn.
• Scharfe Übergänge. Szene-zu-Szene-Überblendungen ≤ 5 Frames; Beat- Einblendungen ≈ 4 Frames. Ein Fenster, das „aufspringt" (Skalierung 0,35→1 über ~12 Frames) wirkt besser als eine langsame Skalierung über 30+ Frames.
• Nach Möglichkeit einen durchgehenden Beat. Führen Sie „Tippen → Klicken → Ergebnis" in einer einzigen Sequence zusammen, damit es keinen Blitz/Schnitt in der Mitte der Aktion gibt.
• Cursor muss reisen und drücken. Nicht teleportieren; zum Ziel animieren, beim Klicken verkleinern. Jeder Klick erhält ein Klick-SFX auf dem Druck-Frame.
• Kein doppeltes Chrome. Wenn ein Screenshot bereits einen Header hat, verwenden Sie chrome="none". Stapeln Sie keine Fensterleiste auf eine eingebackene.
• Brand-Card-Ein-und-Ausleitung. Verwenden Sie eine einzige Brand-Card (Logo/Maskottchen + Produktname + einzeiliges Wertversprechen) sowohl als Eröffnungs- als auch als Schlussframe (≈1,5–2,5s jede). Sie rahmt die Geschichte und ist billiger als eine separate animierte Logo-Endkarte. Treiben Sie alle Beat-Offsets über einen at()-Akkumulator an, damit das Hinzufügen der Einleitungskarte automatisch alles (inkl. SFX) nachgelagert verschiebt.

Audio-Regeln

• Führen Sie scripts/make-sfx.sh <project>/public aus, um sfx-typing.mp3 + sfx-click.mp3 zu synthetisieren. Diese sind git-ignorierte generierte Artefakte – immer (neu) generieren; sich niemals darauf verlassen, dass sie nach einem frischen Clone vorhanden sind.
• Typing-SFX spielt nur, während ein Mensch tippt (eine Eingabeaufforderung, einen Kommentar). Niemals über automatischem Stream/Agent-Output.
• Click-SFX feuert auf dem Druck-Frame jedes Cursor-Klicks (Link, Button, Artefakt). Passen Sie die <Sequence from> an den Klick-Frame an.
• Legen Sie Audio mit <Audio src={staticFile(...)} volume={0.3}> innerhalb kurzer <Sequence>s an, die auf die genauen Frame-Fenster begrenzt sind.

Verifikationsloop (vor Übergabe obligatorisch)

Der Image-Proxy, der PNGs liest, ist OCR-rauschig – vertrauen Sie Pixel-Messungen (Python/PIL/numpy), nicht Textbeschreibungen, für Ausrichtung/Farbe.

1. scripts/verify.sh <entry> <CompId> <public-dir> <frame> ... erfasst Standbilder + zeigt Audio-Fenster an. Übergeben Sie das public/ des Projekts als <public-dir> (oder -, wenn es keines hat) – dieselbe --public-dir-Regel wie beim Rendern; Standbilder erhalten sonst 404 für ihre Assets.
2. Lesen Sie jedes Standbild. Für jeden geänderten Beat überprüfen: Inhalt korrekt, nichts durch overflow:hidden abgeschnitten, Übergänge landen, Cursor auf Ziel, SFX-Fenster stimmen mit den sichtbaren Klick-/Tipp-Frames überein.
3. Korrigieren → neu rendern → neu überprüfen. Nicht „fertig" aus Intent melden; überprüfen Sie die tatsächlichen Frames.

Rendern

npx remotion render <entry> <CompId> out/<name>.mp4 \
  --public-dir=<project>/public
# still:  npx remotion still <entry> <CompId> out/x.png --frame=N \
#           --public-dir=<project>/public

<entry> ist das src/index.ts des Projekts (ruft registerRoot auf). Übergeben Sie immer --public-dir, wenn sich der Einstiegspunkt in einem Unterverzeichnis befindet – andernfalls löst staticFile() gegen das Repo-Root-public/ auf und Assets bekommen 404.

Referenzbeispiel

examples/tdoc/ ist das kanonische ausgearbeitete Beispiel (≈39s): eine Brand-Card- Einleitung, ein Ingenieur tippt eine /tdoc …-Eingabeaufforderung an einen Agenten (Terminal, Slash-Command automatisch hervorgehoben), erhält einen Link, das Dokument öffnet sich (BrowserWindow), Teammitglieder kommentieren, der Agent liefert v2 aus, dann schließt dieselbe Brand-Card ab – mit Typing/Click-SFX, die auf echtes Tippen beschränkt sind, und einem PixelPet, dessen Augen wippen. Lesen Sie es, um die Bibliothek in Aktion zu sehen; kopieren Sie nicht seine Geschichte. Bauen Sie den eigenen Bogen des neuen Produkts.