HyperFrames vs Remotion : 8 commandes vidéo, 32 exécutions de Claude Code

HyperFrames est le framework open source de HeyGen qui transforme du HTML en vidéo, conçu pour les agents IA. Rendu public en mars 2026, il comptait au 12 novembre 83 246 étoiles GitHub, contre 72 708 pour Remotion (HyperFrames sur GitHub, Remotion sur GitHub). Les deux font le même travail : ouvrir une page dans un navigateur headless, capturer chaque image, encoder une vidéo. Si vous comptez confier l’un des deux à un agent IA, lequel produit les meilleures vidéos ?

Le comparatif publié par HeyGen faisait passer une seule vidéo de lancement par chacun des deux, une seule fois (HyperFrames vs Remotion). Nous voulions comprendre d’où viennent réellement les écarts. Nous avons donc confié à Claude Code huit commandes vidéo différentes sur chaque framework, parmi les formats que l’on produit le plus, puis demandé une modification réaliste sur chacune : 32 exécutions sur Claude Opus 5.5. Chaque vidéo a été vérifiée image par image et évaluée à l’aveugle, dans les deux ordres.

Transparence : iArt repose sur Remotion, nous avons donc un intérêt dans l’affaire. Nous publions tous les prompts pour que vous puissiez refaire le test.

Notre protocole

• Agent : Claude Code 2.1.322 avec Claude Opus 5.5, le modèle utilisé par HeyGen pour son propre comparatif. Aucune instruction en dehors de chaque prompt.
• Remotion 4.0.542 : un projet vierge créé avec npx create-video --blank --skills, qui installe les skills d’agent officiels de Remotion.
• HyperFrames 0.9.33 : un dossier vide avec les skills officiels de HeyGen, installés via npx skills add heygen-com/hyperframes.
• Huit commandes choisies parmi ce que l’on réalise le plus souvent en motion design par IA : typographie cinétique, révélation de logo à partir d’un fichier SVG, graphique de données, démo d’interface produit, explication d’un mécanisme, lower third transparent pour OBS, carte d’itinéraire et vidéo de conversation par SMS. Chaque prompt se terminait par « Render the final MP4 to out.mp4 in this folder. Don't ask me questions; make the choices yourself. »
• Une demande de suivi par commande, dans la même session : à chaque fois une modification réaliste différente, avec la consigne de conserver le premier fichier :
  • Typographie cinétique : accent en #2B5BFF, 2 s plus courte
  • Révélation de logo à partir d’un SVG : format vertical 1080×1920
  • Graphique en barres animé : deux valeurs modifiées
  • Démo d’interface produit : mode sombre, nouveau texte de tâche
  • Le fonctionnement d’une pompe à chaleur : ajout d’une scène finale
  • Lower third transparent (OBS) : nouveau nom, nouveau titre, nouvelle couleur
  • Carte d’itinéraire, de Lisbonne à Berlin : ajout de Prague, distance mise à jour
  • Vidéo de conversation par SMS (9:16) : style WhatsApp, un message de plus
• Vérifications : résolution, durée et codec de chaque fichier ; canal alpha des deux overlays WebM ; intégrité des premiers fichiers après modification ; chaque image sur des planches contact ; et un juge à l’aveugle (Gemini, qui ne recevait que le prompt, « vidéo A » et « vidéo B »), lancé deux fois par paire en inversant l’ordre. Une victoire ne compte que si les deux ordres concordent.
• Machine : MacBook Apple M3, 16 Go, avec un FFmpeg fonctionnel dans le PATH. Les deux exécutions de chaque paire tournaient en même temps, avec la même charge. Rien n’a été retouché à la main.

Résultats

Temps réel écoulé jusqu’à l’existence du MP4. Les 32 exécutions ont produit des fichiers aux dimensions et à la durée demandées ; les 8 modifications de chaque côté ont fait exactement ce qui était demandé, et aucune n’a touché au fichier d’origine.

Les 8 commandes, côte à côte

Pour chaque commande ci-dessous : le prompt exact, les deux premières versions, notre verdict, puis la demande de suivi et la façon dont chaque framework l’a traitée.

1. Typographie cinétique

Make a 12-second 1920x1080 kinetic typography video for the line "Ship small. Ship often. Learn fast." Each phrase gets its own distinct motion, and the video ends holding the full line on screen for at least two seconds. Dark background, one accent colour. No voice.

