HYPERFRAMES : écrivez du HTML et rendez-le en vidéo
https://github.com/heygen-com/hyperframes
📌 HYPERFRAMES est un framework open source qui transforme du HTML, du CSS, des médias et des animations pilotables en vidéos MP4 déterministes, avec une boucle de travail conçue pour les agents de code.
Le point de départ est volontairement familier : un fichier index.html. Vous y composez une scène avec des éléments HTML, des attributs de timing et des pistes pour la vidéo, le texte ou l’audio. HyperFrames ouvre ensuite cette composition dans Chrome headless, cherche chaque frame et encode le résultat avec FFmpeg. Le navigateur devient donc l’espace de composition, mais la sortie reste un vrai fichier vidéo.
Le workflow tient en quelques commandes : npx hyperframes init my-video, puis npx hyperframes preview pour voir la composition avec rechargement direct, et enfin npx hyperframes render pour produire le MP4. Il faut Node.js 22 ou plus récent et FFmpeg. Rien n’oblige à monter un projet React ou à ajouter un bundler avant de voir une première image. C’est une différence importante avec les outils qui transforment immédiatement une animation simple en projet d’infrastructure.
Ce que je retiens surtout :
- 🧱 Des compositions HTML sans étape de build obligatoire.
- ⏱️ Des animations seekable et frame-accurate grâce aux adapters.
- 🎞️ Un rendu local avec Chrome headless, FFmpeg et mixage audio.
- 🧰 Un catalogue de blocs pour transitions, graphiques, cartes et overlays.
- 🤖 Dix-neuf skills installables pour guider les agents dans la production vidéo.
La partie agentique est plus intéressante qu’un simple slogan. Le dépôt contient un skill routeur /hyperframes, qui lit une demande comme « créez une vidéo » et choisit ensuite le workflow adapté : lancement de produit, explication, captions, motion graphics, slideshow ou autre. Les skills apprennent à l’agent à planifier, écrire du HTML valide, rendre les animations compatibles avec la recherche par frame, lancer les contrôles et vérifier le résultat. L’agent ne reçoit pas seulement une liste d’API : il reçoit une méthode de production.
HyperFrames accepte plusieurs moteurs d’animation : GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI ou un adapter personnalisé. Le projet fournit aussi frame.md, une manière de traduire un système de design web en règles pensées pour la caméra. Les couleurs, les tokens et la typographie restent reconnaissables, mais la composition est réécrite pour un cadre, un rythme et une lecture vidéo plutôt que pour une page avec du chrome autour.
Je trouve le choix du HTML très pertinent pour les agents. Ils savent déjà écrire une page, positionner des éléments et manipuler du CSS. HyperFrames conserve cette accessibilité tout en ajoutant ce qui manque au web pour devenir une source vidéo fiable : une horloge contrôlable, des durées explicites et un rendu reproductible. La même entrée doit produire les mêmes frames, ce qui rend possible le test de régression et le rendu automatisé en CI.
La réserve est celle de tout outil qui rapproche le navigateur et la vidéo : une animation agréable à l’écran n’est pas automatiquement sûre au rendu frame par frame. Il faut respecter le contrat HyperFrames, éviter les dépendances au temps réel et vérifier les médias. Mais cette contrainte est clairement exposée. Pour produire des démos produit, des vidéos sociales, des visualisations ou des walkthroughs de PR sans abandonner les réflexes du front-end, HYPERFRAMES propose une base étonnamment directe.
Sources :
Sources :
