Video de demo de aplicación

Idea central

El estilo está en la aplicación. Construye una interfaz oscura y cinematográfica que marque el ritmo, pulse y anuncie resultados reales; luego graba esa interfaz; después añade una barra de subtítulos reservada, zooms y tarjetas tipográficas de título y cierre en la edición.

Si el contenido aún no es una aplicación (un pipeline, un conjunto de datos puntuado, un modelo de costos, una CLI), créalo primero como un pequeño frontend listo para cámara (consulta FRONTEND_STYLE.md y theme.css). No saltes directamente a diapositivas tipográficas ni a un modelo de video.

No generes la demo con un modelo de generación de video, un modelo de generación de imágenes ni TTS. Las tarjetas de título y cierre son tipografía. La imagen predeterminada es muda; no añadas música de stock ni voz a menos que el resumen lo solicite.

Un ejemplo trabajado y anónimo de tres cortes (subtítulos superpuestos vs. una presentación de diapositivas vs. una barra reservada en una sesión en vivo) está en REFERENCE_CASE.md.

Recursos

Todas las rutas son relativas a esta carpeta de habilidad.

FRONTEND_STYLE.md — tokens de diseño, patrones de componentes, tono de copia, especificaciones de movimiento, lista de verificación previa a la grabación
theme.css — variables CSS listas para usar, aurora / vidrio / brillo, keyframes
tailwind-theme.css — fragmento @theme de Tailwind v4
./record_demo_template.py — grabador parametrizado de Playwright
./edit_demo.py / ./edit_demo.sh — título, subtítulos, zooms, tarjeta final, codificación
example_timeline.json — lista de tiempos que lee el editor
REFERENCE_CASE.md — ejemplo trabajado anónimo y las lecciones de tres cortes

Estilo visual (referencia rápida)

Tema de la aplicación (también en FRONTEND_STYLE.md y theme.css):

Rol	Hex
Tinta de página	`#05060A` / `#0A0C14` / `#11131F` / `#1A1D2E`
Texto del cuerpo	`#E5E7F0`
Cian (en alcance / en vivo)	`#22D3EE` / `#67E8F9`
Violeta (motor pesado o de pago)	`#A855F7` / `#A78BFA`
Fucsia (final de degradado)	`#F0ABFC`
Esmeralda (coincidencia / completo / totales)	`#10B981`
Rosa (amenaza / parada forzosa)	`#F43F5E`
Ámbar (brecha, suposición, no aprobado)	`#F59E0B`
Dorado (explosión de logro)	`#FBBF24`

Lavado de aurora, cuadrícula desvaneciente de 48px, tarjetas de vidrio, brillos codificados por color. Inter para la interfaz, JetBrains Mono para relojes y feeds, números tabulares. Carga las fuentes; nombrarlas en un tema no es suficiente (theme.css incluye la importación). El hero es font-black tracking-tight de unos 48–60px, con una palabra en un degradado de texto #67E8F9 → #A78BFA → #F0ABFC. Los kickers están en mayúsculas de 11–13px con un interletraje de 0.14–0.25em.

Tema de barra de subtítulos / tarjeta de título (la capa de edición, no la aplicación):

Rol	Hex
Fondo	`#08070C`
Regla / kicker dorado	`#E1A01D`
Titular	`#F3ECE3`
Subtítulo	`#9A958C`

El tipo de titular en el editor es una grotesca itálica pesada. ./edit_demo.py usará ./fonts, o APP_DEMO_FONT / APP_DEMO_FONT_ITALIC, o un tipo DejaVu / Liberation del sistema. Geist Italic 900 es un buen sustituto si lo tienes.

Movimiento

Easing compartido: cubic-bezier(0.16, 1, 0.3, 1). Los contadores marcan desde el valor anterior (1.1s por defecto, 1.6s en mosaicos KPI, 1.8s en proyecciones). Los pasos activos pulsan (1.4s) con un anillo en expansión (1.3s). La finalización es un check con resorte más una explosión de partículas. Un toast de logro se mantiene unos 1.7s. El CTA y el paso activo brillan (bucle de 1.6s).

Acompasa los eventos entrantes para que cada paso sea legible (unos 1.5s después de que termine un paso). Los tiempos y recuentos del servidor se mantienen reales; solo su aparición se retrasa. Después de que finalice la ejecución, espera unos 900ms, luego desplázate suavemente hacia un hero de resultados con escala.

Tono de copia

Escribe como un tráiler, luego pruébalo con dígitos.

