Video de lanzamiento: montaje Remotion con voz y a ritmo

Vídeo de lanzamiento

Diriges y construyes un vídeo promocional corto de principio a fin: preguntas de descubrimiento → guion gráfico → capturas del producto → guion y voz en off → música → escenas con Remotion → revisión → renderizado → miniatura y versiones. La persona aporta el gusto y el conocimiento del producto; tú aportas el pipeline y la artesanía. Haz las preguntas que figuran a continuación, toma tú mismo el resto de decisiones y di lo que has elegido.

Todo lo que hay aquí es genérico. Aplica la marca, las pantallas, las claves API y la licencia de música del producto.

Instalación (cualquier agente)

• Claude Code: copia esta carpeta en ~/.claude/skills/launch-video/ (personal) o <repo>/.claude/skills/launch-video/ (proyecto).
• Codex: cópiala en ~/.codex/skills/launch-video/, o referencia SKILL.md desde tu AGENTS.md.
• Otros agentes: colócala en cualquier sitio e indica al agente que lea SKILL.md primero. Las rutas, versiones y API cambian con el tiempo; si un comando o la forma de una API ha evolucionado, consulta la documentación actual y adáptalo en lugar de detenerte.

¿Qué incluye esta habilidad

Ruta	Qué es
references/storyboard-template.md	Formas de narración, tipos de gancho, cómo usar vídeos de referencia, hoja de ritmos y una receta característica-ritmo
references/visual-catalog.md	Los bloques visuales, qué muestra cada uno y a qué productos/funcionalidades se adapta cada uno
references/motion-cheatsheet.md	Curvas de easing, muelles, ritmo, familias de estilo y tipo, transiciones, cámara sobre IU, textura, cursor
references/audio.md	Voz en off vs música, formas de las API de TTS y música, mezcla, sonoridad
references/review-checklist.md	Qué comprobar por escena, en el corte completo y antes de compartir
references/gotchas.md	Modos de fallo y sus soluciones
scripts/	Análisis de referencias, clasificación de voces, línea de VO con tiempos de palabra, selección de tomas, generación/QA/opciones/estiramiento de música, temporización ajustada al ritmo, hojas de contacto, finalización
template/	Inicio de Remotion: tokens de marca, ayudantes de temporización, titular cinético, cursor, grano, HUD, montaje de logotipo, escenas genéricas de Gancho/Revelación/Característica/Recompensa/Final/Miniatura, una biblioteca de elementos visuales, una previsualización del Catálogo y video.config.tsx (el guion gráfico en código)

Herramientas

• Node 20+, ffmpeg, Python 3.11 via uv/uvx (los scripts declaran sus propias dependencias).
• Remotion: npx create-video@latest --yes --blank --no-tailwind video. Instala las habilidades oficiales del agente (npx skills add remotion-dev/skills) y lee remotion-best-practices antes de escribir escenas.
• Opcional: rubberband (estiramiento temporal limpio), demucs y Whisper via uvx (análisis y QA), una cuenta de ElevenLabs (u otro TTS/música).
• Licencias: Remotion es gratuito para particulares y empresas de hasta 3 personas; las empresas más grandes necesitan una licencia corporativa de Remotion. Consulta los términos comerciales de tu proveedor de TTS/música. Los logotipos de terceros son marcas comerciales; muéstralos solo para integraciones reales.

1. Preguntas de descubrimiento (preguntar antes de planificar)

Hazlas de una sola vez (usa la herramienta de pregunta/opción múltiple si tu cliente la tiene; si no, una lista numerada breve). Ofrece un valor predeterminado recomendado para cada una para que la persona pueda simplemente confirmar.

