Ameliawampler/launch-video

Video de lanzamiento

Eres el director y el narrador del producto. El editor viene después. Cada toma debe ganarse su lugar llevando al espectador un paso más cerca de «Lo entiendo, lo quiero».

El video es una página web con un solo reloj. window.seek(T) dibuja el segundo global T. Playwright lo captura a 30 fps, y ffmpeg codifica los fotogramas junto con una voz en off y una pista musical. Nada depende del tiempo de pared, por lo que cualquier fotograma se puede re-renderizar por sí solo. Eso permite arreglar una escena sin tocar el resto.

Los archivos iniciales están en template/ y scripts/, y el README explica cómo ejecutarlos.

1. Historia primero (antes de cualquier píxel)

Escribe el guion como oraciones etiquetadas A, B, C, etc. Cada oración se convierte en un título y un ritmo. Usa esta estructura de cuatro tiempos:

1. Gancho (0–8 s). Nombra el dolor en las palabras del espectador. Sin muro de logos, sin «presentamos». Los primeros 8 segundos deciden si alguien ve el resto.
2. Producto en acción (8–45 s). Un problema, luego la función que lo resuelve, luego el resultado. Muestra el producto real haciendo algo real: escribir un prompt, obtener una respuesta, publicar. Evita un desfile de funciones y muestra como máximo 4–5 capacidades.
3. Por qué es diferente (45–75 s). Muestra la historia de la arquitectura o las integraciones, idealmente con un diagrama que se mueva. Explica quién hace qué. Por ejemplo: «Nosotros hacemos X; Stripe se encarga de los pagos y los impuestos».
4. Oferta + cierre (últimos 10–15 s). Da el precio o el plan, y termina con una línea de marca. Haz que esa última línea sea corta y memorable.

Apunta a 80–95 s en total. Un anuncio de 30 s y un corte 9:16 se pueden hacer después desde la misma línea de tiempo.

2. Reglas visuales (restricciones estrictas)

• Sin chrome del navegador. Nunca muestres pestañas, barras de URL o marcadores. Reconstruye las pantallas del producto como tarjetas HTML limpias, usando la grabación real solo como referencia, y anonimiza todos los datos.
• Las imágenes del producto flotan. Dales esquinas redondeadas (16–18 píxeles) y sombras suaves y alargadas. Mantén un padding generoso para que la tarjeta nunca llene el encuadre; como máximo, alrededor del 75% del ancho.
• Sin palabras sobre las imágenes del producto. Las explicaciones van en llamadas al lado de la interfaz o en títulos debajo de ella, nunca sobre la captura de pantalla.
• El color de acento aparece solo sobre fondos oscuros. Nunca lo uses sobre una imagen de producto. Si la línea de marca necesita el acento, pon la tarjeta final sobre un color de marca oscuro.
• No hagas todo de un solo tono. Usa uno o dos toques complementarios, por ejemplo un rojo como #C8323C en un punto de alerta o un púrpura para una marca asociada, con moderación.
• Enfoca un área a la vez. Para destacar una función, el cursor se mueve allí, hace doble clic, la cámara se acerca, y el resto de la interfaz se vuelve gris o se desenfoca.
• Llamadas son pequeñas píldoras blancas con un punto de color, ancladas a elementos reales del DOM. Aparecen con un ligero rebasamiento, como máximo tres en pantalla, y desaparecen antes de que la toma termine.
• Fondo: manchas de color de marca borrosas y de deriva lenta, más un 6% de grano. Debe ser tranquilo y nunca competir con el producto. No copies el diseño de un banner al pie de la letra.

3. Vocabulario de movimiento

• Transición de toma = blur-morph. La toma entra a escala 0.92 con un desenfoque de 18 píxeles que se desvanece a 0, con una curva de salida suave en aproximadamente 0.7 s. Sale con escala +5%, desenfoque 18 píxeles y opacidad a 0 en 0.55 s. Superpón las tomas alrededor de 0.1 s. Evita transiciones llamativas como cortinillas de píxeles o tirones de tela; se ven baratas.
• Push-in lento del 3–5% en cada toma, para que nada sea estático nunca.
• Entradas de elementos usan ease-out en 300–650 ms, escalonadas 80–150 ms de diferencia (stg()).
• Cursor: movimientos suaves con ease, animación de presión al hacer clic (escala 0.82 durante 120 ms) y pausas de aproximadamente 0.3 s antes de hacer clic.
• Introducción del dock (0–2.5 s): un dock de macOS esmerilado con íconos reales de aplicaciones de Apple (tómalos de un kit de interfaz de iOS/macOS, no dibujados a mano) y el ícono de tu aplicación en el medio. La ranura de la aplicación crece, la cámara se acerca a ella, el cursor hace clic, el ícono rebota con un punto de ejecución y la escena se transforma con blur-morph en la aplicación.
• Cadencia: deja que cada ritmo respire. Deja 0.8–2 s de pausa visual después de una oración de voz en off antes de la siguiente idea. Si se siente apresurado, lo está. Re-espacia la voz en off antes de cortar los visuales.

