vvedantb/eva

Video de producto eva

Crea un video promocional de alta calidad de la aplicación eva (al estilo de Linear/Notion) usando el proyecto Remotion existente en video/. El metraje proviene de la aplicación real, capturada con agent-browser.

¿Skill equivocado? Este es para la edición pulida de múltiples escenas (Remotion, música, subtítulos). Para una función única, prefiere los hermanos más ligeros: eva-feature-screenshot (una captura de pantalla + tweet) o eva-feature-demo (una grabación en bruto de agent-browser + tweet). El texto del tweet para cualquiera de los tres proviene de eva-tweet.

El proyecto canónico ya existe: reutilízalo, no empieces de cero.

• Proyecto: video/ · composición principal: EvaHero (video/src/EvaHero.tsx)
• Salida de renderizado: video/out/eva-demo.mp4
• Componentes reutilizables en video/src/components/: Backdrop, AppWindow, EvaMark, HeroCaption (+ Accent), Cursor, Spotlight, StatCounter, SnapIn, tokens.
• Scripts auxiliares en video/scripts/: stills.mjs, gen-music.mjs, check-audio.mjs.

Para hacer un video NUEVO: vuelve a capturar las pantallas para la nueva historia, edita la lista de escenas / subtítulos / duraciones en EvaHero.tsx, regenera la música para que coincida con los tiempos de corte, renderiza y haz control de calidad.

Valores predeterminados no negociables (aprendidos a la fuerza — cámbialos solo con una razón)

Cada uno de estos fue primero un error. Mantenlos a menos que el usuario los anule.

1. 1280×720, 30fps. No 1080p. La interfaz de eva es una aplicación de escritorio densa; a 1080p se lee "demasiado zoom / demasiado grande" en un teléfono. 720p es el punto óptimo para móviles en Twitter/X.

2. Captura en el diseño nativo del fotograma, muéstralo a pantalla completa. Establece el viewport del navegador en 1280×720 al capturar, luego muestra la captura de pantalla a pantalla completa en 1:1 (llenando todo el fotograma). La palanca de calidad más importante:

   • Capturar a 2560×1440 y reducir a 720p reduce el tamaño del texto de la interfaz a la mitad → "alejado" e ilegible en dispositivos móviles.
   • Recortar/ampliar la cámara dentro de una región muestra fragmentos incómodos de la interfaz.
   • Un diseño de 1280 de ancho mostrado 1:1 = tamaños de elementos nativos = legible + "ampliado" + nítido.

   Cero zoom significa cero. PanScene from/to se mantienen en { scale: 1.0, fx: 0.5, fy: 0.5 } para cada escena de captura de pantalla. Incluso un "empuje sutil" de 1.02–1.06 recorta el marco que el espectador necesita: las etiquetas de la barra lateral, el botón principal en la esquina superior derecha, el pie de página de estadísticas. También pasa <SnapIn from={0.97}> alrededor de las capturas de pantalla: el valor predeterminado de 1.06 se desplaza hacia adentro y recorta los fotogramas de apertura de cada corte. El movimiento proviene de los cortes duros y los chasquidos de los subtítulos, no de los movimientos de cámara.

3. Metraje real, estados finalizados. Conduce la aplicación real con agent-browser. Graba trabajo ya completado (tareas fusionadas, diffs, PRs) — NO esperes a las ejecuciones de agentes en vivo (los sandboxes están detenidos; las ejecuciones en vivo son lentas e inestables). Prepara entradas limpias (por ejemplo, un título de tarea ordenado en el modal de Nueva Tarea). Consulta references/capture-workflow.md.

   Nunca envíes — solo escribe. Llena el campo de entrada, abre el selector, captura. Sin Enter en un compositor, sin flecha de envío, Crear, Guardar, Ejecutar o Iniciar, y nunca inicies una sesión real o una ejecución de agente, ni siquiera para el metraje de demostración. El envío muta el espacio de trabajo real del usuario y consume recursos reales; el estado preparado es todo lo que necesita la toma. Enter está permitido solo donde confirma el campo en sí mismo y nada más (aceptando una mención @ de un selector abierto); de lo contrario, haz clic en la fila del selector.