1. Producto: su nombre exactamente como debe aparecer, y una frase sobre qué hace y para quién.
2. Audiencia y objetivo: quién lo ve (clientes, prospectos, inversores, el equipo interno) y qué deberían hacer después (registrarse, reservar una demo, probar una funcionalidad).
3. Qué mostrar, en orden de prioridad: las 3–6 funcionalidades o momentos que más importan. El tiempo en pantalla sigue este orden.
4. Duración y formato: p.ej., corte principal de 45–75 s en 16:9; qué versiones (15–20 s, 1:1, 9:16) y dónde se publicará.
5. Sonido: voz en off + música (recomendado cuando el producto necesita explicación), o solo música. Preferencia de voz (género, acento, energía) o "que coincida con este ejemplo".
6. Historia y aspecto: la forma narrativa y el tipo de gancho (consulta references/storyboard-template.md; recomienda uno con un motivo), claro u oscuro, la familia de estilo (nativa del producto, editorial, showreel, lúdica, cinematográfica; references/motion-cheatsheet.md), y cualquier vídeo que les guste. Activos de marca: logotipo (SVG), colores, fuentes, o dónde leerlos (el CSS del producto).
7. Pantallas: ¿puedes ejecutar el producto con una cuenta de demostración y datos ficticios, o proporcionarán capturas de pantalla? Cualquier cosa que no deba aparecer.
8. Tarjeta final: texto de CTA y URL; fecha de lanzamiento / texto "ahora en beta".
9. Claves: dónde está la clave de API de TTS/música (variable de entorno o un .env ignorado por git). Nunca pidas que peguen claves en el chat.

Si ya han respondido a algunas de estas, no las preguntes de nuevo.

2. Planificar el guion gráfico

• Elige una forma narrativa y un tipo de gancho de references/storyboard-template.md (problema → producto → prueba es solo una de varias). Los ritmos de las funcionalidades siguen el orden de prioridad.
• Si la persona comparte vídeos de referencia, toma prestada su artesanía (ritmo, cortes, cámara, tipo), nunca sus líneas, aperturas o secuencias; comprueba el guion con las transcripciones de referencia antes de grabar.
• Escribe la VO como una línea corta por escena (≈2.5 palabras/s; 60 s ≈ 140 palabras). Cada línea debe coincidir con el momento visual de su escena.
• Para cada ritmo de funcionalidad, elige un elemento visual de references/visual-catalog.md que se adapte a este producto (una app móvil podría ser Phone → Steps → Notifications; una herramienta de desarrollo ComposerAnswer → BeforeAfter → Device). Varía los movimientos entre ritmos consecutivos.
• Comparte el guion gráfico como una tabla corta y confírmalo antes de construir.

3. Capturar el producto

• Ejecuta el producto con una cuenta de demostración y datos ficticios. Nunca muestres clientes reales, colegas, correos electrónicos o datos de producción.
• Captura capturas de pantalla de referencia (Playwright, 2x DPR) de cada pantalla que use el guion gráfico y anota el texto visible exacto. Reconstruye esas pantallas como componentes React simplificados dentro de Device/Phone/tarjetas para que se mantengan nítidas y se animen. Las capturas de pantalla reales pueden ir directamente a Device/Phone cuando no merezca la pena reconstruirlas.
• Si no se puede alcanzar un estado de forma honesta, estilízalo y dilo.

4. Voz en off (si se elige)

• Coloca las líneas en config/script.json. scripts/vo_lines.py hace 3 tomas por línea con tiempos de palabra; scripts/vo_pick.py selecciona la mejor por coincidencia de transcripción (y similitud con una voz de referencia, si se proporciona).
• Genera por línea, nunca todo el guion a la vez: las lecturas de una sola pasada juntan las líneas y no puedes empezar cada línea en su corte.
• Usa voces predeterminadas/de catálogo. Para parecerse a una voz de un ejemplo, clasifica las voces del catálogo con scripts/voice_match.py; nunca clonar a una persona real sin consentimiento.

5. Música

• Genera 3–4 opciones instrumentales (scripts/music.py) o licencia pistas. Haz un archivo de extracto A/B/C/D (scripts/music_options.sh) y deja que la persona elija de oído.
• Mide la pista elegida (scripts/music_qa.py); las pistas generadas rara vez siguen el tempo o las secciones solicitadas, así que ajusta los cortes a los ritmos detectados (scripts/build_timing.py). Si el final natural cae en el lugar equivocado, estira el tiempo un pequeño porcentaje (scripts/stretch_music.sh).

6. Construir

• Configura la plantilla (template/README.md), establece los tokens de marca, el logotipo y la CTA, y escribe el guion gráfico en video.config.tsx.
• Antes de que exista la VO, scripts/draft_timing.py proporciona una temporización de animática para poder construir las escenas; después, build_timing.py la sustituye por tiempos de palabra reales.
• Construye una escena cada vez. Después de cada una, renderiza 6–10 fotogramas a media escala y míralos como una hoja de contacto (scripts/sheet.py).
• Renderiza y envía la composición StyleTest (gancho, revelación, primera funcionalidad) para su aprobación antes de construir el resto.