Les deux agents ont donné à chaque phrase sa propre scène avant d’assembler la ligne complète. HyperFrames a choisi un corps de texte plus grand et son « often. » en écho se lit mieux ; la version Remotion contient une image entièrement vide entre deux temps. Juge à l’aveugle : HyperFrames dans les deux ordres. Notre avis : HyperFrames, de peu.

Demande de suivi :

Change the accent colour to electric blue #2B5BFF and make the whole video 2 seconds faster (10 seconds total), keeping the final hold. Render to out-edit.mp4 and keep out.mp4 as it is.

Les deux ont appliqué exactement ce bleu et ramené le film à 10 secondes en conservant le plan final.

2. Révélation de logo à partir d’un SVG

Make an 8-second 1920x1080 logo reveal for a fictional coffee brand using the logo in logo.svg in this folder. Use the logo's own paths (don't redraw or replace it); the mark draws or assembles itself, then the wordmark appears, and the finished logo holds for at least 2 seconds. Warm, premium feel. No voice.

Les deux ont utilisé les tracés d’origine du SVG : le cercle se dessine, les vagues suivent, puis le logotype apparaît. Les deux ont aussi inventé un slogan sous le logo, que personne n’avait demandé. Juge à l’aveugle : partagé entre les deux ordres. Notre avis : égalité.

Demande de suivi :

Make a vertical 1080x1920 version for Instagram Stories. Same reveal, re-laid out for the tall frame. Render to out-edit.mp4 and keep out.mp4 as it is.

C’est là que les deux ont divergé. L’agent Remotion a recomposé le logo pour le format vertical, le symbole au-dessus du logotype. L’agent HyperFrames a conservé le logo horizontal en le réduisant, laissant la majeure partie de l’image vide.

3. Graphique en barres animé

Make a 15-second 1920x1080 animated bar chart titled "Daily screen time by age (demo data)". Exact values in hours: 13–17: 8.5, 18–24: 7.2, 25–34: 6.1, 35–44: 5.0, 45–54: 4.3, 55+: 3.4. Bars grow in one after another, each value counts up as its bar grows, and the finished chart holds for at least three seconds. Clean, light, editorial style. No voice.

Les deux sont exacts. Le graphique Remotion est juste et sobre. Le graphique HyperFrames met en avant la barre 13–17, grise les autres, ajoute une annotation (« Teens log 2.5× the daily screen time of the 55+ group », correcte : 8,5 ÷ 3,4) et une ligne de source, rien de tout cela n’étant demandé dans le prompt. Juge à l’aveugle : HyperFrames dans les deux ordres. Notre avis : HyperFrames.

Demande de suivi :

The data changed: 25–34 is now 6.6 and 55+ is now 2.9. Update the chart and render to out-edit.mp4. Keep out.mp4 as it is.

Les deux ont mis à jour les deux valeurs. HyperFrames a même recalculé sa propre annotation, passée à 2,9×.

4. Démo d’interface produit

Make a 15-second 1920x1080 product micro-demo for a fictional to-do app called Tally. Show the app window; a cursor clicks "Add task", types "Send invoice", presses enter, then checks the task off. The list then shows an "All done for today" state with a small confetti burst. Clean light UI, realistic cursor movement. No voice.

Même mise en page, même trajectoire du curseur, mêmes confettis. Le texte de HyperFrames reste plus lisible en petite taille, et il a ajouté un carton final avec un slogan (« Count it done. ») absent du prompt ; Remotion termine par un fondu sur la liste complétée. Juge à l’aveugle : HyperFrames dans les deux ordres. Notre avis : égalité.

Demande de suivi :

Make it dark mode, and change the task text to "Book flights". Render to out-edit.mp4 and keep out.mp4 as it is.

Les deux sont passés en mode sombre et ont saisi « Book flights ».

5. Le fonctionnement d’une pompe à chaleur

Make a 20-second 1920x1080 explainer animation of how a heat pump heats a house in winter. Show the outdoor unit pulling heat from cold outside air, the refrigerant loop carrying it indoors (compressor makes it hot, it releases heat inside, expansion valve cools it again), and the warm room. Label the four parts: evaporator, compressor, condenser, expansion valve. Keep it clear and diagrammatic, flat style, cold blues outside and warm oranges inside. The flow of heat must be easy to follow. No voice.

