Launchfilm aus Code

Launch-Video

Erstellen Sie ein Launch-Video, wie es ein kleines Motion-Studio machen würde. Entscheiden Sie zuerst, was das Video bewirken soll, und planen Sie es Takt für Takt. Dann bauen Sie jeden Frame in Code, sodass jeder Teil geändert und in einer Minute neu gerendert werden kann.

Das Ergebnis ist ein Kurzfilm des echten Produkts: seine Benutzeroberfläche in HTML nachgebaut, auf einem Beat-Raster animiert, auf Musik geschnitten, mit 60 fps und Bewegungsunschärfe.

Was Sie brauchen

• Node 18+, ffmpeg mit libx264, Python 3.9+. Die Python-Skripte verwenden nur die Standardbibliothek.
• Playwright mit Chromium, installiert im Video-Ordner: npm i -D playwright && npx playwright install chromium.
• Die scripts/ und assets/template.html dieses Skills.

In Befehlen ist $SKILL der Ordner dieses Skills (z. B. ~/.claude/skills/launch-video). Setzen Sie ihn einmal in der Shell: SKILL=~/.claude/skills/launch-video. Führen Sie die Befehle vom Video-Ordner aus.

Der Prozess

Arbeiten Sie die Phasen der Reihe nach durch. Jede Phase schreibt etwas, das die nächste verwendet.

Phase	Ausgabe	Lesen Sie
1. Brief	brief.md	references/1-brief.md
2. Format	Format, Länge, Seitenverhältnisse, Plattformen (im Brief)	references/2-formats.md
3. Story	beatmap.md	references/3-story.md
4. Look	Stilnotizen (im Brief)	references/4-look-and-motion.md
5. Aufbau	film.html: 4 Schlüssel-Standbilder für das OK des Benutzers, dann der ganze Film	references/5-build.md, assets/template.html
6. Musik und Sound	Songoptionen, Schnittpunkte, gemischtes MP4	references/6-music-and-sound.md
7. Rendern und Prüfen	Das MP4 und die Prüfergebnisse	references/7-render-and-check.md
8. Ausliefern	Endgültige Dateien, Kürzungen, Posting-Notizen	references/8-platforms.md

Lesen Sie eine Referenz, wenn Sie ihre Phase erreichen, nicht alle auf einmal.

1. Brief

Finden Sie heraus, was das Produkt ist, für wen das Video ist, die eine Sache, die sie sich merken sollen, und den magischen Moment: den Punkt, an dem das Produkt sichtbar seine Aufgabe erfüllt. Lesen Sie zuerst das Repository, die Website und die Dokumentation. Fragen Sie dann den Benutzer höchstens 5 Fragen in einer Charge. Schreiben Sie alles andere als Ihre Vorgabe in die offenen Fragen des Briefs und machen Sie weiter. Schreiben Sie brief.md.

2. Format

Wählen Sie die Art des Videos aus dem Produkttyp, dem Ziel und der Plattform: Teaser, Launch-Film, Demo, Erklärvideo, Feature-Auslieferung, Founder-Video, Hackathon-Demo. Legen Sie die Länge und die Seitenverhältnisse fest. Ein 15–30 Sekunden langer Launch-Film für X und LinkedIn ist der übliche Standard für Software. Bei widersprüchlichen Ratschlägen haben die Worte des Benutzers Vorrang, dann die Hauptplattform. Andere Plattformen bekommen Kürzungen.

3. Story

Schreiben Sie die Beatmap auf einem festen Tempo; 120 BPM ergibt einen 0,5s-Beat. Für jeden Beat sagt sie, was passiert, aus welchem früheren Element es erwächst, wohin die Kamera geht, welcher Text angezeigt wird und was man hört. Setzen Sie den magischen Moment auf den Drop der Musik.

4. Look

Verwenden Sie die eigene Marke des Produkts: seine Farben, Schriftarten, Logo, Icons und Komponenten. Lesen Sie die Design-Tokens und das CSS. Ohne Marke verwenden Sie einen hellen 2D-Stil: warm-weiße Leinwand, fast-schwarze UI, eine Akzentfarbe, eine saubere serifenlose Schrift, eine Monospace-Schrift für Code. Machen Sie Text groß genug, um auf einem Telefon lesbar zu sein.

5. Aufbau

Kopieren Sie $SKILL/assets/template.html nach video/film.html. Behalten Sie seine Engine, ersetzen Sie seinen Film. Jeder Stil kommt von der Zeit innerhalb von seek(t): keine CSS-Übergänge, Timer oder Zustand zwischen Frames. Formen verwandeln sich ineinander, anstatt zu verblassen.

Bauen Sie zuerst die 4 Schlüsselmomente: den Hook, den magischen Moment, den Payoff und die Endkarte. Rendern Sie sie als Standbilder und zeigen Sie sie dem Benutzer zusammen mit der Beatmap. Holen Sie sich hier ihr OK: einen Satz zu ändern ist billig, eine fertige Szene zu ändern nicht. Bauen Sie dann den Rest.