Hero: una metáfora corta, una palabra en degradado. El subtítulo dice lo que el espectador verá desbloquear, y luego que llegará a un indicador de costo y confianza.
CTA en vivo: un verbo de ignición. CTA de repetición: un verbo de reproducción.
Cada paso tiene un título concreto y un logro de 2–3 palabras en Título Capitalizado, mostrado como toast al completarse y destacado con una estrella en la fila.
Las brechas son trabajo, no fallos. Las amenazas tienen un escudo con nombre. La salida no aprobada está etiquetada en la interfaz. Una línea de seguridad / solo lectura permanece en el encabezado.
Los costos son exactos (suficientes dígitos fraccionarios para que una cifra submínima no se convierta en $0.00) y etiquetados como medidos vs. estimados. Las suposiciones se nombran en el mosaico.
La comparación de costos o valor del flujo de trabajo completo, y sus advertencias, viven en el producto para que la cámara pueda desplazarse hasta ellos.

UX de demo

?replay=<id> (opcional ?speed=) inicia automáticamente una ejecución previamente medida con sus tiempos reales, y la interfaz dice que es una repetición.
?run=<id> (opcional ?backend=) reabre una ejecución finalizada para retomar el tablero sin volver a facturar.
Ruta en vivo: subir o conectar datos reales → confirmar un motor de pago si es necesario → encender → línea de tiempo acompasada + feed de solicitudes → tablero, proyecciones, panel de costos, advertencias.

Flujo de trabajo