4. Audio

• Voz en off: genera la voz en off con el clon de voz del fundador en ElevenLabs, una sola toma de todo el guion. Transcríbela (Scribe) para obtener tiempos a nivel de palabra, luego re-espaciala: corta en los silencios entre oraciones e inserta silencio adicional donde un ritmo necesite espacio. Escribe los tiempos de inicio y fin de la oración en timeline.js como TL={A:[inicio,fin,texto],...}, y ancla cada animación a TL en lugar de segundos fijos.
• Para cambiar una línea, genera solo esa línea, insértala en un silencio y actualiza su entrada en TL.
• Música: una pista instrumental. Verifica que la transcripción esté vacía para asegurarte de que no tenga voces. Mézclala a volumen 0.3 con ducking de sidechain bajo la voz en off, y desvanécela en los últimos 3–4 s (consulta scripts/mix.sh).

5. Extraer una animación de tu sitio web

Las animaciones del sitio impulsadas por desplazamiento se pueden capturar fotograma a fotograma (scripts/capture-scroll.js):

• Oculta la navegación, los banners de cookies y el texto de la sección para que solo quede el visual.
• Captura densamente, usando pasos de desplazamiento de 4 píxeles. Un paso de 16 píxeles reproducido en 10 s da aproximadamente 6 fps y se ve entrecortado.
• En el lienzo, mezcla fotogramas adyacentes por índice fraccionario para lograr suavidad sub-fotograma.
• Si divides una captura en navegadores paralelos, calienta cada uno desplazándote desde la misma posición inicial primero. Las animaciones de desplazamiento tienen estado, por lo que una carga nueva en medio de la página salta en las uniones.
• Verifica si hay uniones calculando la diferencia absoluta media entre fotogramas consecutivos. Los picos muy por encima de la mediana indican un salto.

6. Pipeline

1. Escribe el guion, luego genera la voz en off, luego transcríbela, re-espaciala y escribe timeline.js.
2. Construye las escenas en scenes.js. Cada una es S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}}).
3. Verifica las imágenes fijas con node scripts/preview.js page.html out.png T ... en los ritmos clave.
4. Renderiza con scripts/render-parallel.sh. Re-renderiza solo los rangos de tiempo que cambiaste.
5. Mezcla con scripts/mix.sh, luego codifica con scripts/encode.sh (libx264 crf 17, yuv420p, AAC 192k, faststart).
6. QA: extrae fotogramas del mp4 codificado en cada escena y verifica la línea de marca, las llamadas y las uniones. Escúchalo una vez a máxima velocidad antes de enviarlo.

7. Problemas aprendidos a la fuerza

• Ejecuta los renders como un único trabajo de fondo supervisado que espera a sus trabajadores. Los trabajos nohup desvinculados se matan y dejan fotogramas parciales.
• Precargar cientos de imágenes grandes por página puede hacer que Chromium se bloquee con «Target crashed». Si una página precarga una secuencia grande de imágenes, usa como máximo 2 trabajadores en paralelo. Siempre vuelve a verificar el recuento de fotogramas y los registros del trabajador antes de codificar, porque un trabajador bloqueado deja silenciosamente fotogramas obsoletos.
• Los nombres de clase pueden colisionar con el CSS de la aplicación. Por ejemplo, .dark en la hoja de estilo de la aplicación hizo que una tarjeta tuviera 1080 píxeles de alto, así que prefija las clases de la escena o usa nombres inusuales.
• Las llamadas deben fijarse al tiempo de salida de la toma, o se quedan sobre la siguiente escena.
• No exageres las afirmaciones técnicas en las llamadas. Escribe «Sin ida y vuelta a la API · decidido en el proceso», no «0 ms».
• Al cambiar la línea de salida, también elimina su título si la tarjeta final ya muestra las mismas palabras.