Video de demostración web
Convierte una aplicación web funcional en un MP4 de 20 a 60 segundos. La pantalla siempre es la aplicación real; los subtítulos, el cursor y los efectos son capas superpuestas. Usa solo datos inventados.
Kit de herramientas: starter/ junto a este archivo. Cópialo en el proyecto del usuario (por ejemplo video/), ejecuta npm install allí y escribe guiones de escena contra él. Ejemplo práctico en el repositorio: examples/sample-tasks/.
1. Elige primero el estilo
| El video es... | Estilo | Por qué |
|---|---|---|
| Cómo usar una función (guías, onboarding, respuestas de soporte) | Tutorial: graba la interfaz real mientras se hace clic | Los espectadores copian los pasos, por lo que deben ver el flujo real y sin editar a un ritmo legible |
| Por qué el producto vale la pena (lanzamiento, página de inicio, anuncios, resumen) | Anuncio con movimiento: anima sobre capturas de pantalla | Los espectadores no siguen paso a paso; el video debe conectar acciones con resultados y mantener la atención |
No los mezcles en un mismo video. Un tutorial con objetos voladores es difícil de seguir; un anuncio hecho con una simple grabación se siente largo.
Detalles: tutorial en references/walkthrough.md, anuncio con movimiento en references/motion.md.
2. Acuerda antes de renderizar
Renderizar es el paso costoso. Antes de escribir código de escena, redacta un storyboard (references/storyboard.md) y obtén la aprobación del usuario sobre:
- Estilo (tutorial o anuncio) y quién lo verá
- Duración y número de escenas
- Tamaño de salida (predeterminado 2560x1440 a 30 fps; 1080x1920 para vertical)
- Marca: colores, fuente, logotipo, nombre del producto y palabras que no deben aparecer
- Datos: qué nombres y números ficticios aparecen en pantalla (nunca clientes reales)
- Voz en off o silencioso
- Dónde se guardará el archivo al finalizar
Un storyboard tiene una columna de Movimiento además de Pantalla y Subtítulo (anuncio) para que cada escena use un tipo diferente de movimiento a propósito.
3. Construcción
Tutorial
- Primero prueba el flujo: un script que hace clics sin grabar, para corregir selectores y esperas
- Graba en partes (una página o paso por parte) con
lib/recorder.mjs, luego únelas conconcatParts - Escribe subtítulos siguiendo references/copy.md
Anuncio con movimiento
- Captura cada estado de la interfaz con
lib/capture.mjs(capturas de pantalla de 3840 píxeles de ancho + posiciones de elementos) - Compón escenas en Remotion con
motion/parts.tsx(cámara, cursor, subtítulos, chips, contadores numéricos) - Verifica imágenes fijas en fotogramas clave (
remotion still ... --frame=N --scale=0.25) antes de un renderizado completo
Voz en off: no se incluye ninguna herramienta. Si el usuario la desea, recomienda Gemini 3.1 Flash TTS (gemini-3.1-flash-tts-preview) con la voz Charon.
4. Verifica antes de entregar
Ejecuta node lib/qa.mjs out/video.mp4 --sheet 16 --end y observa ambas imágenes. Detalles: references/qa.md.
- El tamaño, fps y duración coinciden con el storyboard
- Ningún subtítulo cortado o cubriendo el botón que se hace clic
- Sin diálogo a medio abrir, sin fotograma en blanco ni logotipo que carga tarde (verifica el último segundo por separado)
- Cada número que se anima termina en el valor que muestra la pantalla real
- Cuando entregues, indica qué partes son efectos escenificados (un documento volador, un contador) y cuáles son el producto funcionando realmente
5. Reglas estrictas
- Interfaz real, datos falsos. No aparecerán en pantalla, en subtítulos, en nombres de archivo ni en la descripción nombres, IDs, correos electrónicos o cifras de clientes, personas o empresas reales
- No publicar (YouTube, redes sociales, sitio web) sin la aprobación explícita del usuario para esa subida
- No afirmar lo que el producto no hace. Si un paso se simula para la filmación (una respuesta del servidor, una subida), el subtítulo no debe presentarlo como magia automática
- Conserva las fuentes del renderizado (guiones, storyboard) en el repositorio; mantén los MP4 y las capturas de pantalla fuera de git