Launch-Video

Was macht Launch-Video?

Erstellt aus einem X-Post (URL oder Text) plus der Website einer Marke (oder einem gespeicherten brand.json-Profil) einen 25–40 Sekunden langen 1920x1080 60 fps H.264-Launch-Film mit Audio. Alle kreativen Entscheidungen werden in zwei kleinen JSON-Dateien (brand.json und launch.json) festgehalten; Kompilierung, Layout, Soundtrack-Synthese und Remotion-Rendering sind deterministisch.

Voraussetzungen

• Bun (bun >= 1.1)
• ffmpeg und ffprobe im PATH (für H.264/AAC-Kodierung, Loudnorm-Mastering und Kontaktbogen-Inspektion)
• ImageMagick (magick im PATH, empfohlen für WebP-Konvertierung, Alpha-Beschneidung und Fensterausschnitte)

<SKILL_DIR> bezieht sich im Folgenden auf das Verzeichnis, das diese SKILL.md enthält (z. B. ~/.claude/skills/launch-video oder ~/.agents/skills/launch-video).

End-to-End-Workflow

1. X-Post lesen (falls eine URL angegeben wurde)

bun <SKILL_DIR>/scripts/post.ts "https://x.com/<handle>/status/<id>"

Ruft den Post-Text, Autor, Statistiken und angehängte Medien über den öffentlichen fxtwitter-Endpunkt ab (kein Login oder API-Key erforderlich).

2. Markenprofil bootstrappen oder laden (brand.json)

