html-video

# html-video **HTML se convierte en video — en tu portátil.** html-video es una herramienta de video programático que permite a los agentes de código (Open Design, Windsurf CLI, Trae CLI, Claude Code, Cursor, Codex, Gemini, Grok, Qwen, OpenCode, Copilot, Aider, Hermes o la API de Anthropic) convertir HTML, CSS y datos en archivos MP4 reales. Describe un video, pega un enlace de artículo o un repositorio de GitHub, y el agente genera un video animado de múltiples fotogramas, renderizado localmente con motores intercambiables. Licencia Apache-2.0, sin tarifas por render, sin dependencia del proveedor. ## Características Clave - **14 Backends de Agentes**: Detecta automáticamente y soporta Open Design (Vela), Windsurf CLI, Trae CLI, Claude Code, Cursor Agent, Codex CLI, Gemini CLI, Grok Build, Qwen Code, OpenCode, GitHub Copilot CLI, Aider, Hermes y Anthropic Messages API. - **21 Plantillas Curadas**: Plantillas HTML animadas limpias de licencias que cubren visualización de datos (gráficos estilo NYT, cuadrículas suizas/Vignelli), títulos y efectos visuales (glitch, tipografía cinética, cursor de máquina de escribir), héroes y cinemáticas (gradientes líquidos, fugas de luz, grano cálido), promociones de productos (multi-escena de 15s/30s) y esquemas explicativos (árboles de decisión). - **Renderizado Real de MP4**: Chromium headless graba HTML animado, ffmpeg (libx264) codifica a MP4 localmente — sin renderizado en la nube, sin tarifa por clip. - **Enlace a Video**: Obtiene artículos web (incluidos WeChat 公众号) o repositorios de GitHub desde el servidor, aplana a Markdown e introduce contenido real en el prompt de generación. - **Banda Sonora con IA**: Música de fondo y narración opcionales vía MiniMax, mezcladas en el MP4 al exportar (música atenuada bajo voz, fundido de entrada/salida). - **Estudio + CLI**: Un estudio local en navegador (chat, galería de plantillas, fotogramas, banda sonora, exportación) y una CLI `html-video` guionizable. - **Arquitectura de Motor Intercambiable**: Una interfaz adaptadora `render(input, ctx)`; cambiar motores (por ejemplo, Remotion, Motion Canvas) reemplaza solo el paso de renderizado, dejando intacto el storyboard y el bucle del agente. - **Limpieza de Licencias por Construcción**: Las plantillas llevan licencias originales, con un `NOTICE.md` que registra fuentes y SPDX; no se incluyen licencias permisivas poco claras. ## Cómo Funciona 1. **Obtención de Fuente**: El Studio extrae URL o repositorio desde el servidor, aplana a Markdown. 2. **Bucle del Agente**: El agente lee material + estilo de plantilla, emite un grafo de contenido (storyboard) + un bloque HTML por fotograma. 3. **Grafo de Contenido**: Representación intermedia (IR) de múltiples fotogramas con nodos (entidad/datos/texto) y aristas (secuencia/transición). 4. **HTML por Fotograma**: Cada nodo se convierte en un fotograma HTML animado autónomo en disco. 5. **Renderizado**: Cada fotograma → webm (vía Chromium headless), luego ffmpeg codifica a MP4 (libx264) y concatena. 6. **Banda Sonora**: Música + narración opcionales de MiniMax mezcladas vía ffmpeg. Los videos de un solo fotograma toman una ruta rápida omitiendo el grafo de contenido. ## Primeros Pasos Requiere Node.js 20+ y ffmpeg. Instala Chromium de Playwright si no está presente. Compila con `pnpm -r build`. Utilidades CLI: - `node packages/cli/dist/bin.js doctor` — detecta agentes + motores instalados - `node packages/cli/dist/bin.js search-templates --intent "carrera de estrellas de github" --top 3` En el estudio: elige una plantilla (o describe un video / pega un enlace), chatea con tu agente, edita texto por fotograma, añade una banda sonora y exporta MP4. ## Estructura del Proyecto - `runtime/` — Runtime del agente (detección/generación/streaming) para los 14 backends - `cli/` — Comando `html-video`, servidor HTTP del estudio, obtención de fuentes - `project-studio/` — UI del estudio en navegador (chat, galería de plantillas, fotogramas, banda sonora, exportación) - `templates/` — 21 plantillas de video curadas y limpias de licencias ## Proyectos Relacionados - [Open Design](https://github.com/nexu-io/open-design) — Proyecto hermano, capa meta de diseño-agente - [HTML Anything](https://github.com/nexu-io/html-anything) — Proyecto hermano para entregables HTML estáticos ## Licencia Apache-2.0 — sin tarifas por render, sin límites de asientos, sin acuerdos de contribución. Un proyecto oficial del equipo de Open Design (nexu-io).