svemyh/launch-video

Vidéo de Lancement

Transforme un post X (URL ou texte) ainsi que le site web d'une marque (ou un profil brand.json sauvegardé) en un film de lancement H.264 de 25 à 40 secondes en 1920x1080 60 ips avec audio. Tous les choix créatifs résident dans deux petits fichiers JSON (brand.json et launch.json) ; la compilation, la mise en page, la synthèse de la bande-son et le rendu Remotion sont déterministes.

Prérequis

• Bun (bun >= 1.1)
• ffmpeg et ffprobe sur le PATH (pour l'encodage H.264/AAC, le mastering loudnorm et l'inspection des planches contact)
• ImageMagick (magick sur le PATH, recommandé pour la conversion WebP, l'écrêtage alpha et les recadrages de fenêtres)

<SKILL_DIR> ci-dessous désigne le répertoire contenant ce SKILL.md (par exemple ~/.claude/skills/launch-video ou ~/.agents/skills/launch-video).

Flux de Travail de Bout en Bout

1. Lire le post X (si une URL est donnée)

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

Récupère le texte du post, l'auteur, les statistiques et les médias joints via le point de terminaison public fxtwitter (aucune connexion ni clé API nécessaire).

2. Amorcer ou charger le profil de marque (brand.json)

Si vous avez déjà un brand.json organisé, réutilisez-le. Lorsqu'il est pointé vers un site web en direct (par exemple https://fomo.family ou https://acme.dev), amorcez d'abord un dossier de marque :

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

Organisez visuellement ./work/brand/brand.json (ne sautez pas cette étape) :

1. Marque (mark) : Inspectez inline-*.svg, favicon.svg et mark.png. La scène est sombre (#000000 ou le fond sombre du site tel que #060510), donc la mark doit être blanche/clair sur un fond transparent (PNG32 ou SVG). Si l'icône du site se trouve sur un carré sombre opaque, extrayez la marque claire sur fond transparent avec 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) et inspectez un échantillon d'aperçu.
2. Captures d'écran (screens) : Visualisez chaque image téléchargée dans screens/ (ou capturez des routes produit en direct à une résolution 2x avec Playwright sans tête). Ne conservez que les vraies captures d'écran de produit (4–8 écrans), supprimez les textures de fond décoratives et écrivez une description précise pour chaque écran. Ajoutez crop: {x, y, w, h} si une capture d'écran de bureau a des marges de fond d'écran extérieures. Les PNG transparents (téléphones flottants, cartes, notifications) sont automatiquement écrêtés et rendus sans cadre.
3. Logos partenaires/écosystème (logos) : Ajoutez des icônes SVG/PNG nettes pour toutes les plateformes, chaînes, modèles ou outils référencés dans les séquences (logos/x.svg, logos/apple.svg, logos/slack.svg, etc.). Définissez "fill": "#F2F2F2" sur les icônes tramées monochromes sombres pour qu'elles se détachent sur les tuiles hexagonales.
4. Palette & CTA : Confirmez palette.bg, palette.fg, palette.accent, mosaicColors (6–10 accents de marque + ardoises neutres, pas de dégradés violets), website (domaine nu, par ex. "fomo.family") et cta (big, title, body, button).

3. Écrire launch.json

{
  "brand": "./brand/brand.json",
  "open": { "tagline": "Où les traders deviennent des légendes." },
  "beats": [
    { "id": "spot", "headline": "Voyez-le sur X, tradez-le.", "screen": "desktop-terminal", "hexes": ["x", "solana"] },
    { "id": "social", "headline": "Suivez ce que les meilleurs traders achètent.", "screen": "social-feed" },
    { "id": "alerts", "headline": "Alertes en temps réel avant que ça bouge.", "screen": "live-alerts" },
    { "id": "sync", "headline": "Téléphone vers bureau, synchronisé.", "screen": "desktop-and-phone" },
    { "id": "fund", "headline": "Financez instantanément avec Apple Pay.", "screen": "apple-pay", "hexes": ["apple", "solana", "base"], "hexLayout": "top" }
  ],
  "cta": {},
  "outro": { "seconds": 6.5 },
  "music": "profile"
}

Règles pour des séquences nettes (voir references/format-guide.md) :

• Tagline (open.tagline) : 5 mots ou moins nommant ce qu'est le produit.
• 4 à 6 séquences : Commencez par l'accroche du post X sur la séquence 1, puis parcourez les surfaces produit concrètes. Gardez chaque titre à 2–5 mots se terminant par un point pour qu'il tienne sur une seule ligne à 64 px.
• Correspondance exacte de l'écran : Chaque titre doit correspondre à ce qui est visiblement montré dans son screen. N'associez jamais un titre à une capture d'écran non pertinente.
• Disposition des hexagones (hexLayout) : "auto" (défaut : 3 logos s'empilent proprement à left ; 1–2 se placent sur sides), "top" (rangée horizontale au-dessus d'une capture y = 340) ou "sides".
• Audio (music) : "profile" utilise le fichier music de brand.json lorsqu'il est défini et synthétise sinon un fond minimal-électro à 92 bpm synchronisé au rythme et masterisé à -15 LUFS ; "synth" synthétise toujours ; "none" rend silencieux ; ou passez un chemin vers un fichier .m4a/.mp3/.wav personnalisé.

4. Rendre un brouillon rapide, inspecter les images, puis rendre le 1080p60 complet

# Brouillon demi-échelle pour QA visuelle (~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

Inspectez ./work/draft-sheet.png et les images complètes des séquences clés :

• L'image 0 montre la mosaïque hexagonale bord à bord ; la marque verrouillée est nette et visible sur la scène sombre.
• Chaque titre tient sur une seule ligne avec de larges marges et correspond à sa capture.
• Les rendus de produit transparents flottent proprement sans boîte de bordure grise ; les tuiles hexagonales ont un espace de respiration propre par rapport à la capture.
• Le curseur CTA atterrit proprement sur le bouton pilule sur l'image de clic.
• La conclusion explose à partir d'un mur d'hexagones complet et maintient le domaine tapé proprement.

Corrigez tout problème de copie, de recadrage ou de mise en page dans brand.json/launch.json, puis rendez en pleine qualité 1920x1080 60 ips :

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

Signalez le chemin absolu complet de ./work/launch.mp4 et le tableau des séquences.