Vídeo de lanzamiento de producto
Produce un vídeo de ~40s donde los gráficos en movimiento llevan la narrativa y cada píxel "producto" está realmente renderizado por la aplicación real.
Esto surge de una falsa dicotomía que la gente repite:
- Un vídeo puro de gráficos en movimiento parece profesional pero no prueba nada — no hay producto real.
- Una grabación de pantalla en bruto lo prueba todo pero parece amateur — no hay diseño de movimiento.
La respuesta no es ninguna de las dos: Remotion es la línea de tiempo maestra, y las tomas del producto son fotogramas reales capturados al conducir la aplicación real en un navegador headless.
Construye un pequeño proyecto Remotion junto al producto: toolkit de captura compartido + primitivas, un directorio por vídeo de cada aplicación (marca, tomas, script de captura, línea de tiempo). Consulta references/toolkit.md para la estructura recomendada.
No negociables
Lee esto antes de escribir cualquier código. Cada uno costó tiempo real de depuración, y todos fallan silenciosamente — obtienes un resultado que parece plausible pero está mal.
Captura
| Trampa | Qué ocurre | Solución |
|---|---|---|
setViewport({deviceScaleFactor: 2}) | page.screencast() mide su cadena de filtros ffmpeg en el DPR del sistema, por lo que construye una cadena 1× y desecha el detalle retina. Sin error. | Forzarlo en el navegador: --force-device-scale-factor=2 + deviceScaleFactor: 0 en el viewport (0 = "predeterminado del sistema"). |
| Headless renderiza sin cursor | page.mouse.move() envía eventos CDP que la página ve, pero nunca se pinta nada. | Inyectar un cursor DOM mediante evaluateOnNewDocument. Ponlo en la página, no compuesto en Remotion — entonces cada transformación de Remotion (inserción de fotograma, zoom) lo escala exactamente como una grabación real. Un sprite requiere invertir cada transformación, y 6px de desplazamiento se lee como roto. |
| Headless no tiene GPU | Cualquier contenido WebGL/three.js se graba como un panel negro o en blanco. | --use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader. Verificar con una lectura de píxeles, no solo con "existió un contexto". |
| SwiftShader también compone la página | Un controlador GL de software componiendo 2560x1440 limita toda la pestaña a ~8fps, por lo que cada toma animada se graba como una presentación de diapositivas. Se lee como un producto lento, no como una captura rota, así que nadie sospecha de los flags. | Añadir --disable-gpu-compositing. El rasterizador de CPU de Skia es mucho más rápido en 2D plano, WebGL sigue funcionando, y los fotogramas A/B son idénticos. Medido en la misma página: 8.2fps → 60.1fps. |
| Juzgar la suavidad a ojo | Los fotogramas duplicados se ven bien en una hoja de contactos y al desplazarse un fotograma a la vez. Solo la reproducción lo delata, y para entonces ya está renderizado. | Contar fotogramas distintos: ffmpeg -i take.mp4 -vf mpdecimate,showinfo -f null - 2>&1 | grep -c pts_time. Muy por debajo del número de fotogramas del archivo significa tartamudeo. |
page.mouse.click(x, y, {clickCount: 2}) | Envía una pulsación con metadatos clickCount. Chrome nunca sintetiza dblclick. Dos clics discretos con 60ms de diferencia tampoco. | Si la aplicación necesita un dblclick real, haz clic para el movimiento visible del cursor y luego envía el evento dentro del fotograma en las coordenadas del propio elemento. |
page.keyboard.type() después de hacer clic en un iframe | Las teclas van al elemento enfocado de la página padre. Si el padre envía teclas a la aplicación (navegación con flechas, atajos), tu escritura silenciosamente conduce la UI en lugar de introducir texto. | Escribir en el marco: frame.type(selector, text). |
evaluateOnNewDocument haciendo trabajo DOM | Se ejecuta al inicio del documento donde document.head y document.documentElement pueden ser nulos. Un appendChild sin protección lanza un error y aborta silenciosamente todo lo que le sigue en ese script. | Proteger, y diferir a DOMContentLoaded. |
| Grabar la navegación | Entierra los segundos útiles en lo profundo del archivo y hincha el mezzanine. | Dividir cada toma en setup (no grabado) y action (grabado). |
| Confiar en marcas de tiempo | Screencast es de velocidad de fotogramas variable; la línea de tiempo codificada comprime en relación al tiempo real, por lo que una marca en 22s no está en 22s en el archivo. | Usar marcas para encontrar aproximadamente dónde mirar, luego elegir startAt extrayendo fotogramas y observando. |
| Recursos remotos/enlazados | CDNs de terceros intermitentemente rechazan el navegador de captura; las cuadrículas de imágenes se pintan como tableros de comprobación de transparencia vacíos, lo que se lee como un producto roto. | Esperar imágenes y advertir, luego encuadrar la toma para evitarlas. No enviar una toma con arte en blanco. |
window.scrollTo en un shell de aplicación | Muchos shells desplazan un elemento interno (<main class="overflow-y-auto">), no la ventana. Desplazar la ventana es un no-op silencioso y la toma nunca se mueve. | Encontrar el verdadero scroll y establecer su scrollTop. |
| Adivinar coordenadas de clic | Las aplicaciones a menudo solo aceptan interacciones en nodos específicos — ej. un editor en línea que solo acepta elementos hoja (childElementCount === 0) mientras los encabezados envuelven su texto en spans. Hacer clic en el objetivo visualmente obvio no hace nada. | Leer el código fuente de la aplicación para la regla, luego preguntar a la página dónde están sus objetivos válidos (frame.evaluate) y mapear coordenadas del marco → coordenadas de la página a través del cuadro medido del iframe. |
Renderizado
| Trampa | Qué ocurre | Solución |
|---|---|---|
| Omitir la transcodificación del mezzanine | Remotion busca arbitrariamente; con un GOP normal cada búsqueda decodifica desde el fotograma I anterior. Un render de 3 minutos se convierte en 40. | Transcodificar a todo-intra: -c:v libx264 -crf 14 -g 1 -keyint_min 1 -sc_threshold 0 -pix_fmt yuv420p, más etiquetas bt709 explícitas para que Chrome no desplace el color de la marca. |
page.screencast({format:'mp4'}) | Emite VP9 dentro de un MP4 fragmentado — con mal soporte. | format: 'webm', luego transcodificar. |
<TransitionSeries> con una cuadrícula de ritmo | Las transiciones se superponen, por lo que la duración total = suma de secuencias − suma de transiciones. Tu cuadrícula de fotogramas se desplaza silenciosamente. | Para un corte exacto de fotograma, usar <Sequence from/durationInFrames> explícito y hacer disoluciones localmente. Afirmar que la cadena suma el total. |
Una <Sequence> más larga que su fuente | Se congela en el último fotograma decodificado — se lee como una parada, no como un error. | Limitar cada duración por la longitud real de la toma. Registrar las duraciones de la fuente en un comentario. |
premountFor en secuencias superpuestas | Una secuencia premontada se renderiza temprano encima de la actual — obtienes texto doblemente expuesto como un fantasma. | No premontar secuencias que compartan espacio de pantalla; premontar solo a través de cortes duros. |
| Superposiciones posicionadas en el espacio de la composición | Si el componente de metraje recorta y escala la placa internamente, una máscara o resalte colocada en coordenadas de composición no se alineará con nada en el fotograma — los bordes cortan a través del contenido. | Colocar las superposiciones dentro de la misma transformación que la placa, o hacer el tratamiento nativamente en lugar de sobre el metraje. |
Math.random() / Date.now() en una composición | Se vuelve a calcular en cada fotograma; el texto parpadea. Remotion renderiza cada fotograma de forma independiente. | Hacer que toda aleatoriedad sea una función pura del índice (un hash basado en sin). |
Animaciones CSS / transiciones / Tailwind animate-* dentro de Remotion | Render congelado o basura — Remotion impulsa el tiempo mediante useCurrentFrame(), no el reloj de pared. | Reconstruir el movimiento en useCurrentFrame(). Esto también significa que generalmente no se pueden reutilizar los componentes animados del sitio de marketing. |
| Construir un bucle desplazándose en la película | Dos errores de costura: un destello negro si el rango se abre en una disolución, y un corte brusco donde se envuelve. | Dar al bucle su propia composición y fundir su cola en un <Freeze frame={0}> de su propia cabeza. Elegir una toma en movimiento continuo; cualquier cosa que se detenga es casi estática y mala para la reproducción automática. |
Proceso
1. Establecer la verdad del producto antes de diseñar la película
El paso más importante. Leer el código de cada capacidad que la película pretende mostrar. Las páginas de marketing ilustran aspiraciones; no asumas que el producto hace lo que su propia animación de la página de inicio implica.
Ya ha ocurrido una vez: la pieza central planeada de una película se tomó de un componente animado en el sitio de marketing que mostraba un documento transformándose en cuatro relaciones de aspecto diferentes. El producto tenía codificada una sola relación de aspecto y una etapa de exportación fija — el componente era una ilustración de una idea, no una funcionalidad. Construir la toma estrella sobre ella habría puesto una afirmación no soportada en la página de inicio.
Verificar, específicamente:
- ¿Qué contenido realmente se renderiza? Los registros antiguos pueden no ser renderizables por el motor actual.
- ¿Qué rutas necesitan autenticación? ¿Cuáles redirigen sin estado previo?
- ¿Qué requiere realmente cada funcionalidad interactiva para activarse?
2. Reducir el riesgo del pipeline con la prueba más pequeña posible
En orden, antes de construir nada encima:
- Probar la geometría de captura (página marcada en las esquinas → ¿el archivo es realmente 2×?).
- Probar la autenticación (¿puede el navegador alcanzar una ruta con sesión iniciada?).
- Probar WebGL si hay algún 3D involucrado.
- Probar una interacción de principio a fin.
3. Explorar, no adivinar
Capturar pantalla de cada superficie candidata y mostrar al usuario una hoja de contactos antes de invertir tiempo en tomas de vídeo. El contenido domina el valor de producción: contenido de demostración mediocre hace que una película hermosa sea un anuncio de un producto mediocre.
4. Elegir el contenido de demostración deliberadamente
Preferir la propia marca del producto. Mostrar a un tercero reconocible es más persuasivo pero pone la marca registrada de alguien más en la página de inicio, e intercambiar un tercero por otro no cambia eso. El contenido autorreferencial también cierra el círculo: el artefacto que vende la herramienta fue hecho por la herramienta.
Si el contenido aún no existe, crearlo es un trabajo de diseño, no de captura — está en cada fotograma de la segunda mitad de la película. Esbozarlo deliberadamente, producir algunos candidatos, y dejar que el usuario elija.
5. Cortar a una cuadrícula
120 BPM ⇒ 1 compás = 60 fotogramas = 2s a 30fps. Aterrizar cada corte en un múltiplo de 30 y cada límite de acto en 60. No cuesta nada, y los recortes surgen gratis.
6. Verificar mirando
Después de cada render, extraer fotogramas y mirarlos realmente. Construir una hoja de contactos etiquetada. Cada defecto real encontrado hasta ahora — logotipos en blanco, una toma mostrando la página equivocada, un título ilegible en un panel claro, una banda oscura de un recorte mal medido, una costura de máscara a través de una etiqueta — fue encontrado mirando fotogramas, no por ninguna prueba que pasara.
Verlo sin sonido, ya que así es como se reproducirá automáticamente.
Reglas editoriales
Estas son las que separan una película que funciona de una que es buena.
Cada afirmación en pantalla debe estar respaldada por el metraje a su lado. Un corte tenía "Comparte un enlace" sobre metraje donde no se mostraba nada de compartir. O mostrarlo o decirlo claramente en una tarjeta — no insinuar.
Cuidado con afirmaciones que son honestas en contexto pero no a escala de vídeo. Una cifra etiquetada como "ilustrativa" en tipografía pequeña se convierte en una afirmación firme en cuanto es un fotograma principal sostenido en una película de marketing. Mantener esas fuera de los fotogramas sostenidos.
Citar el movimiento del producto, no reinventarlo. Tomar la propia curva de easing y vocabulario de entrada de la aplicación. Una curva para todo lo que entra o aterriza. Nada rebota — el sobrepaso se lee como vacilación.
Dos fondos, nunca gris medio. Un fondo oscuro para afirmaciones, uno claro para explicaciones. Elegirlos de los propios tokens del producto.
Un acento, usado con moderación — el cursor, la palabra que lleva la oración, un estado cambiante. No decoración.
Nada en el fotograma que no sea para la audiencia. Direcciones de correo electrónico reales, nombres de organización, la propia conversación del operador con un asistente en la aplicación, insignias de modo de desarrollo. Preferir los propios mecanismos de la aplicación (cookies para una barra lateral colapsada o un banner descartado) sobre trucos CSS — sin destello en cámara.
Una "toma estrella" merece el mayor tiempo. Elegir el momento que muestra algo que los competidores estructuralmente no pueden hacer, luego: cámara fija, sin cortes, sin texto sobre él, y dejar que la música se desvanezca. La quietud le dice al ojo que el sujeto se está moviendo, no la cámara. Poner la línea explicativa después — el texto antes de la reacción le dice a la gente qué pensar.
La legibilidad gana a la cobertura. Una toma extendida en cuatro pantallas puede dejar que ninguna sea legible. Detenerse en una suele ser mejor.
Construir el ritmo en lugar de filmarlo cuando la UI no puede interpretarlo. Una pantalla estática no puede presentar tres cosas una a la vez. Si el ritmo necesita una secuencia que el producto no hace, componerla de forma nativa en Remotion usando el texto real del producto y los tokens — y mantenerla visualmente distinta del metraje para que se lea como un explicador, no como una captura de pantalla falsa.
Si no hay voz en off, las tarjetas llevan el 100% del significado. Presupuestar tiempo de lectura.
Discutir con el usuario, no decidir solo
- Eslóganes y texto en pantalla. Ofrecer varias opciones agrupadas por ángulo, con una recomendación y el razonamiento. Notar que la película quiere una señal de demostración mientras que un titular de sitio web quiere una declaración de posicionamiento duradera — no tienen que ser la misma línea.
- Qué contenido mostrar — mostrar la hoja de contactos.
- Música. No puedes licenciar una pista. Diseñar la película para funcionar sin sonido y enviar una hoja de referencia (BPM, dónde cae cualquier caída) para que una pista proporcionada caiga en la cuadrícula más tarde. Cuando llegue una, verificar su forma antes de colocarla: medir el volumen a lo largo del tiempo en lugar de asumir que tiene una introducción o una caída para alinear.
- Licencia de Remotion. Gratuita para individuos, organizaciones sin fines de lucro y empresas de hasta 3 empleados; por encima de eso se requiere una licencia comercial. Señalarlo antes de que se envíe.
Comandos (forma)
La captura nunca inicia un servidor y nunca adivina un puerto — las URLs de autenticación suelen estar fijadas.
# terminal 1 — producto ya sirviendo
pnpm --filter <app> dev # o equivalente
# terminal 2 — proyecto de película
pnpm install
pnpm check-webgl # si hay algún 3D
pnpm capture:<app> # o una toma: pnpm capture:<app> <shot>
pnpm mezzanine:<app> # obligatorio — ver trampas
pnpm studio
pnpm render:<app> # mp4 / webm / loop / poster según sea necesario
Autenticación para superficies con sesión iniciada: preferir tomar prestada una cookie de sesión activa sobre crear un usuario desechable (las cuentas vacías fuerzan la generación lenta de contenido antes de cada grabación).
Envío a una página
Dos formas, y es decisión del usuario:
- Bucle corto, clic para la película. La más ligera — unos pocos cientos de KB se reproducen automáticamente, la película completa solo se obtiene a demanda.
- Película completa como carga principal. Asegurarse de que el primer fotograma sea un póster silencioso — el reproductor no debe mostrar un fotograma negro mientras carga.
Verificar que el bucle corto (a) tenga una duración de al menos 3s para que el autoplay no parezca un error, (b) comience en un punto que parezca un comienzo, y (c) termine en un punto que invite al clic.