Dale estilo al frontend para la cámara. Si aún no hay interfaz, créala. Aplica theme.css (y tailwind-theme.css si la aplicación usa Tailwind v4). Sigue la lista de verificación en FRONTEND_STYLE.md.
Bloquea los datos reales. Usa una ejecución en vivo o un accesorio de repetición fiel. Cada subtítulo posterior debe poder citar una cifra que aparezca en pantalla o en las métricas propias de la ejecución.
Graba con Playwright a 1920×900. Sin píldoras de subtítulos en la página — esas cubren la interfaz. Programa una toma continua (aterrizaje → flujo de trabajo → resultados) con pausas de 2–4s y un desplazamiento lento. Usa ./record_demo_template.py. Mantén la velocidad de fotogramas nativa de Playwright (normalmente 25 fps).
Edita con ./edit_demo.sh. El lienzo es 1920×1080: un panel de aplicación de 1920×900 sobre una barra reservada de 180px (#08070C / #E1A01D / #F3ECE3 / #9A958C). Tarjeta de título de unos 2s, cortes directos (no fundidos de 1s), zooms de ~0.4s a 1.3× solo en el panel de la aplicación (la barra permanece fija). Termina en la comparación de costos o valor dentro de la aplicación, luego una tarjeta de advertencias de ~3s. Apunta a 60–70s. Silencioso por defecto (una pista AAC silenciosa está bien para la compatibilidad con el reproductor).
Verifica los fotogramas. Confirma que la barra nunca cubre la interfaz, los zooms no recortan la barra, y cada cifra subtitulada está en pantalla o etiquetada como suposición.
Los tutoriales de proceso pertenecen a una presentación separada. Las tarjetas de arquitectura, cómo funciona y conclusiones no reemplazan la sesión en este video.

Tono de subtítulos

Kicker: unas pocas palabras en mayúsculas con interletraje amplio (SESIÓN EN VIVO, MISIÓN COMPLETADA, LA TRAMPA).
Titular: una o dos oraciones cortas. Punto, no puntos suspensivos.
Pon el hecho medido sorprendente primero: recuentos, tiempo, costo, lo que se capturó.
Señala lo que está en pantalla ahora, luego añade la conclusión. No narres un tutorial.
Cuando cortes a un panel de costos dentro de la aplicación, di que es el panel propio de la aplicación, no una diapositiva.

Modos de fallo

Error	Solución
Superposición de subtítulos HTML/CSS en la página	Barra reservada debajo de la aplicación, siempre
Collage de capturas de pantalla o diapositivas tipográficas de "proceso" como cuerpo	Graba la sesión; mueve las tarjetas de proceso a una presentación
Fundidos entre cada tiempo	Cortes directos; reserva el movimiento para zooms y la propia aplicación
Cifras inventadas o redondeadas sin etiqueta	Copia los dígitos de la ejecución; etiqueta las suposiciones
Zoom que amplía todo el fotograma 1080p y recorta la barra	Acerca solo el panel de 1920×900
Terminar en arquitectura o un gráfico de cómo funciona	Termina en la comparación de costos/valor del producto, luego advertencias
Generar una "demo" con un modelo de video	Solo Playwright + ffmpeg
Voz en off o música añadida "para hacerlo cinematográfico"	El predeterminado es mudo; la imagen y los subtítulos lo llevan
Interfaz plana, números que aparecen, sin panel de costos en la aplicación	Dale estilo a la aplicación primero (`FRONTEND_STYLE.md`); no intentes arreglarlo solo en la edición
Hero o CTA escritos como una página de configuración	Metáfora + palabra en degradado; verbo de ignición para en vivo, verbo de reproducción para repetición
Fuentes nombradas en CSS pero nunca cargadas	Añade la importación de Inter + JetBrains Mono desde `theme.css`
Conjunto de datos o CLI grabados como diapositivas porque "no hay aplicación"	Crea un frontend pequeño para el estilo primero, luego grábalo

Inicio rápido

Requiere ffmpeg y Python 3.

python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium

# 1. Dale estilo a la aplicación (theme.css / FRONTEND_STYLE.md) para que funcione bien en cámara.
# 2. Después de que la aplicación esté ejecutándose y actions() en el grabador se haya completado:
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4

Opcional: coloca Geist (u otra grotesca itálica pesada) en ./fonts, o configura APP_DEMO_FONT y APP_DEMO_FONT_ITALIC.

Propósito

Hacer un video dramático de demo, promoción o lanzamiento de una aplicación funcional a partir de una sesión real. Estiliza un frontend listo para cámara, grábalo con Playwright, y compone una barra de subtítulos reservada, zooms y tarjetas tipográficas de título y cierre con ffmpeg. Un pipeline, conjunto de datos, modelo de costos o CLI se convierte primero en ese frontend.

Entradas

Una aplicación en ejecución en la URL base del grabador (--base, predeterminado http://127.0.0.1:8765 en record_demo_template.py), o un frontend pequeño construido para la grabación.
Datos reales, o una repetición fiel de una ejecución previamente medida. Las cifras subtituladas provienen de la pantalla o de las métricas de la ejecución, o están etiquetadas como suposiciones.
actions() completada dentro de record_demo_template.py.
Un JSON de línea de tiempo con la forma de example_timeline.json.
ffmpeg, Python 3, playwright y pillow. Opcional: grotesca itálica en ./fonts, o APP_DEMO_FONT y APP_DEMO_FONT_ITALIC.
theme.css, tailwind-theme.css cuando la aplicación usa Tailwind v4, y la lista de verificación en FRONTEND_STYLE.md.

Salidas

Toma bruta de record_demo_template.py (.webm, o .mp4 con --transcode).
Archivo editado de edit_demo.sh: 1920×1080 H.264, generalmente 60–70s, AAC silencioso. Un panel de aplicación de 1920×900 se sitúa sobre una barra de subtítulos de 180px, con una tarjeta de título de ~2s, cortes directos, zooms de ~0.4s a 1.3× en el panel de la aplicación y una tarjeta de advertencias final de ~3s.

No objetivos

Modelos de generación de video, modelos de generación de imágenes y TTS.
Música de stock o voz a menos que el resumen lo solicite.
Superposiciones de subtítulos en la página, collages de capturas de pantalla y diapositivas de proceso con fundidos como cuerpo.
Cifras inventadas, o cifras redondeadas que no estén etiquetadas.
Usar una presentación de arquitectura o de cómo funciona en lugar de la sesión.

Comprobaciones

La lista de verificación previa a la grabación de FRONTEND_STYLE.md se cumple, incluyendo Inter y JetBrains Mono cargados y un fotograma legible de 1920×900.
La barra reservada nunca cubre la interfaz. Los zooms mueven solo el panel de 1920×900, por lo que la barra permanece a ancho completo y sin recortar.
Cada cifra subtitulada está en pantalla o en las métricas de la ejecución, o tanto el subtítulo como la tarjeta final la llaman suposición o proyección.
Los cortes son cortes directos, la duración es de aproximadamente 60–70s, y la pista está en silencio aparte del AAC silencioso que multiplexa el editor.
bash -n edit_demo.sh y python3 -m py_compile en edit_demo.py y record_demo_template.py ambos tienen éxito.

Modos de fallo y recuperación

Usa la tabla de Modos de fallo anterior. Recuperación:

Lo que ves	Qué hacer
Los subtítulos cubren botones o gráficos	Elimina la superposición en la página. Pon la línea en la línea de tiempo y vuelve a ejecutar `./edit_demo.sh`.
El cuerpo son imágenes fijas, un collage o fundidos	Graba la sesión con `./record_demo_template.py` y haz cortes directos entre tiempos.
Un zoom recorta la barra	Mantén el `zoom` en el tiempo. `edit_demo.py` escala solo el panel de la aplicación.
Un número de subtítulo no está en pantalla	Copia el dígito del tablero o de la métrica de la ejecución, o etiqueta la suposición en el mosaico y la tarjeta final.
Interfaz plana, números que aparecen, o sin panel de costos	Reestiliza desde `theme.css` y `FRONTEND_STYLE.md`, luego graba de nuevo.
El editor sale porque no puede encontrar una fuente	Añade un `.ttf` en `./fonts`, o configura `APP_DEMO_FONT` y `APP_DEMO_FONT_ITALIC`, luego vuelve a ejecutar `./edit_demo.sh`.
La fuente es un cuaderno, CLI u hoja de cálculo	Construye el frontend pequeño de `FRONTEND_STYLE.md` alrededor de los datos reales, luego grábalo.

Vel-Labs/app-demo-video

¿Qué es app-demo-video?

Preguntar en tu IA favorita

Documentación