HyperFrames défie Premiere Pro avec une IA sans interface graphique

HyperFrames : une nouvelle approche de la création vidéo

HyperFrames se distingue par sa capacité à convertir des langages de programmation web tels que HTML, CSS et JavaScript en vidéos MP4, tout cela grâce à l'utilisation d'agents IA comme Claude Code, Gemini CLI et Codex. Contrairement aux logiciels de montage traditionnels comme Premiere Pro ou After Effects, HyperFrames ne repose pas sur une interface graphique. L'utilisateur décrit simplement ses besoins à travers un prompt textuel, et l'agent IA génère le code nécessaire. Ce code est ensuite exécuté dans une version invisible de Chrome, où chaque image est capturée pour être assemblée en vidéo grâce à la bibliothèque FFmpeg.

Un catalogue de composants varié et accessible

HyperFrames propose un catalogue en ligne riche de plus de 50 composants prêts à l'emploi. Parmi ceux-ci, on trouve des effets de transition, des graphiques de données, des pop-ups de réseaux sociaux comme X ou Reddit, et des compteurs d'abonnés. La fonctionnalité HTML in Canvas permet de créer des effets visuels 3D sophistiqués, tels que des objets en verre liquide, des objets 3D comme un iPhone en rotation, ou encore des effets de bris de verre. Par rapport à des alternatives comme Remotion, HyperFrames se démarque en utilisant des technologies web classiques, souvent mieux maîtrisées par les modèles d'IA que l'écosystème React de Remotion. De plus, HyperFrames est actuellement gratuit, contrairement à Remotion qui propose des licences commerciales.

Installation et utilisation simplifiées

L'installation d'HyperFrames est simplifiée à l'extrême, nécessitant seulement une ligne de commande dans le terminal :

npx skills add heygen-com/hyperframes

Cette commande installe automatiquement les compétences nécessaires pour les agents IA tels que Claude Code, Cursor, Gemini CLI, Codex, et GitHub Copilot CLI. Dans Claude Code, par exemple, ces compétences se manifestent sous forme de commandes slash : /hyperframes pour la composition et /hyperframes-media pour le prétraitement des ressources médias comme le Text-to-Speech, la transcription, et la suppression de fond. Bien que tout se passe dans le code, HyperFrames offre une interface locale de prévisualisation via localhost, qui permet de visualiser et de gérer les composants, de prévisualiser la vidéo, de prendre des captures d'écran, et de lancer l'export final.

Évaluation de l'efficacité d'HyperFrames

Nous avons testé HyperFrames à travers plusieurs scénarios d'utilisation pour évaluer ses performances et sa flexibilité.

Création d'un "short" animé avec voix off IA

Dans un premier test, nous avons généré une vidéo courte au format vertical (9:16), intégrant du text-to-speech (TTS), des emojis, et des éléments dynamiques sur le thème "L'IA ne va pas remplacer les développeurs". Le résultat a été de haute qualité dès le premier essai, bien que le contenu généré par Gemini CLI ait été quelque peu simpliste. Le prompt initial s'est avéré suffisant, sans nécessiter de modifications. Une barre de progression a été automatiquement intégrée et le texte s'est parfaitement synchronisé avec la voix. Le TTS, bien qu'inférieur à ElevenLabs en termes de naturel, reste néanmoins acceptable.

Gestion automatique des sous-titres

HyperFrames gère les sous-titres de manière autonome via son module /hyperframes-media. Il transcrit la voix off, synchronise le texte avec l'audio, et l'incruste dans la vidéo, le tout en local, sans recours à une API externe. Le résultat de notre test a été satisfaisant dès le premier essai.

Création d'une vidéo de reporting