7. Revisar e iterar

• Renderiza el corte completo, ejecuta scripts/finalize.sh (−14 LUFS, carátula, hoja de contacto a 1 fps, transcripción de la mezcla final) y repasa references/review-checklist.md.
• Para cada ronda de notas, cambia solo lo que se pidió, vuelve a renderizar y di exactamente qué cambió respecto a la versión anterior. Haz commit de cada versión.
• No puedes ver en tiempo real: di qué comprobaciones hiciste (fotogramas, transcripción, sonoridad) y pide a la persona que lo vea una vez antes de compartir.

8. Entrega

• Máster 1920×1080, 30 fps (60 para movimiento denso de IU), H.264 CRF 16–18, AAC 256k, −14 LUFS, −1 dBTP.
• Miniatura: la composición Thumbnail, legible a ~360 px de ancho; también es el fotograma 0 del vídeo (muchas apps previsualizan el primer fotograma) y la carátula del MP4. Exporta un PNG y un JPG de 1280×720 para plataformas con miniaturas personalizadas.
• Versiones cuando se soliciten: un corte de gancho de 15–20 s, 1:1 y 9:16 (apila el tipo sobre la IU), un bucle silencioso para web, subtítulos SRT a partir de los tiempos de palabra de la VO.

Vídeos explicativos y para redes sociales

El mismo pipeline sirve para hacer vídeos explicativos cortos (una entrada de blog, un artículo, una funcionalidad o una idea) para LinkedIn y X. Lo que cambia:

• Los hechos provienen de la fuente, léela completa. Los resúmenes de herramientas de extracción web pueden inventar o fusionar números. Haz una lista de verificación de hechos a partir del texto original antes de escribir el guion.
• Guion para cualquiera, no para especialistas. Una idea por pantalla, como máximo ~10 palabras grandes, una analogía cotidiana para el concepto central (por ejemplo, una evaluación se convierte en "un examen de práctica frente al examen real"), sin jerga ni nombres de modelos, como máximo dos números redondeados, y termina con algo que el espectador pueda hacer. "Preciso pero demasiado técnico" es la primera nota más probable.
• Ritmo: el contenido de cada pantalla aparece en aproximadamente un segundo (entradas rápidas, cortes rápidos de ~0.12 s en el ritmo), luego se mantiene 4–5 s para leer. En la plantilla, envuelve una escena en SpeedCtx.Provider value={1.6} para reproducir una entrada creada más rápido sin volver a temporizarla.
• Formato: 4:5 (1080×1350) para el feed de LinkedIn/X, 30–50 s, solo música. El texto en pantalla es el pie de foto (la mayoría del vídeo del feed se ve sin sonido). El fotograma 0 es una portada terminada.
• Aspecto: que coincida con la identidad visual existente de la persona (sus carruseles, sitio), no con la plantilla del producto.
• Música: para redes sociales, las pistas contundentes con batería para anuncios de producto (bombo, caja, palmas, graves profundos, que empiecen en el primer tiempo) suelen ser mejores que las pistas ambientales suaves. Genera 3 opciones y deja que la persona elija de oído; las pistas del mismo tempo pueden compartir una cuadrícula de ritmo.
• Entrega con la publicación: texto de la publicación, colocación de enlaces, etiquetas, texto alternativo, portada y una hora de publicación basada en los análisis de audiencia de la propia persona (dónde están los seguidores, cuándo está despierta su red).

Reglas

• Solo datos ficticios en pantalla; nada de personas reales a menos que hayan dado su consentimiento.
• No afirmes números o capacidades que el producto no tenga. Confirma que cualquier "cientos de…" o estadística sea cierta y esté aprobada.
• Escribe texto original. No reutilices el gancho, eslogan o lema de otro vídeo, y no te limites a una fórmula en todos los vídeos.
• Mantente en la paleta de la marca; las escenas repentinas fuera de paleta se perciben como fallos.
• Mantén la música por debajo de la línea de recompensa (suave descenso, nunca cerca del silencio).
• Usa marcas oficiales para logotipos de terceros, nunca aproximaciones.