Película de lanzamiento

Launch video

Crea un video de lanzamiento como lo haría un pequeño estudio de motion. Primero decide qué debe hacer el video y planifícalo paso a paso. Luego construye cada cuadro en código, para que cualquier parte pueda cambiarse y renderizarse nuevamente en un minuto.

El resultado es un cortometraje del producto real: su interfaz de usuario reconstruida en HTML, moviéndose en una cuadrícula de compás, cortada al ritmo de la música, a 60 fps con desenfoque de movimiento.

Lo que necesitas

• Node 18+, ffmpeg con libx264, Python 3.9+. Los scripts de Python solo usan la biblioteca estándar.
• Playwright con Chromium, instalado en la carpeta del video: npm i -D playwright && npx playwright install chromium.
• Los scripts/ y assets/template.html de esta skill.

En los comandos, $SKILL es la carpeta de esta skill (por ejemplo ~/.claude/skills/launch-video). Configúrala una vez en el shell: SKILL=~/.claude/skills/launch-video. Ejecuta los comandos desde la carpeta del video.

El proceso

Trabaja a través de las fases en orden. Cada una escribe algo que la siguiente utiliza.

Fase	Salida	Lectura
1. Brief	brief.md	references/1-brief.md
2. Formato	formato, duración, relaciones de aspecto, plataformas (en el brief)	references/2-formats.md
3. Historia	beatmap.md	references/3-story.md
4. Apariencia	notas de estilo (en el brief)	references/4-look-and-motion.md
5. Construcción	film.html: 4 fotogramas clave para la aprobación del usuario, luego toda la película	references/5-build.md, assets/template.html
6. Música y sonido	opciones de canciones, puntos de corte, MP4 mezclado	references/6-music-and-sound.md
7. Renderizado y verificación	el MP4 y los resultados de la verificación	references/7-render-and-check.md
8. Entrega	archivos finales, versiones recortadas, notas de publicación	references/8-platforms.md

Lee una referencia cuando llegues a su fase, no todas a la vez.

1. Brief

Averigua qué es el producto, para quién es el video, lo único que deben recordar y el momento mágico: el punto donde el producto hace visiblemente su trabajo. Lee primero el repositorio, el sitio web y la documentación. Luego haz al usuario un máximo de 5 preguntas en un solo lote. Para cualquier otra cosa, escribe tu valor predeterminado en las preguntas abiertas del brief y continúa. Escribe brief.md.

2. Formato

Elige el tipo de video según el tipo de producto, el objetivo y la plataforma: teaser, película de lanzamiento, demo, explicativo, lanzamiento de función, video del fundador, demo de hackathon. Establece la duración y las relaciones de aspecto. Una película de lanzamiento de 15 a 30 segundos para X y LinkedIn es la opción predeterminada habitual para software. Cuando los consejos entren en conflicto, las palabras del usuario ganan, luego la plataforma principal. Otras plataformas obtienen versiones recortadas.

3. Historia

Escribe el mapa de compás a un tempo fijo; 120 BPM da un compás de 0.5s. Para cada compás, dice qué sucede, de qué elemento anterior crece, hacia dónde va la cámara, qué texto se muestra y qué se escucha. Coloca el momento mágico en el drop de la música.

4. Apariencia

Usa la propia marca del producto: sus colores, fuentes, logotipo, iconos y componentes. Lee los tokens de diseño y CSS. Sin una marca, usa un estilo 2D claro: lienzo blanco cálido, interfaz de usuario casi negra, un color de acento, una fuente sans limpia, una fuente mono para código. Haz que el texto sea lo suficientemente grande para leerlo en un teléfono.

5. Construcción

Copia $SKILL/assets/template.html a video/film.html. Mantén su motor, reemplaza su película. Cada estilo proviene del tiempo dentro de seek(t): sin transiciones CSS, temporizadores o estado entre fotogramas. Las formas se transforman unas en otras en lugar de desvanecerse.