Les deux ont légendé les quatre composants et rendu le flux de chaleur facile à suivre. Remotion entasse davantage de petit texte ; HyperFrames utilise un texte plus grand, une idée par étape, et conclut sur « It doesn’t make heat. It moves heat inside. » Juge à l’aveugle : HyperFrames dans les deux ordres. Notre avis : HyperFrames.

Demande de suivi :

Add one final 4-second scene with the line "Up to 3× more heat than the electricity it uses" and render the full video to out-edit.mp4. Keep out.mp4 as it is.

Les deux ont ajouté la scène finale. Remotion a utilisé une icône et deux libellés ; HyperFrames a dessiné un bloc d’électricité face à trois blocs de chaleur.

6. Lower third transparent (OBS)

Make a 6-second animated lower third for a livestream: name "Maya Chen", title "Head of Product, Northwind". It slides in, holds, and slides out. It must have a truly transparent background so I can put it over my camera in OBS: render it as a WebM with an alpha channel to out.webm (VP9, yuva420p). 1920x1080, positioned in the lower left. Also render an MP4 preview of it over a mid-grey background to out.mp4. No voice.

Présentés ici sur le fond gris de prévisualisation. Les deux sont presque identiques, et les deux fichiers WebM ont un vrai canal alpha : 96 % des pixels entièrement transparents, le bandeau entièrement opaque. Juge à l’aveugle : HyperFrames dans les deux ordres, au motif que Remotion n’aurait pas d’animation de sortie, ce qui est faux : il s’estompe et se rétracte. Notre avis : égalité.

Demande de suivi :

Change the name to "Daniel Okafor" and the title to "Founder, Riverline", and make the accent colour green #19C37D. Render out-edit.webm (transparent) and out-edit.mp4 (grey preview). Keep the originals.

Les deux ont modifié le nom, le titre et la couleur d’accent, dans le WebM transparent comme dans la prévisualisation.

7. Carte d’itinéraire, de Lisbonne à Berlin

Make a 15-second 1920x1080 travel route map animation, Vox / documentary style: a stylised map of western Europe, and a route that draws itself Lisbon → Madrid → Paris → Amsterdam → Berlin, with each city dot and label popping in as the line reaches it, a gentle camera follow along the route, and a small counter of kilometres travelled. Muted paper map colours, one bold route colour. No voice.

Les deux ont dessiné une géographie européenne réelle, fait apparaître chaque ville au passage de la ligne et abouti aux mêmes 3 055 km. HyperFrames ajoute le nom des pays et une distance sous chaque ville ; la caméra de Remotion suit la ligne de plus près. Juge à l’aveugle : HyperFrames dans les deux ordres. Notre avis : quasiment une égalité.

Demande de suivi :

Add Prague as a final stop after Berlin and update the kilometre counter. Render to out-edit.mp4 and keep out.mp4 as it is.

Les deux ont ajouté Prague et mis le compteur à jour : 3 405 km.

8. Vidéo de conversation par SMS (9:16)

Make a 15-second vertical 1080x1920 text-message conversation video, iMessage style, between "Sam" and "Alex". Messages appear one at a time with a typing indicator before each reply: Sam: "did you finish the deck?" / Alex: "almost 😅" / Alex: "20 min" / Sam: "client call is in 10" / Alex: "…" / Alex: "ok 5 min". Realistic phone chat UI, readable on a phone, end holding the full chat for 2 seconds. No voice.

Pratiquement la même conversation. HyperFrames tape le message de Sam dans la barre de saisie avant de l’envoyer. Les deux ont laissé des bulles trop petites pour un écran de téléphone. Juge à l’aveugle : partagé. Notre avis : égalité.

Demande de suivi :

Switch it to a WhatsApp-style look (green outgoing bubbles, beige patterned background) and add one final message from Sam: "🙏". Render to out-edit.mp4 and keep out.mp4 as it is.

Les deux sont passés au style WhatsApp et ont ajouté le 🙏.

Constat 1 : avec le même modèle, les vidéos convergent

