html-video

# html-video **HTML devient vidéo — sur votre ordinateur.** html-video est un outil vidéo programmatique qui permet aux agents de codage (Open Design, Windsurf CLI, Trae CLI, Claude Code, Cursor, Codex, Gemini, Grok, Qwen, OpenCode, Copilot, Aider, Hermes, ou l'API Anthropic) de transformer HTML, CSS et données en véritables fichiers MP4. Décrivez une vidéo, collez un lien d'article ou un dépôt GitHub, et l'agent génère une vidéo animée multi-images, rendue localement avec des moteurs enfichables. Sous licence Apache-2.0, sans frais par rendu, sans verrouillage fournisseur. ## Fonctionnalités clés - **14 backends d'agents** : Détection automatique et prise en charge d'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 et API Messages Anthropic. - **21 modèles sélectionnés** : Modèles HTML animés à licence propre couvrant la visualisation de données (graphiques style NYT, grilles suisses/Vignelli), titres et effets visuels (glitch, typographie cinétique, curseur machine à écrire), héros et cinématiques (dégradés liquides, fuite de lumière, grain chaud), promotions produit (scènes multiples 15s/30s) et structures explicatives (arbres de décision). - **Rendu MP4 réel** : Chromium sans interface enregistre le HTML animé, ffmpeg (libx264) encode en MP4 localement — aucun rendu cloud, aucun frais par clip. - **Lien vers vidéo** : Récupère les articles web (y compris WeChat 公众号) ou les dépôts GitHub côté serveur, aplatit en Markdown et alimente le contenu réel dans la génération. - **Bande-son IA** : Musique de fond et narration optionnelles via MiniMax, mixées dans le MP4 à l'exportation (musique atténuée sous la voix, fondu entrée/sortie). - **Studio + CLI** : Un studio navigateur local (chat, galerie de modèles, images, bande-son, export) et une CLI scriptable `html-video`. - **Architecture de moteur enfichable** : Une interface d'adaptateur `render(input, ctx)` ; le remplacement des moteurs (par exemple, Remotion, Motion Canvas) ne remplace que l'étape de rendu, laissant le storyboard et la boucle d'agent intacts. - **Licence propre par conception** : Les modèles portent des licences originales, avec un `NOTICE.md` enregistrant les sources et SPDX ; aucune licence permissive peu claire n'est fournie. ## Comment ça marche 1. **Récupération de source** : Le studio tire l'URL ou le dépôt côté serveur, aplatit en Markdown. 2. **Boucle d'agent** : L'agent lit le matériel + le style de modèle, émet un graphe de contenu (storyboard) + un bloc HTML par image. 3. **Graphe de contenu** : IR multi-images avec nœuds (entité/données/texte) et arêtes (séquence/transition). 4. **HTML par image** : Chaque nœud devient une image HTML animée autonome sur disque. 5. **Rendu** : Chaque image → webm (via Chromium sans interface), puis ffmpeg encode en MP4 (libx264) et concatène. 6. **Bande-son** : Musique MiniMax optionnelle + narration mixées via ffmpeg. Les vidéos à image unique empruntent un chemin rapide en sautant le graphe de contenu. ## Pour commencer Nécessite Node.js 20+ et ffmpeg. Installez Chromium de Playwright s'il n'est pas présent. Compilez avec `pnpm -r build`. Utilitaires CLI : - `node packages/cli/dist/bin.js doctor` — détecte les agents et moteurs installés - `node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3` Dans le studio : choisissez un modèle (ou décrivez une vidéo / collez un lien), discutez avec votre agent, modifiez le texte par image, ajoutez une bande-son et exportez en MP4. ## Structure du projet - `runtime/` — Runtime d'agent (détection/lancement/stream) pour les 14 backends - `cli/` — Commande `html-video`, serveur HTTP du studio, récupération de source - `project-studio/` — UI du studio navigateur (chat, galerie de modèles, images, bande-son, export) - `templates/` — 21 modèles vidéo sélectionnés, à licence propre ## Projets connexes - [Open Design](https://github.com/nexu-io/open-design) — Projet frère, méta-couche d'agent de conception - [HTML Anything](https://github.com/nexu-io/html-anything) — Projet frère pour livrables HTML statiques ## Licence Apache-2.0 — sans frais par rendu, sans plafond de sièges, sans accords de contributeurs. Un projet officiel de l'équipe Open Design (nexu-io).