Construye primero los 4 momentos clave: el gancho, el momento mágico, la recompensa y la tarjeta final. Renderízalos como fotogramas fijos y muéstralos al usuario junto con el mapa de compás. Obtén su aprobación aquí: cambiar una oración es barato, cambiar una escena terminada no lo es. Luego construye el resto.

6. Música y sonido

Encuentra 3–4 canciones candidatas cerca del tempo de la película, cada una con una parte tranquila y un drop claro. Pregunta antes de descargar algo. Mide cada canción con scripts/beats.py, mira scripts/loudness_plot.py y confirma el drop con beats.py --around. Renderiza la película a velocidad = BPM de la canción / BPM de la película para que los compases coincidan. Luego corta cada canción con scripts/mux.py, para que su drop caiga en el momento mágico. Deja que el usuario elija. Agrega efectos de sonido reales para clics, silbidos y estallidos, colocados por su punto más fuerte.

7. Renderizado y verificación

Renderiza primero los fotogramas fijos, luego el video: node $SKILL/scripts/render.mjs film.html --out out/film.mp4. Luego verifica y muestra al usuario la prueba:

• scripts/pops.py encuentra fotogramas que parpadean durante un solo fotograma. Debería reportar 0.
• scripts/contact_sheet.py --video muestra fotogramas cada 0.5s. Mira cada mosaico para ver el encuadre, texto cortado y superposiciones.
• Verifica la sincronización del drop y el volumen (-14 LUFS).
• Míralo silenciado en tamaño de teléfono.

8. Entrega

Exporta el máster y las versiones recortadas que cada plataforma necesita, como 16:9, 1:1 o 4:5, y 9:16. Entrega al usuario los archivos, el texto de la publicación con el eslogan y el enlace, y qué verificar antes de publicar. Luego toma notas como un director ("la parte media se alarga", "el zoom debería coincidir con el drop") y cambia solo aquello de lo que trata la nota.

Reglas de trabajo

• Producto real, afirmaciones verdaderas. Usa el nombre real del producto, su interfaz de usuario, palabras y formas de datos. Los datos de muestra deben ser plausibles y sumarse en todas las escenas: si llega un pedido de $120, el total aumenta en $120. Nunca muestres una característica que no exista o un número que no puedas respaldar. Di "beta" o "testnet" cuando corresponda.
• Un mensaje por video. Si el brief tiene tres mensajes, haz tres videos o elige uno.
• Pregunta antes de descargar música, efectos de sonido o material de archivo. Nombra el archivo, la fuente, su licencia y su tamaño.
• Verifica tu propio trabajo antes de mostrarlo. Las comprobaciones en la fase 7 detectan la mayoría de los problemas antes de que el usuario los vea. Reporta los resultados con números, no con "se ve bien".
• Muestra opciones cuando el gusto decide. Música especialmente: corta 3–4 versiones y deja que el usuario elija.
• Copia la estructura, no el arte. Un video de referencia puede prestar su ritmo y estructura de compás. No copies sus personajes, arte, música o marca.

Carpeta del video

Mantén el video fuera del árbol de fuentes del producto, a menos que el usuario quiera que esté allí.

video/
  brief.md        beatmap.md
  film.html       assets/      (logotipo, fuentes, iconos, capturas de pantalla)
  music/          sfx/         (descargas, con sus notas de licencia)
  stills/         out/         (renderizados; desechables)
  package.json    node_modules/ (Playwright)

Scripts

Script	Hace
scripts/render.mjs	Fotogramas fijos, o el MP4 completo con desenfoque de movimiento, trabajadores paralelos y --speed
scripts/contact_sheet.py	Organiza fotogramas fijos o de video en hojas que puedes ver en una imagen
scripts/pops.py	Encuentra fallos de un solo fotograma
scripts/beats.py	Tempo de la canción, cuadrícula de compás, candidatos a drop; --around para una vista detallada
scripts/loudness_plot.py	Dibuja el volumen de las canciones con la cuadrícula y los candidatos a drop
scripts/mux.py	Corta la música para el golpe, coloca los efectos de sonido por su pico, establece el volumen

Ejecuta cualquier script sin argumentos para ver su uso.