launch-video — sitio→MP4 sin API

Video de lanzamiento

Renderer: el paquete npm launch-video-skills. Contrato completo de escena: https://github.com/anudeepadi/launch-video-skills#scene-contract

• npx launch-video-skills setup: una vez por máquina (Chromium sin cabeza + paquetes de voz Python). Requiere Node 18+, Python 3.10+, ffmpeg. Los pesos de Kokoro (~350 MB) y whisper small.en (~480 MB) se descargan a ~/.cache/lvk en la primera ejecución de voz.
• npx launch-video-skills new <name>: crea la estructura launch-videos/scenes/<name>/index.html con launch-videos/kit/ junto a él.
• npx launch-video-skills render <scene.html> [flags]: escribe en ./out/.
• La descarga de Chromium se detiene → export LVK_CHROME=/ruta/a/chrome-headless-shell (cualquier compilación local).
• Python de python.org falla SSL en macOS → export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())').

Lo que separa un buen video de lanzamiento de "AI slop" está en references/craft.md. Léelo antes de hacer el storyboard.

Pasos

1. Marca y hechos del producto en vivo. Obtén el sitio con Playwright. Registra textualmente titular, subtítulo, nombres de funciones, contenido de ejemplo del sitio (hilos de demostración, prompts, código, listas de problemas) y llamadas a la acción. Lee los estilos computados para familia de fuente/ peso/ espaciado entre letras y colores de píxeles de muestra para fondo/ texto/ acento (las variables CSS se vuelven obsoletas). Guarda el logo SVG y cualquier imagen en launch-videos/scenes/<name>/assets/. Usa la fuente del sitio solo si su licencia permite redistribución; de lo contrario, usa la fuente empaquetada más cercana (Inter, JetBrains Mono, Space Grotesk). Nunca inventes métricas, clientes, integraciones o interfaz de usuario. Si algo está marcado como planeado/preview, déjalo fuera o etiquétalo. Si no puedes obtener ejemplos reales de UI, detente y dilo. Pon la URL de origen y la fecha en un comentario al principio de la escena.
2. Guión, luego storyboard. Una o dos líneas cortas por toma, tomadas de la copia del sitio; 20–40 s en total. Usa say cuando la forma hablada difiera (puntos, acrónimos: say: 'Build A.I. agents'). 5–6 tomas, una idea cada una: gancho (producto o titular en pantalla dentro de 2 s) → primer momento de uso → producto en acción (UI real reconstruida en HTML a partir del propio ejemplo del sitio, nunca una captura de pantalla) → segunda capacidad → 3 pilares o cómo funciona → CTA con logo. Marcas tranquilas: music.style: 'ambient', efectos de sonido suaves (0.2–0.6). Herramientas para desarrolladores: 'pulse' y golpes. La voz es opcional; solo música es común en X.
3. Escribe launch-videos/scenes/<name>/index.html contra ../../kit/kit.css y kit.js. Comienza desde la plantilla generada. Marca las tomas data-shot="id" sin --in/--out codificados. Las líneas de voz van en SCENE.voice.lines (key, shot, text/say, at/after, pause beats). Fija los beats al habla con data-on="key", data-on="key:word", data-edge="e". Llama a K.layout() después de definir SCENE, luego deriva beats JS de K.at/K.end/K.shot: velocidad de escritura = longitud del texto / duración del hablado, clic del cursor en la palabra clave, señales de sonido de escritura de las mismas constantes. onFrame(t) debe ser puro en t. Las transformaciones JS van en wrappers sin clase de animación CSS. Sin filter: blur grande, backdrop-filter o modos de mezcla de pantalla completa.
4. Bucle de revisión. npx launch-video-skills render launch-videos/scenes/<name>/index.html --sheet 1. Cada línea <- ASR heard: es una posible mala pronunciación: vuelve a escribir con say y verifica de nuevo (whisper a veces escucha mal audio correcto; marca esos para escucha humana). Lee el PNG de la hoja para: texto sobre imágenes ocupadas, legibilidad de texto pequeño, fotogramas vacíos, colisiones a mitad de transición, escritura que termina antes de que termine la toma, resaltado de sintaxis roto. --stills t1,t2 para verificaciones a resolución completa. Itera con notas de gusto ("demasiado rápido", "no está claro lo que pasó") en lugar de un solo intento.
5. Renderiza y verifica. npx launch-video-skills render launch-videos/scenes/<name>/index.html --workers 4. Luego:
   • ffprobe: h264 + aac, duración esperada.
   • volumedetect: media alrededor de −19 a −17 dB, máximo por debajo de −1 dB.
   • Sincronización: transcribe el MP4 final con marcas de tiempo de palabras small.en de faster-whisper; la primera palabra de cada línea dentro de ~0.2 s de la línea de tiempo impresa en el registro. Las palabras clave caen en los beats visuales.
   • Continuidad: compara fotogramas a través de los límites de los workers (número de fotogramas / workers).
6. Entrega. Entrega la ruta del MP4. Nunca sobrescribas un corte anterior (mv -n o un nuevo --out). Di claramente que la voz y la música son sintetizadas y no han sido verificadas por oído. Ofrece texto de publicación que evite afirmaciones de "hecho en un solo prompt". Las voces de pago (ElevenLabs, OpenAI, Google) son un intercambio dentro del lib/tts.py del paquete; menciona solo si el usuario desea una lectura más humana.