Wenn Sie bereits ein kuratiertes brand.json haben, verwenden Sie es erneut. Wenn Sie auf eine Live-Website verweisen (z. B. https://fomo.family oder https://acme.dev), bootstrappen Sie zuerst einen Markenordner:

bun <SKILL_DIR>/scripts/bootstrap.ts "https://fomo.family" --out ./work/brand

Kuratieren Sie dann visuell ./work/brand/brand.json (überspringen Sie diesen Schritt nicht):

1. Markierung (mark): Überprüfen Sie inline-*.svg, favicon.svg und mark.png. Die Bühne ist dunkel (#000000 oder der dunkle Hintergrund der Website wie #060510), daher muss mark weiß/hell auf transparentem Hintergrund sein (PNG32 oder SVG). Wenn das Website-Symbol auf einem undurchsichtigen dunklen Quadrat sitzt, extrahieren Sie die helle Markierung auf Transparenz mit ImageMagick (magick raw.png -colorspace gray -level 6%,92% alpha.png && magick -size WxH xc:white alpha.png -compose CopyOpacity -composite -trim +repage PNG32:mark-white.png) und überprüfen Sie eine Vorschau-Farbprobe.
2. Bildschirmaufnahmen (screens): Betrachten Sie jedes heruntergeladene Bild in screens/ (oder erfassen Sie Live-Produkt-Routen mit 2x DPI mit headless Playwright). Behalten Sie nur echte Produkt-UI-Aufnahmen (4–8 Screens), löschen Sie dekorative Hintergrundtexturen und schreiben Sie eine genaue description für jeden Screen. Fügen Sie crop: {x, y, w, h} hinzu, wenn ein Desktop-Screenshot äußere Ränder hat. Transparente PNGs (schwebende Telefone, Karten, Benachrichtigungen) werden automatisch beschnitten und rahmenlos gerendert.
3. Partner-/Ökosystem-Logos (logos): Fügen Sie scharfe SVG/PNG-Icons für alle Plattformen, Chains, Modelle oder Tools hinzu, die in den Beats erwähnt werden (logos/x.svg, logos/apple.svg, logos/slack.svg usw.). Setzen Sie "fill": "#F2F2F2" bei dunklen monochromen Raster-Icons, damit sie auf den Hex-Kacheln hervorstechen.
4. Palette & CTA: Bestätigen Sie palette.bg, palette.fg, palette.accent, mosaicColors (6–10 Marken-Akzente + neutrale Grautöne, keine violetten Verläufe), website (nackte Domain, z. B. "fomo.family") und cta (big, title, body, button).

3. launch.json schreiben

{
  "brand": "./brand/brand.json",
  "open": { "tagline": "Where traders become legends." },
  "beats": [
    { "id": "spot", "headline": "See it on X, trade it.", "screen": "desktop-terminal", "hexes": ["x", "solana"] },
    { "id": "social", "headline": "Follow what top traders buy.", "screen": "social-feed" },
    { "id": "alerts", "headline": "Real-time alerts before it moves.", "screen": "live-alerts" },
    { "id": "sync", "headline": "Phone to desktop, in sync.", "screen": "desktop-and-phone" },
    { "id": "fund", "headline": "Fund instantly with Apple Pay.", "screen": "apple-pay", "hexes": ["apple", "solana", "base"], "hexLayout": "top" }
  ],
  "cta": {},
  "outro": { "seconds": 6.5 },
  "music": "profile"
}

Regeln für scharfe Beats (siehe references/format-guide.md):

• Tagline (open.tagline): Höchstens 5 Wörter, die benennen, was das Produkt ist.
• 4 bis 6 Beats: Beginnen Sie mit dem Hook des X-Posts in Beat 1, dann gehen Sie durch konkrete Produktoberflächen. Halten Sie jede Überschrift auf 2–5 Wörter, die mit einem Punkt enden, damit sie in einer Zeile bei 64 px bleibt.
• Exakte Bildschirm-Übereinstimmung: Jede Überschrift muss mit dem übereinstimmen, was auf dem zugehörigen screen sichtbar ist. Kombinieren Sie niemals eine Überschrift mit einem nicht zusammenhängenden Screenshot.
• Hex-Layout (hexLayout): "auto" (Standard: 3 Logos stapeln sich sauber auf der left; 1–2 sitzen auf sides), "top" (horizontale Reihe über einer y = 340-Aufnahme) oder "sides".
• Audio (music): "profile" verwendet die music-Datei aus brand.json, falls gesetzt, und synthetisiert andernfalls einen beat-gematchten 92 bpm minimal-elektronischen Soundtrack, der auf -15 LUFS gemastert wird; "synth" synthetisiert immer; "none" rendert stumm; oder geben Sie einen Pfad zu einer benutzerdefinierten .m4a/.mp3/.wav-Datei an.

4. Schnellen Entwurf rendern, Frames inspizieren, dann volles 1080p60 rendern

# Halbskaliger Entwurf für visuelle Qualitätssicherung (~20-40s)
bun <SKILL_DIR>/scripts/render.ts ./work/launch.json --out ./work/draft.mp4 --scale 0.5
ffmpeg -v error -y -i ./work/draft.mp4 -vf "fps=1,scale=480:-1,tile=6x6:padding=2:color=gray" -frames:v 1 ./work/draft-sheet.png

Überprüfen Sie ./work/draft-sheet.png und vollständige Frames der wichtigsten Beats:

• Frame 0 zeigt das randlose Honigwaben-Mosaik; die Markierung ist scharf und sichtbar auf der dunklen Bühne.
• Jede Überschrift passt in eine Zeile mit breiten Rändern und stimmt mit ihrer Aufnahme überein.
• Transparente Produktdarstellungen schweben sauber ohne grauen Rahmen; Hex-Kacheln haben sauberen Abstand zur Aufnahme.
• Der CTA-Cursor landet sauber auf dem Pill-Button im Klick-Frame.
• Der Outro-Burst aus einer vollständigen Honigwaben-Wand und hält die getippte Domain sauber.

Korrigieren Sie etwaige Text-, Ausschnitts- oder Layout-Probleme in brand.json / launch.json und rendern Sie dann in voller 1920x1080 60 fps Qualität:

bun <SKILL_DIR>/scripts/render.ts ./work/launch.json --out ./work/launch.mp4
ffprobe -v error -show_entries format=duration:stream=codec_name,width,height,r_frame_rate -of default=noprint_wrappers=1 ./work/launch.mp4

Melden Sie den vollständigen absoluten Pfad von ./work/launch.mp4 und die Beat-Tabelle.