Nous avons demandé la création d'une vidéo de 30 secondes présentant des slides simples avec des chiffres, sans graphiques. Ce test a permis de comparer le comportement de différents agents IA face à la même demande. Claude (via CLI) et Antigravity ont produit des résultats conformes dès la première tentative, sans nécessiter de retouches. Cependant, il est important de noter le coût : la génération de code peut rapidement consommer un nombre important de tokens. Pour Claude, la génération de la vidéo a coûté environ 0,75 dollar. Gemini (via CLI) s'est montré plus capricieux, nécessitant plusieurs tentatives en raison de fonds blancs apparaissant sans être demandés.

Extraction de charte graphique depuis un site web

Une des fonctionnalités les plus intéressantes d'HyperFrames est la possibilité de fournir l'URL d'un site web pour que l'agent en extraie la charte graphique et génère une vidéo promotionnelle. Sur le site de Stripe, l'exercice a été difficile. HyperFrames a bien récupéré des images et tenté de supprimer les fonds, mais les pages de Stripe étant majoritairement blanches, le résultat manquait de lisibilité. Malgré cela, l'outil a réussi à intégrer des mock-ups de téléphones et de Mac, avec un effet final sur le logo Stripe propre et professionnel.

Production d'une vidéo au format TikTok

Ce test visait à produire une vidéo verticale d'information comparant Netflix et Blockbuster. Le rendu est très qualitatif, avec des effets dynamiques propres à ce format, bien présents sans être surchargés. Notamment, les images ont été générées par l'IA pendant le processus via Antigravity, une fonctionnalité qui n'est pas forcément disponible de la même manière avec les agents en CLI. Le résultat est directement publiable sur les réseaux sociaux, ne nécessitant qu'une voix off ou une musique en fond.

Production en série de vidéos

L'un des cas d'usage les plus intéressants d'HyperFrames est la génération de vidéos en série à partir d'un modèle unique. Pour ce test, nous avons d'abord itéré plusieurs fois sur le rendu d'une seule vidéo, en affinant la mise en page, les couleurs, et les animations, jusqu'à obtenir un gabarit satisfaisant. Une fois ce modèle validé, nous avons simplement fourni à l'agent un fichier JSON contenant les informations variables pour chaque déclinaison : nom de la ville, adresse, visuels spécifiques. Pour les images, l'agent a interrogé l'API Unsplash pour récupérer automatiquement une photo correspondant à chaque ville. Résultat : dix vidéos générées en quelques minutes, sans retouche manuelle entre chaque, le même format étant dupliqué à la chaîne.

Les défis et limitations d'HyperFrames

En pratique, l'utilisation d'HyperFrames nécessite une supervision constante. Le problème le plus fréquent concerne la prévisualisation en local : écrans noirs, éléments qui se superposent, ou textes qui débordent du cadre. Ces erreurs peuvent être corrigées en demandant à l'IA de régénérer le code, mais chaque correction a un coût en tokens, et ce coût s'accumule rapidement. Il est conseillé de compacter régulièrement l'historique de conversation (/compact) pour préserver son budget. Un autre point de friction est que HyperFrames en CLI est "aveugle". Contrairement à Antigravity, qui utilise Gemini Vision pour analyser ce qui s'affiche dans le navigateur et s'auto-corriger, HyperFrames ne voit pas le rendu. Une fois qu'un modèle de composition a été validé, les erreurs tendent à disparaître, mais il faut d'abord l'atteindre.

Conseils pour optimiser l'utilisation d'HyperFrames

Pour gagner du temps et des tokens, il est préférable de travailler par segments de 20 à 30 secondes plutôt que de demander une vidéo entière d'un seul coup. Il est également recommandé d'activer le "mode Plan" dans votre IA afin que l'IA explique ce qu'elle prévoit de faire avant de coder. Enfin, générer d'abord un script détaillé, seconde par seconde, avec une IA est un excellent moyen de cadrer précisément la production avant de la lancer.

HyperFrames propose une approche innovante de la création vidéo automatisée via code, avec des atouts évidents pour les formats courts et la visualisation de données. Bien que l'outil ne révolutionne pas encore la production vidéo, sa gratuité et sa flexibilité en font une option à surveiller, notamment pour les usages en volume ou expérimentaux.