Comparatif · IA & agents

HyperFrames ou Remotion : HTML ou React

Deux rendus par le code, pas un classement. HyperFrames part du HTML. Remotion part de React. Le choix dépend du flux déjà en place.

Illustration Vibarche pour l’article « HyperFrames ou Remotion : HTML ou React ».

HyperFrames et Remotion fabriquent une vidéo à partir de code, et les deux se font piloter par un agent. Ce n'est pas un duel. L'un décrit une page HTML que le moteur filme. L'autre décrit une composition React. Le mauvais choix, c'est celui qui vous oblige à réécrire un projet déjà avancé.

Les faits ci-dessous viennent des pages lues le 1er novembre 2026. Aucun des deux projets n'a été chronométré ici sur la même machine.

La différence qui compte

HyperFrames, dépôt heygen-com/hyperframes, se décrit ainsi : écrire du HTML, rendre une vidéo, prévu pour les agents. Licence Apache-2.0. Le démarrage manuel demandé dans le README est npx hyperframes init, puis preview, puis render. Node.js 22 ou plus, et FFmpeg. Le même README indique des skills pour Claude Code, Codex, Cursor et d'autres agents, et une commande npx hyperframes skills update.

Remotion, documentation de création de projet, part de npx create-video@latest. La doc cite Node 16 au minimum, ou Bun 1.0.3, et signale des contraintes Linux (libc 2.35, paquets supplémentaires, Alpine et nixOS non pris en charge). Elle propose aussi d'installer les Agent Skills du projet pour qu'un agent de code écrive la vidéo.

Si votre équipe écrit déjà des composants React, Remotion reste dans cet univers. Si vous préférez une page HTML, du CSS et des blocs prêts à poser, HyperFrames est plus proche de ce geste. Le guide de montage rappelle ce qu'aucun des deux ne doit décider à votre place.

Matrice, pas un score

QuestionHyperFramesRemotion
Unité de travailHTML, CSS, médias, animations cherchablesComposition React
AgentSkills et plugin, d'après le README du 1er novembre 2026Skills, d'après la doc du même jour
Prérequis citésNode.js 22+, FFmpegNode 16+ ou Bun 1.0.3, contraintes Linux citées
Licence lueApache-2.0À relire sur le dépôt avant un usage commercial sensible
PortageLe skill remotion-to-hyperframes est annoncé pour reprendre du code Remotion, image par imageRester dans Remotion si la composition existe déjà

Une ligne de ce tableau n'est pas une note. Si la licence Remotion doit être citée dans un contrat, ouvrez le fichier LICENSE du dépôt le jour de la décision. Je ne la recopie pas de mémoire.

Pour qui

Prenez HyperFrames si la vidéo est un habillage : intro produit, captions, graphique, visite d'une page. Le README liste des lancements produit, des walkthrough de pull request, des graphiques et des vidéos sociales. HeyGen indique utiliser HyperFrames en production. Ce n'est pas une preuve que le rendu conviendra à votre sujet.

Prenez Remotion si la vidéo est déjà un arbre de composants, ou si l'équipe refuse d'apprendre un second modèle mental à côté de React. La doc oriente les débutants vers un template Hello World, puis vers Remotion Studio avec npm run dev.

Ne prenez ni l'un ni l'autre si le besoin est un montage de rushes tournés, avec dérushage et étalonnage. Un logiciel de timeline reste plus direct. L'agent peut aider à la transcription et aux sous-titres. Il n'a pas à reconstruire un documentaire en HTML.

Motion design : ce que le code change

Dans les deux cas, le mouvement est déclaré. Vous pouvez revenir à une frame, la relire, la modifier. C'est l'intérêt par rapport à un export « boîte noire » qu'on ne peut pas reprendre. C'est aussi la limite : quelqu'un doit savoir lire le fichier quand l'agent a posé une animation illisible.

Avant d'empiler des effets, fixez la durée, le format et le texte exact à l'écran. Un agent qui invente le slogan en même temps que l'animation mélange deux erreurs. Le texte validé d'un côté. Le mouvement de l'autre.

Liens officiels, pas encore partenaires

HeyGen édite HyperFrames et vend aussi des avatars. ElevenLabs couvre la voix. Gamma couvre les supports de présentation, pas le rendu MP4. Ces trois noms, et d'autres, sont listés avec leur page officielle dans outils à présenter avant affiliation. Le jour de l'inscription, seul le lien change.

Sources

Documentation Remotion, création de projet, README HyperFrames, lus le 1er novembre 2026. Les prérequis et les commandes peuvent bouger : relisez-les avant d'écrire une procédure interne.