Remotion ou HyperFrames pour faire des vidéos avec un agent
React ou HTML/CSS, licence, rendu, cas d'usage : comment choisir entre Remotion et HyperFrames quand c'est un agent de code qui écrit la vidéo.
Mis à jour le
Remotion et HyperFrames produisent tous deux une vidéo à partir de pages web : un navigateur dessine chaque image, puis un encodeur assemble le MP4. La différence tient à ce que l'agent doit écrire : un composant React pour Remotion, un fichier HTML pour HyperFrames.
Le principe de chacun
Remotion décrit une vidéo comme une fonction du numéro d'image. Le composant lit l'image courante et renvoie ce qu'il faut afficher ; le minutage se calcule en images. Le projet est un projet React et TypeScript. Remotion documente l'usage avec Claude Code, Codex, Kimi Code et OpenCode, et propose des Agent Skills qui s'installent avec npx remotion skills add.
HyperFrames (projet open source de HeyGen) décrit une vidéo comme une page HTML. Des attributs data-start et data-duration indiquent quand chaque élément apparaît, et une animation GSAP, mise en pause, indique comment il bouge. Au rendu, le moteur déplace l'animation à l'instant exact de chaque image avant de la capturer. Ses skills s'installent avec npx skills add heygen-com/hyperframes.
La licence
C'est souvent le critère décisif.
- HyperFrames : Apache-2.0, sans nombre de places ni examen de licence.
- Remotion : licence propre, pas une licence libre standard. Gratuite pour les particuliers et les entreprises d'au plus trois personnes, usage commercial compris. Au-delà, une licence entreprise est requise. À la date de rédaction, le site indique 25 $ par mois et par utilisateur pour la création manuelle (« Creators »), ou 0,01 $ par rendu avec un minimum de 100 $ par mois pour l'automatisation (« Automators »). Une offre Enterprise démarre à 500 $ par mois.
Les tarifs changent : relisez la page officielle avant de vous engager.
Le rendu
Les deux outils rendent dans un navigateur et exportent en MP4. Les deux savent rendre sur AWS Lambda. Selon le guide de HeyGen, HyperFrames rend aussi en local, sur son cloud et sur Google Cloud Run. Ce guide est écrit par l'éditeur de HyperFrames, et il reconnaît que le rendu Lambda de Remotion est plus ancien et mieux documenté.
Côté fiabilité, HyperFrames impose des règles : animation en pause, pas d'horloge système, pas d'aléatoire sans graine. Remotion n'en impose pas autant, parce qu'un composant pur dépend seulement du numéro d'image.
Quand choisir lequel
| Critère | Remotion | HyperFrames |
|---|---|---|
| Ce que l'agent écrit | React et TypeScript | HTML, CSS et JavaScript (GSAP) |
| Minutage | En images, lu depuis le numéro d'image | En secondes, sur une timeline que le moteur parcourt |
| Licence | Propre ; payante au-delà de trois personnes | Apache-2.0 |
| Matériel de départ | Composants React existants | Pages HTML, animations GSAP ou Lottie existantes |
| Maturité | Plus ancien, plus de modèles et de tutoriels | Plus récent |
| Rendu hébergé | AWS Lambda | AWS Lambda, cloud HeyGen, Google Cloud Run |
Remotion convient si votre équipe écrit déjà du React : composants, système de design et bibliothèques de graphiques se réutilisent tels quels. HyperFrames convient si le point de départ est un site, une maquette HTML ou une animation GSAP, ou si la licence doit rester sans condition.
Dans son propre test, HeyGen a donné la même consigne à un agent avec chaque outil. Les deux vidéos ont été rendues en une douzaine de minutes. Une seule exécution ne prouve rien sur la qualité, mais le résultat diffère : un projet React d'un côté, des fichiers HTML de l'autre.
Passer de l'un à l'autre
HyperFrames fournit une skill, remotion-to-hyperframes, qui traduit une composition Remotion en HTML. Elle compare ensuite les deux rendus image par image et note ce qu'elle n'a pas pu traduire. Elle refuse les animations pilotées par useState ou useEffect et les bibliothèques d'interface React tierces. Le sens inverse n'existe pas.
Ressources du catalogue
Le catalogue PalateKit ne livre pas de scripts : ces ressources servent à guider l'agent, pas à rendre la vidéo à sa place. Pour les vidéos en code, voyez les templates de motion design. Un fichier DESIGN.md donne à l'agent votre charte (couleurs, polices, espacements) avant qu'il écrive la composition. Les skills couvrent les tâches voisines, et les prompts vidéo aident à formuler la consigne. Pour installer une ressource, suivez Installer votre première ressource.
Sources
Questions fréquentes
Remotion est-il gratuit ?
Pour un particulier ou une entreprise d'au plus trois personnes, oui : la licence gratuite couvre l'usage commercial. Au-delà, une licence payante est exigée. Vérifiez les conditions en vigueur sur le site de Remotion.
HyperFrames demande-t-il de savoir coder en React ?
Non. Une composition est un fichier HTML avec des attributs de timing et une animation GSAP, des technologies que les agents de code connaissent bien.
Peut-on passer de Remotion à HyperFrames ?
Oui, dans ce sens seulement : HyperFrames fournit une skill de migration. Elle refuse les compositions pilotées par un état React (useState, useEffect) et les bibliothèques d'interface tierces.