svemyh/launch-video

Video de Lanzamiento

Convierte una publicación en X (URL o texto) más el sitio web de una marca (o un perfil guardado brand.json) en un filme de lanzamiento H.264 de 25 a 40 segundos en 1920x1080 a 60 fps con audio. Todas las decisiones creativas residen en dos pequeños archivos JSON (brand.json y launch.json); la compilación, el diseño, la síntesis de la banda sonora y el renderizado en Remotion son deterministas.

Requisitos previos

• Bun (bun >= 1.1)
• ffmpeg y ffprobe en PATH (para codificación H.264/AAC, masterización loudnorm e inspección de hojas de contactos)
• ImageMagick (magick en PATH, recomendado para conversión WebP, recorte de alfa y recortes de ventana)

<DIR_HABILIDAD> a continuación se refiere al directorio que contiene este SKILL.md (por ejemplo ~/.claude/skills/launch-video o ~/.agents/skills/launch-video).

Flujo de trabajo completo

1. Leer la publicación en X (si se proporciona una URL)

bun <DIR_HABILIDAD>/scripts/post.ts "https://x.com/<usuario>/status/<id>"

Obtiene el texto de la publicación, el autor, las estadísticas y los archivos multimedia adjuntos a través del endpoint público de fxtwitter (sin necesidad de inicio de sesión ni clave API).

2. Inicializar o cargar el perfil de marca (brand.json)

Si ya tienes un brand.json curado, reutilízalo. Cuando se apunte a un sitio web en vivo (por ejemplo https://fomo.family o https://acme.dev), primero inicializa una carpeta de marca:

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

Luego curar visualmente ./work/brand/brand.json (no te saltes este paso):

1. Marca (mark): Inspecciona inline-*.svg, favicon.svg y mark.png. El escenario es oscuro (#000000 o el fondo oscuro del sitio como #060510), por lo que mark debe ser blanco/claro sobre un fondo transparente (PNG32 o SVG). Si el icono del sitio está sobre un cuadrado oscuro opaco, extrae la marca clara sobre transparencia con 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) e inspecciona una muestra de vista previa.
2. Capturas de pantalla (screens): Visualiza cada imagen descargada en screens/ (o captura rutas de producto en vivo a 2x DPI con Playwright sin interfaz gráfica). Conserva solo capturas reales de la interfaz de producto (4-8 capturas), elimina texturas de fondo decorativas y escribe una description precisa para cada captura. Añade crop: {x, y, w, h} si una captura de escritorio tiene márgenes de fondo de pantalla externos. Los PNG transparentes (teléfonos flotantes, tarjetas, notificaciones) se recortan automáticamente y se renderizan sin marco.
3. Logos de socios/ecosistema (logos): Añade iconos SVG/PNG nítidos para cualquier plataforma, cadena, modelo o herramienta mencionada en los ritmos (logos/x.svg, logos/apple.svg, logos/slack.svg, etc.). Establece "fill": "#F2F2F2" en iconos monocromáticos oscuros rasterizados para que se destaquen sobre los mosaicos hexagonales.
4. Paleta y CTA: Confirma palette.bg, palette.fg, palette.accent, mosaicColors (6-10 acentos de marca + pizarras neutras, sin degradados morados), website (dominio desnudo, ej. "fomo.family") y cta (big, title, body, button).

3. Escribir launch.json

{
  "brand": "./brand/brand.json",
  "open": { "tagline": "Donde los traders se convierten en leyendas." },
  "beats": [
    { "id": "spot", "headline": "Míralo en X, tradéalo.", "screen": "desktop-terminal", "hexes": ["x", "solana"] },
    { "id": "social", "headline": "Sigue lo que compran los mejores traders.", "screen": "social-feed" },
    { "id": "alerts", "headline": "Alertas en tiempo real antes de que se mueva.", "screen": "live-alerts" },
    { "id": "sync", "headline": "Teléfono y escritorio, sincronizados.", "screen": "desktop-and-phone" },
    { "id": "fund", "headline": "Fondos al instante con Apple Pay.", "screen": "apple-pay", "hexes": ["apple", "solana", "base"], "hexLayout": "top" }
  ],
  "cta": {},
  "outro": { "seconds": 6.5 },
  "music": "profile"
}

Reglas para ritmos precisos (consulta references/format-guide.md):

• Tagline (open.tagline): 5 palabras o menos que nombren qué es el producto.
• 4 a 6 ritmos: Comienza con el gancho de la publicación en X en el Ritmo 1, luego recorre superficies concretas del producto. Mantén cada titular de 2 a 5 palabras que terminen en un punto para que quepa en una sola línea a 64 px.
• Coincidencia exacta de captura: Cada titular debe coincidir con lo que se muestra visiblemente en su screen. Nunca combines un titular con una captura de pantalla no relacionada.
• Disposición de hexágonos (hexLayout): "auto" (por defecto: 3 logos se apilan limpiamente a la left; 1-2 se colocan en sides), "top" (fila horizontal encima de una captura de y = 340) o "sides".
• Audio (music): "profile" usa el archivo music de brand.json cuando está configurado y, en caso contrario, sintetiza una base electrónica minimalista a 92 bpm sincronizada y masterizada a -15 LUFS; "synth" siempre sintetiza; "none" renderiza sin sonido; o pasa una ruta a un archivo .m4a/.mp3/.wav personalizado.

4. Renderizar un borrador rápido, inspeccionar fotogramas, luego renderizar 1080p60 completo

# Borrador a media escala para control de calidad visual (~20-40s)
bun <DIR_HABILIDAD>/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

Inspecciona ./work/draft-sheet.png y los fotogramas completos de los ritmos clave:

• El fotograma 0 muestra el mosaico hexagonal de borde a borde; la marca del bloque es nítida y visible sobre el escenario oscuro.
• Cada titular cabe en una línea con amplios márgenes y coincide con su captura.
• Los renders de producto transparentes flotan limpiamente sin un cuadro de borde gris; los mosaicos hexagonales tienen espacio de respiro limpio de la captura.
• El cursor de la CTA aterriza limpiamente en el botón tipo píldora en el fotograma de clic.
• El outro explota desde una pared hexagonal completa y mantiene el dominio escrito limpiamente.

Corrige cualquier problema de copia, recorte o diseño en brand.json / launch.json, luego renderiza con calidad completa 1920x1080 a 60 fps:

bun <DIR_HABILIDAD>/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

Informa la ruta absoluta completa de ./work/launch.mp4 y la tabla de ritmos.