6. Musik und Sound

Finden Sie 3–4 Kandidatensongs nahe am Tempo des Films, jeder mit einem ruhigen Teil und einem klaren Drop. Fragen Sie vor dem Herunterladen. Messen Sie jeden Song mit scripts/beats.py, schauen Sie sich scripts/loudness_plot.py an und bestätigen Sie den Drop mit beats.py --around. Rendern Sie den Film mit Geschwindigkeit = Song BPM / Film BPM, damit die Beats übereinstimmen. Schneiden Sie dann jeden Song mit scripts/mux.py, sodass sein Drop auf den magischen Moment fällt. Lassen Sie den Benutzer wählen. Fügen Sie echte Soundeffekte für Klicks, Whooshes und Pops hinzu, platziert an ihrem lautesten Punkt.

7. Rendern und Prüfen

Rendern Sie zuerst Standbilder, dann das Video: node $SKILL/scripts/render.mjs film.html --out out/film.mp4. Prüfen Sie dann und zeigen Sie dem Benutzer den Beweis:

• scripts/pops.py findet Frames, die für einen einzelnen Frame aufblitzen. Es sollte 0 melden.
• scripts/contact_sheet.py --video zeigt Frames alle 0,5s. Überprüfen Sie jede Kachel auf Bildausschnitt, abgeschnittenen Text und Überlappungen.
• Überprüfen Sie das Drop-Timing und die Lautstärke (-14 LUFS).
• Sehen Sie es stumm in Telefongröße an.

8. Ausliefern

Exportieren Sie das Master und die Kürzungen, die jede Plattform benötigt, wie 16:9, 1:1 oder 4:5 und 9:16. Geben Sie dem Benutzer die Dateien, den Beitragstext mit der Behauptung und dem Link, und was vor dem Posten zu überprüfen ist. Machen Sie sich dann Notizen wie ein Regisseur ("die Mitte zieht sich", "der Zoom sollte auf den Drop treffen") und ändern Sie nur das, worum es in der Notiz geht.

Arbeitsregeln

• Echtes Produkt, wahre Behauptungen. Verwenden Sie den richtigen Namen, die richtige Benutzeroberfläche, die richtigen Wörter und Datenformen des Produkts. Beispieldaten müssen plausibel sein und sich über Szenen hinweg addieren: Wenn eine Bestellung über 120 $ eingeht, wächst die Summe um 120 $. Zeigen Sie niemals eine Funktion, die nicht existiert, oder eine Zahl, die Sie nicht belegen können. Sagen Sie "Beta" oder "Testnetz", wo es zutrifft.
• Eine Botschaft pro Video. Wenn der Brief drei Botschaften hat, machen Sie drei Videos oder wählen Sie eine aus.
• Fragen Sie vor dem Herunterladen von Musik, Soundeffekten oder Filmmaterial. Nennen Sie die Datei, die Quelle, ihre Lizenz und ihre Größe.
• Überprüfen Sie Ihre eigene Arbeit, bevor Sie sie zeigen. Die Prüfungen in Phase 7 fangen die meisten Probleme ab, bevor der Benutzer sie sieht. Melden Sie Ergebnisse mit Zahlen, nicht mit "sieht gut aus".
• Zeigen Sie Optionen, wo der Geschmack entscheidet. Besonders bei Musik: Schneiden Sie 3–4 Versionen und lassen Sie den Benutzer wählen.
• Kopieren Sie Struktur, nicht Kunst. Ein Referenzvideo kann sein Tempo und seine Beatstruktur leihen. Kopieren Sie nicht seine Figuren, Kunst, Musik oder Marke.

Video-Ordner

Halten Sie das Video außerhalb des Quellbaums des Produkts, es sei denn, der Benutzer möchte es dort haben.

video/
  brief.md        beatmap.md
  film.html       assets/      (Logo, Schriftarten, Icons, Screenshots)
  music/          sfx/         (Downloads mit ihren Lizenznotizen)
  stills/         out/         (Rendern; wegwerfbar)
  package.json    node_modules/ (Playwright)

Skripte

Skript	Macht
scripts/render.mjs	Standbilder oder das vollständige MP4 mit Bewegungsunschärfe, parallelen Workern und --speed
scripts/contact_sheet.py	Kachelt Standbilder oder Videoframes zu Blättern, die Sie in einem Bild ansehen können
scripts/pops.py	Findet Einzel-Frame-Fehler
scripts/beats.py	Songtempo, Beat-Raster, Drop-Kandidaten; --around für einen genaueren Blick
scripts/loudness_plot.py	Zeichnet die Lautstärke von Songs mit dem Raster und den Drop-Kandidaten
scripts/mux.py	Schneidet Musik auf den Treffer, platziert Soundeffekte nach ihrem Peak, stellt die Lautstärke ein

Führen Sie ein Skript ohne Argumente aus, um seine Verwendung zu sehen.