Sur l’ensemble des huit commandes, ce qui frappe d’abord, c’est leur ressemblance. Les deux ont dessiné une géographie européenne réelle et calculé les mêmes 3 055 km pour l’itinéraire. Les deux ont construit l’application de tâches avec la même mise en page, la même trajectoire de curseur et les mêmes confettis. Les deux lower thirds sont sortis à la même taille, dans le même coin, avec un vrai canal alpha. Le framework détermine la manière dont l’agent écrit la vidéo, pas ce qu’il imagine.

Cela correspond à ce que nous avions observé lors d’une première série de ce test avec Claude Sonnet 5.5. L’écart était alors important en typographie cinétique : l’agent Remotion avait empilé trois lignes de texte dans un coin. Avec Opus, les deux agents ont donné à chaque phrase sa propre scène. Le modèle a comblé l’essentiel de l’écart avant même que le framework n’entre en jeu.

Constat 2 : Remotion est plus rapide parce que Claude le connaît déjà

Remotion a terminé plus tôt sept premières versions sur huit, pour un total de 25,9 minutes contre 39,7, avec 96 étapes d’agent contre 176. Le rendu n’y est pour rien. Les journaux de session montrent où passe le temps :

• L’agent Remotion a ouvert le skill officiel de Remotion dans 1 session sur 8. Remotion existe depuis 2020 et Claude l’écrit de mémoire.
• L’agent HyperFrames a chargé le skill HyperFrames dans 8 sessions sur 8 et a consulté ses fichiers de référence 15 fois de plus. HyperFrames a huit mois ; l’agent doit l’apprendre à chaque fois.
• Il a aussi lancé plus de deux fois plus de commandes shell (154 contre 69), pour l’essentiel les commandes propres à HyperFrames : init, check, lint et snapshot.

Les deux agents ont inspecté leurs propres images à peu près aussi souvent (48 et 47 lectures d’images) : le temps supplémentaire ne correspond donc pas à davantage de contrôle qualité. L’écart devrait se réduire à mesure que les nouveaux modèles apprendront HyperFrames.

Constat 3 : l’avantage de HyperFrames, c’est un guide de design

Le graphique en barres (commande 3) montre d’où vient la préférence du juge à l’aveugle. Le graphique Remotion est juste et sobre. Le graphique HyperFrames met en avant la barre 13–17 en orange, grise les autres, ajoute une annotation (« Teens log 2.5× the daily screen time of the 55+ group », ce qui est exact : 8,5 ÷ 3,4) et une petite ligne de source. Rien de tout cela ne figurait dans le prompt. Tout est dans le skill HyperFrames, presque mot pour mot :

Highlight one series, grey the rest.
Build a chart in reading order: the frame and axis, a reference line,
then the data drawing in, then one annotation on the point that matters.
Real data only, from the source, rounded the same way everywhere,
with a small source line on screen.

Extrait de la référence data de HyperFrames.

Le skill se lit comme le guide de style d’un motion designer, avec des règles pour les graphiques, la typographie cinétique, les cartes et le rythme. Les skills officiels de Remotion sont une référence technique : comment configurer un projet, faire le rendu, ajouter des sous-titres, utiliser des bibliothèques de cartographie. L’écart de qualité est donc un écart de prompt. Si vous utilisez Remotion, mettez les règles de design dans votre prompt ou dans les instructions de votre projet : vous obtiendrez le même comportement, sans les étapes supplémentaires. Il en allait de même pour la typographie cinétique, où la règle de HyperFrames est « 3–7 English words per scene » (référence film).

Constat 4 : les deux modifient avec précision ; Remotion recompose mieux

Toutes les modifications ont fonctionné des deux côtés : nouvelles données, nouvelles couleurs, une étape de plus, un mode sombre, une nouvelle scène finale, et les deux ont conservé le fichier d’origine intact. La seule vraie différence tenait à la mise en page. Pour la version verticale de la révélation de logo (commande 2), l’agent Remotion a placé le symbole au-dessus du logotype pour s’adapter au format vertical ; l’agent HyperFrames a réduit le logo horizontal et laissé l’image à moitié vide.

Autre point commun : les deux ont ajouté du texte que personne n’avait demandé. Les deux révélations de logo ont inventé un slogan sous le logotype, et la démo d’interface HyperFrames se terminait sur un carton de marque avec un slogan. Si le texte compte, terminez votre prompt par « No other text. »

Ce qui vous reste entre les mains

Pas besoin de choisir un seul modèle de synchronisation