4. Cortes duros, rápidos y sincronizados con el ritmo. ~20s en total. Corta al ritmo (usa <Series>, no fundidos largos) y haz aparecer los subtítulos rápidamente. Haz aparecer las escenas con SnapIn — desnudo sobre tarjetas de título/cierre, from={0.97} sobre capturas de pantalla (ver valor predeterminado 2). Aburrido = demasiado largo + demasiados fundidos lentos.

5. Música sincronizada con cada corte. La preferencia establecida del usuario es lo-fi, la variante "clásica", sin palmada — genérala con gen-lofi-variants.mjs, que marca cada corte con un crescendo de acordes cálidos en su lugar. Toma --duration, --cuts, --only, --prefix, por lo que un video nuevo no necesita ediciones en el script:

   node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \
     --only=classic --prefix=platform      # → public/audio/platform-music-lofi-classic.wav
   

   --cuts debe coincidir con los límites de escena en la composición. gen-music.mjs es la cama de palmada más antigua — úsala solo si el usuario la solicita. Consulta references/remotion-build.md → Música.

6. Coincide con el tema de eva. Negro casi puro #050606, acento índigo #818cf8, gradiente de marca morado #8B3FB8 → azul #3B7DD8, fuentes Inter + JetBrains Mono. Todo en video/src/components/tokens.ts. Nunca inventes colores de marca.

7. Sé honesto + protege la confidencialidad. Usa el repositorio PROPIO del usuario (vvedantb/eva), nunca repositorios de clientes (Evalucom/CarePulse). No muestres la página de inicio "Codebases" (enumera repositorios de clientes) y verifica las listas de documentos/tareas en busca de elementos con nombre de cliente antes de capturar — prepara un documento de demostración limpio si la lista está sucia. Nunca plantees preocupaciones sobre datos personales relacionados con nombres o correos electrónicos en pantalla — Configuración → Experimental tiene un interruptor de desenfoque de PID que desenfoca cada elemento [data-pii], por lo que esto se maneja en el producto. Sí marca los paneles de error que filtran nombres de variables de entorno o IDs de proyecto. Los subtítulos describen con veracidad — nunca impliques una función que la pantalla no muestre. Si la única captura disponible es un sandbox detenido o un estado vacío, reformula el subtítulo para que coincida con la pantalla en lugar de adornarlo.

Flujo de trabajo

Trabaja en este orden; lee el archivo de referencia de cada paso antes de realizarlo.

1. Planifica la historia. Flujo de héroe predeterminado (8 escenas, ~20s): título → describe una tarea → Eva escribe código → revisa y envía PR → tablero → proyectos → prueba (estadísticas de conteo) → cierre. Elige primero las escenas y los subtítulos de una línea.

2. Captura el metraje → lee references/capture-workflow.md. Inicia la aplicación (pnpm dev), inicia sesión como el usuario agente, establece el viewport en 1280×720, captura cada pantalla en video/public/captures/.

3. Componer / editar → lee references/remotion-build.md. Edita EvaHero.tsx: lista de escenas, duraciones (múltiplos del ritmo), subtítulos, la ruta del cursor para la escena de entrada. Reutiliza los componentes existentes.

4. Ponle música → lee references/remotion-build.md → Música. Ejecuta gen-lofi-variants.mjs con --cuts que coincidan con los límites de escena (valor predeterminado 5 arriba), apunta el <Audio> de la composición al archivo generado, confirma MUSIC = true.