L’argument de HyperFrames, c’est le modèle par positionnement (seeking) : écrire une timeline GSAP classique et laisser le moteur de rendu la faire sauter à chaque image. Vous pouvez faire la même chose dans Remotion : créez la timeline en pause et réglez son temps à partir de l’image courante.

const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const ref = useRef(null);
  const tl = useRef(null);
  useLayoutEffect(() => {
    tl.current = gsap.timeline({ paused: true })
      .from(ref.current, { y: 40, opacity: 0, duration: 0.5, ease: "power3.out" });
  }, []);
  useLayoutEffect(() => { tl.current?.totalTime(frame / fps); }, [frame, fps]);
  return <h1 ref={ref}>Ship small.</h1>;
};

C’est ainsi que fonctionne le rendu d’iArt : l’agent écrit des timelines GSAP, Remotion gère l’horloge, la prévisualisation et l’export, et les instructions de notre agent portent les règles de design. Voilà la vraie leçon de ce test : le moteur de rendu compte moins que ce que vous dites à l’agent.

Lequel choisir ?

Limites de ce test

Huit commandes, une exécution par framework pour chacune, un seul modèle et une seule machine. Une exécution unique ne tranche pas grand-chose sur une commande donnée ; c’est la tendance sur l’ensemble des huit que nous rapportons. Le juge à l’aveugle est un modèle d’IA et s’est trompé au moins une fois (il a affirmé que le lower third de Remotion n’avait pas d’animation de sortie ; elle existe bien) : nous indiquons donc notre propre verdict image par image à côté du sien. Nous avons testé les deux via Claude Code et leurs outils en ligne de commande, et non via HyperFrames Studio, Remotion Studio ou l’un ou l’autre service de rendu cloud. Tous les prompts figurent ci-dessus : vous pouvez refaire le test.

FAQ

HyperFrames est-il meilleur que Remotion ?

Pour un agent IA travaillant en autonomie, HyperFrames a produit des vidéos un peu plus soignées dans notre test : un juge à l’aveugle l’a préféré sur 6 commandes sur 8 et n’a jamais préféré Remotion de façon constante. Remotion a terminé toutes les commandes sauf une plus rapidement, en environ deux fois moins d’étapes d’agent. L’essentiel de l’écart de qualité vient du guide de design de HyperFrames, que vous pouvez aussi fournir à un agent Remotion.

Pourquoi Claude Code est-il plus lent avec HyperFrames ?

HyperFrames est récent : l’agent charge donc son skill et lit sa documentation à chaque session. Dans nos tests, il l’a fait pour les 8 commandes, alors qu’il n’a ouvert le skill de Remotion que dans 1 cas sur 8 et a écrit à partir de ce qu’il savait déjà. Les vérifications en ligne de commande de HyperFrames ajoutent encore des étapes avant chaque rendu.

Peut-on utiliser GSAP avec Remotion ?

Oui. Créez une timeline GSAP en pause et réglez son temps à partir de l’image courante de Remotion à chaque rendu. C’est le modèle par positionnement qu’utilise HyperFrames, appliqué dans Remotion. iArt fait le rendu de ses animations de cette façon.

Les deux peuvent-ils exporter une vidéo transparente pour OBS ?

Oui. Dans notre test, les deux ont produit un WebM VP9 avec un vrai canal alpha : 96 % des pixels entièrement transparents et le lower third opaque, vérifié image par image.

Remotion est-il gratuit ?

Remotion est gratuit pour les particuliers, les entreprises à but lucratif comptant jusqu’à trois salariés et les organisations à but non lucratif ; les entreprises plus grandes doivent acheter une licence entreprise. HyperFrames est open source sous licence Apache 2.0.

HyperFrames nécessite-t-il d’installer FFmpeg ?

Oui : son outil en ligne de commande nécessite Node.js 22 ou supérieur et FFmpeg, sauf si vous utilisez le rendu hébergé de HeyGen. Remotion intègre son propre FFmpeg dans son moteur de rendu depuis la version 4.0.

Peut-on créer ces vidéos sans configurer l’un ou l’autre framework ?

Oui. iArt est un agent vidéo hébergé, construit sur Remotion et GSAP : décrivez la vidéo avec vos propres mots, il l’écrit, en fait le rendu et l’exporte, sans installation, version de Node ni FFmpeg à gérer.