5. Renderiza + Control de calidad. No puedes previsualizar el mp4 directamente (sin ffmpeg del sistema, y no puedes ver video) — así que haz control de calidad con fotogramas fijos, uno por escena, tomados a la mitad de la escena:

   cd video
   node scripts/stills.mjs "40,110,200,290,380,470,560" EvaPlatform   # 2nd arg = composition id
   

   El id de composición por defecto es EvaHero — pásalo explícitamente o harás control de calidad del video equivocado. Lee los PNGs en video/out/ y verifica cada borde del fotograma: ¿está completo el botón principal de la esquina superior derecha?, ¿están completas las etiquetas de la barra lateral?, ¿se superpone el subtítulo con el texto de la interfaz en vivo? Luego renderiza y verifica:

   npx remotion render EvaPlatform out/eva-platform.mp4 --codec=h264 --image-format=png
   node scripts/check-audio.mjs out/eva-platform.mp4   # duración, 1280×720, pista de audio presente
   

   --image-format=png mantiene el texto de la interfaz nítido. Itera en los fotogramas fijos hasta que esté bien, luego renderiza.

Referencia rápida

Necesidad	Comando (ejecutar desde video/)
Vista previa en vivo	npm run dev (Remotion Studio)
Capturar una pantalla	bash scripts/shot.sh /vvedantb/eva/web/sessions sessions-list 4000
Renderizar una composición	npx remotion render <Id> out/<nombre>.mp4 --codec=h264 --image-format=png
Control de calidad de fotogramas específicos	node scripts/stills.mjs "40,110,200" <IdComposición>
Regenerar música	node scripts/gen-lofi-variants.mjs --cuts=… --only=classic --prefix=<nombre>
Verificar archivo de salida	node scripts/check-audio.mjs out/<nombre>.mp4

Composiciones existentes

EvaHero (flujo héroe) · SessionsDemo (sesiones en la nube) · EvaPlatform (las cinco superficies en un solo lugar: sesiones → documentos → área de pruebas → tareas kanban → revisiones de PR) · QuickTasksDemo (heredado). Registra cualquier nueva en video/src/Root.tsx a 1280×720 / 30fps.

Errores que costaron tiempo antes

• La URL de inicio de sesión es /?agent=true (booleano), no /?agent — la ruta valida agent como booleano de zod y /?agent lanza "Se esperaba booleano, se recibió string". Si la devolución de llamada se queda colgada en "Iniciando sesión…" con "Ya has iniciado sesión", navega directamente a la página de destino.
• Las superposiciones de desarrollo aparecen en la captura de pantalla. react-scan renderiza una barra de herramientas de FPS en una raíz oculta en #react-scan-root, y agentation en [data-agentation-root]. Una hoja de estilo por sí sola no elimina react-scan — su host lleva estilos en línea, por lo que también debes establecer display:none !important en línea en el host. scripts/shot.sh hace ambas cosas; úsalo en lugar de crear una cadena de captura manual.
• Encadena las llamadas de agent-browser en un solo comando Bash con timeout, y pon en segundo plano cualquier cosa larga. Una cadena ingenua de abrir → esperar → capturar supera el tiempo de espera de la herramienta. Las referencias de snapshot -i quedan obsoletas en cuanto se expande la barra de herramientas de desarrollo — vuelve a tomar la instantánea después de ocultar superposiciones, antes de hacer clic.
• Fija todos los paquetes de @remotion/* a la misma versión exacta o el empaquetador dará error.
• Claude no puede probar la música. La base hace exactamente lo que se le pide (un crescendo en cada corte) pero dile al usuario que escuche y cambie por una pista con licencia si lo desea — establece MUSIC=false para silenciar.
• Los sandboxes en capturas de sesiones antiguas están detenidos, por lo que cada pantalla de sesión muestra "Inicia el sandbox para…". No le pongas subtítulos como si estuviera en vivo. Nada en captures/sessions/ muestra un sandbox en ejecución.
• Los subtítulos llevan el mensaje — la mayoría de las reproducciones de Twitter están silenciadas, por lo que cada escena necesita un subtítulo.

Instrucciones detalladas: references/capture-workflow.md (metraje) y references/remotion-build.md (composición, tema, música, renderizado, control de calidad).