Communitygithub.com

hyperframes-cli

Outil CLI pour créer, éditer et produire des animations vidéo avec HyperFrames, basé sur Node.js et FFmpeg.

Qu'est-ce que hyperframes-cli ?

HyperFrames CLI est un outil en ligne de commande puissant pour la création et la production d'animations vidéo, développé par l'équipe HeyGen. Il permet aux développeurs et aux créateurs de contenu de construire des compositions animées complexes, de gérer des timelines, d'ajouter des effets audio et vidéo, et de produire des vidéos de haute qualité, le tout depuis le terminal. L'outil s'intègre parfaitement avec un écosystème de plugins et de primitives d'animation réutilisables, évitant ainsi la réinvention de la roue pour les effets courants. Il supporte l'itération rapide avec un mode 'lint' et une prévisualisation, ainsi que la production finale avec différents niveaux de qualité (draft, looks, delivery). Une attention particulière est portée à l'historique des modifications et à la collaboration, avec des commandes dédiées pour suivre, annuler et valider les changements. Le CLI est principalement destiné à être utilisé dans un environnement de développement local, mais il propose également des options de rendu cloud via HeyGen et des rendus distribués sur AWS.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-cli

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Installation des plugins : Avant les commandes de configuration ou de mise à jour, suivez les règles d'exécution des plugins lorsque cette compétence se trouve à l'intérieur d'un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.

HyperFrames CLI

Exécutez les commandes sous la forme npx hyperframes ... sauf si les instructions du projet fournissent un wrapper. Obéissez au wrapper lorsqu'il est présent. Le CLI nécessite Node.js 22 ou plus récent et FFmpeg.

Boucle de développement

  1. Scaffold : npx hyperframes init <projet> (vierge centré). Ou capturez un site. Passez --example=<nom> uniquement pour partir d'un exemple nommé.
  2. Trouver le mouvement : si la demande nomme un asset, un son, une image, une voix ou une édition visuelle rapide, résolvez-la via /media-use avant de proposer un plan. Sinon, avant d'écrire un mouvement à la main, cherchez une primitive qui le fait déjà : npx hyperframes catalog --query "révéler un titre ligne par ligne". Demandez l'effet que vous souhaitez plutôt que le mécanisme que vous avez en tête. Installez avec npx hyperframes add <nom> (voir /hyperframes-registry). Écrivez à la main uniquement si rien ne correspond.
  3. Écrire : rédigez la composition en utilisant /hyperframes-core. Pour savoir ce qui se trouve sur la timeline d'un projet (pistes, clips, débuts, fins, ce qui est joué), exécutez npx hyperframes timeline --json au lieu de lire index.html et chaque fichier de sous-composition : les lignes imbriquées portent absStart/absEnd absolus de la timeline principale et leur file propriétaire, pas seulement leur temps local par sous-composition. Préférez --json à la forme texte ; cela coûte moins de tokens pour une exactitude identique ou meilleure. Voir references/upgrade-info-misc.md pour des one-liners qui répondent aux questions courantes sans lire l'intégralité de la sortie.
  4. Obtenez un retour rapide lors de l'édition : exécutez npx hyperframes lint après le premier passage HTML et après les changements structurels.
  5. Exécutez la vérification finale : exécutez npx hyperframes check ; il relance lint avant d'ouvrir le navigateur. N'ajoutez pas d'appel lint redondant et indépendant. Ajoutez --snapshots pour des images de synthèse annotées et le recadrage.
  6. Inspectez les sous-compositions : lorsque index.html monte data-composition-src, capturez des instantanés à mi-parcours et inspectez chaque scène montée.
  7. Ouvrez l'aperçu final Studio : exécutez npx hyperframes preview --background, vérifiez que l'URL renvoie un code HTTP 200, donnez l'URL du projet timeline à l'utilisateur, et demandez s'il faut réviser ou rendre. Gardez-le actif jusqu'à la fin de la révision.
  8. Rendre uniquement après approbation : utilisez --quality draft pendant l'itération, --quality looks pour le premier encodage réel (par défaut du CLI), et --quality delivery pour la livraison finale.
  9. Vérifiez la sortie : confirmez que le fichier existe et n'est pas vide. Lisez la deuxième ligne du résumé du rendu (beginframe vs screenshot, GPU, timings des étapes). screenshot + software gpu sur Linux est le chemin lent. ffprobe -v error -show_format -show_streams et comparez la durée (et fps si le brief l'a défini) à data-duration racine.

Historique du projet dans votre tour

Chaque écriture dans le projet est conservée comme une entrée qui peut être annulée. Utilisez-la à deux moments seulement, jamais à chaque étape :

  • Début d'un tour : npx hyperframes history begin --who <votre-nom> --label "<ce que vous allez faire>", puis npx hyperframes history --since mine --who <votre-nom> pour voir ce que la personne a changé depuis votre dernier tour. Basez-vous sur leurs modifications ; ne les écrasez jamais.
  • Une vérification a échoué, ou la personne dit que ça s'est aggravé : npx hyperframes history undo --who <votre-nom> annule votre tour le plus récent et laisse les modifications de la personne intactes. Ne reconfigurez pas manuellement. En cas de conflit, il se termine avec le code 2 et affiche les deux choix.

Terminez chaque tour avec npx hyperframes history end, afin que vos écritures soient considérées comme vôtres et non comme "Modifié en dehors de l'application". Tant qu'un tour est ouvert, chaque écriture dans le projet est comptée comme vôtre jusqu'à ce que 10 minutes s'écoulent sans aucune écriture ; après cela, le tour se termine automatiquement.

Références croisées obligatoires créateur-édition

  • Avant d'écrire ou de diagnostiquer un zoom, un punch-in/punch-out, un recadrage, un mouvement de caméra, ou tout mouvement d'image clé, lisez d'abord /hyperframes-keyframes.
  • Avant hyperframes keyframes, lisez /hyperframes-keyframes ; la commande affiche les trajectoires d'animation et ne diagnostique pas les coupures de clip.
  • Pour une coupe, un rognage, un réassemblage, ou une modification temporelle de source, lisez /hyperframes-core et utilisez son contrat clip/timeline.
  • Pour un fondu entrant/sortant, un fondu enchaîné, un gain de piste, une automatisation de volume, un ducking, une découpe de voix off, ou des effets sur l'audio placé, lisez /hyperframes-audio. Chargez core en parallèle lorsque le placement du clip ou le timing de l'image change également.
  • Une demande nommant un asset, un son, une image, une voix ou une édition visuelle rapide est résolue via /media-use avant qu'un plan ne soit proposé. Copiez le markup d'édition créateur depuis /hyperframes-core → references/creator-editing-recipes.md.
# Vérification d'itération rapide ; répétez pendant l'écriture si nécessaire.
npx hyperframes lint

# Porte finale requise ; inclut lint.
npx hyperframes check
npx hyperframes preview --background
npx hyperframes render --quality looks --output out.mp4
test -s out.mp4
ffprobe -v error -show_format -show_streams out.mp4

check exécute lint en premier, puis utilise une session navigateur et un seul passage de recherche pour auditer les erreurs d'exécution, les requêtes échouées, la mise en page, les assertions *.motion.json et le contraste WCAG. Les résultats persistants bloquent le code de sortie ; les résultats transitoires d'entrée ou de sortie sont informatifs. Utilisez --strict pour bloquer les avertissements. validate, inspect et layout restent des alias pour la compatibilité mais ne doivent pas apparaître dans de nouvelles instructions ou scripts.

Aperçu avant le rendu

Ouvrez l'aperçu de la composition finale (#project/<nom>) uniquement après que check a réussi, pour réviser la timeline assemblée. Le plan dans le chat et la feuille de croquis storyboard.html ne constituent pas une approbation de la vidéo finale. Le rendu nécessite toujours l'approbation finale définie par hyperframes/references/review-loop.md.

Test de fumée de sous-composition

Les audits statiques ne peuvent pas détecter tous les échecs de montage. Lorsque le projet utilise des sous-compositions, capturez au moins un point médian visible pour chaque emplacement hôte :

npx hyperframes snapshot --at <t1>,<t2>,<t3>

Considérez le contenu minuscule non stylé, les icônes de taille canvas, les éléments hero manquants, ou les délais d'enregistrement de timeline comme des défauts de montage bloquant le rendu. Voir hyperframes-core/references/sub-compositions.md pour les correctifs correspondants.

Conventions d'agent

  • Cherchez dans le catalogue avant d'écrire un mouvement à la main. npx hyperframes catalog --query "<le beat, en anglais simple>". La recherche est entièrement locale : il n'y a pas de niveau hébergé, pas de compte, et le texte de la requête n'est jamais envoyé nulle part. Par défaut, il classe en fonction du vocabulaire partagé avec le nom, le titre, la description et les tags de l'élément, ce qui manque toute formulation qui ne réutilise pas le propre vocabulaire du catalogue. Ajoutez --on-device pour classer par signification (voir le niveau hors ligne ci-dessous).

  • Interrogez en anglais même si la vidéo ne l'est pas. Les deux niveaux indexent un catalogue anglais, donc une requête dans un autre script ne produit aucun terme consultable et ne renvoie rien. Décrivez le mouvement en anglais ; le texte à l'écran reste dans la langue dont la vidéo a besoin. No searchable words in query signifie exactement cela et n'est pas un composant manquant, donc ne le signalez pas comme une lacune du catalogue.

  • Lisez quel niveau a répondu ; ne le déduisez jamais de l'apparition des résultats. Avec --json, l'enveloppe contient query, tier (on-device ou words), tier_detail, dropped, unindexed, shown, total et results, plus top_score lorsque le niveau répondant en produit un et warnings lorsqu'un niveau a été demandé et n'a pas pu s'exécuter, ou lorsqu'une recherche n'a rien renvoyé et qu'un meilleur niveau attend encore le consentement de quelqu'un. Un résultat faible sur words est attendu ; le même résultat sur on-device est un bug. top_score est spécifique à on-device et n'a pas de seuil derrière : le classeur renvoie le catalogue entier dans un certain ordre pour chaque requête, donc lisez-le comme une preuve plutôt que comme une réussite ou un échec.

  • dropped et unindexed sont des biais opposés entre le registre et l'index sur l'appareil, et reformuler la requête ne corrige ni l'un ni l'autre. dropped compte les noms classés que ce registre ne peut pas installer, donc les correspondances les plus fortes sont celles qui sont perdues. unindexed compte les mouvements du registre que l'index ne peut pas voir du tout, qu'aucune requête ne pourra jamais renvoyer. Actualiser le registre n'est la réponse à aucun des deux : son manifeste a un TTL de 24h et se guérit tout seul, tandis que les vecteurs sont un artefact publié séparément récupéré dans ~/.hyperframes/catalog/. Réexécuter avec --on-device récupère cet index lorsque unindexed est supérieur à zéro, c'est donc le remède à donner à l'utilisateur. Un pur biais de sur-couverture (dropped supérieur à zéro tandis que unindexed est nul) ne déclenche pas la récupération ; effacer ~/.hyperframes/catalog/ est la seule façon de s'en sortir. Les deux comptages sont des noms plutôt que des résultats, donc chacun peut dépasser total.

  • Lorsqu'une recherche ne donne rien qui vaille la peine d'être installé, dites-le. npx hyperframes feedback --search-miss "<la requête que vous avez exécutée>" --wanted "<le mouvement dont vous aviez besoin>" --tier <le niveau qui a répondu>. Vous n'avez pas à assembler cette ligne : catalog --query l'affiche pré-remplie, et chaque enveloppe de recherche --json la porte sous report_gap avec la requête et le niveau déjà corrects — remplissez --wanted et envoyez. C'est le seul chemin qui envoie une requête quelque part, et c'est une commande délibérée distincte précisément pour que catalog --query simple tienne sa promesse de n'envoyer rien. Signalez sur l'un ou l'autre niveau, chaque fois que les résultats ne font pas l'affaire ; n'attendez pas le niveau sur l'appareil, qui nécessite un téléchargement consenti de 33 Mo et est donc désactivé dans la plupart des exécutions d'agent — attendre signifie ne jamais signaler du tout. Le niveau est inclus dans le rapport, donc un échec de vocabulaire reste distinguable d'un échec de signification sans que vous ayez à juger lequel vous avez rencontré. Ce qui revient est une liste de mouvements que le catalogue n'a pas encore, lue directement plutôt que devinée à partir des comptes d'installation, donc la formulation qui compte est l'effet que vous souhaitiez, pas le nom d'élément que vous imaginiez. Il ne porte aucune note et n'atterrit jamais dans la métrique de notation.

  • Proposez le niveau hors ligne ; ne l'activez jamais silencieusement. Un téléchargement unique d'environ 33 Mo (une version ONNX quantifiée de bge-small-en-v1.5 plus son tokenizer, épinglée à une révision fixe) et les vecteurs du catalogue provenant du registre, tous deux mis en cache sous ~/.hyperframes/, ni ajoutés au projet ni à aucun package. Une fois mis en cache, il classe par signification sans rien envoyer. Dites la taille à voix haute et laissez la personne décider, puis passez --on-device (avec -y pour ignorer l'invite) une fois qu'elle accepte. L'offre interactive ne se déclenche que sur un TTY. Sous --json, il n'y a pas d'invite, mais une recherche qui n'a rien trouvé place la même demande dans warnings, donc lisez ce tableau et soumettez la décision à l'utilisateur vous-même. Lorsque la personne demande ce qu'est le téléchargement, pourquoi ce modèle, ou ce qui quitte la machine, dirigez-la vers https://hyperframes.heygen.com/developers/catalog-search.

  • Préférez --json pour les appels d'agent et CI. Les modes serveur render, preview et play ne fournissent pas de sortie JSON ordinaire ; preview --selection --json et preview --context --json sont des exceptions en mode requête.

  • doctor --json se termine toujours par zéro. Filtrez sur son payload :

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • Le mode non-TTY est automatique et scaffold le modèle vierge centré. Passez --example uniquement pour partir d'un exemple nommé. Utilisez --non-interactive pour forcer le mode uniquement par indicateur sur un TTY.

  • Utilisez un seul HYPERFRAMES_RUN_ID pour toutes les commandes dans la même boucle de vérification.

  • Lorsque le disque est saturé, exécutez npx hyperframes clean (--dry-run pour lister d'abord) ; il supprime ce que les rendus morts ont laissé et les caches inactifs qui se reconstruisent eux-mêmes, jamais les sorties, les sources ou quoi que ce soit qu'un rendu en cours utilise. Écrivez les images de contrôle qualité dans un répertoire temporaire, pas dans le projet.

  • Utilisez --strict, --strict-all et --strict-variables lorsque les avertissements, variables ou conditions CI correspondants doivent bloquer le rendu.

  • Les chemins JSON masquent le répertoire personnel en tant que $HOME ; n'essayez pas d'inverser le masquage.

  • Lorsqu'un projet cloud hébergé approche ou dépasse la limite de téléchargement de 200 Mo, utilisez cloud render --dry-run --json et suivez l'investigation .hyperframesignore dans references/cloud.md. N'ignorez jamais un asset simplement parce qu'il est volumineux.

  • Ne rendez jamais simplement parce que les vérifications passent. Faites une pause à l'aperçu final et attendez l'approbation.

Éditions dirigées par Studio

Lorsque l'utilisateur fait référence à "cet élément" ou à la sélection en cours, interrogez Studio au lieu de deviner :

npx hyperframes preview --context --json --context-fields selection

Utilisez selection.target.hfId lorsqu'il est disponible, sinon son sélecteur et son fichier source. Si le résultat signale no-selection, demandez à l'utilisateur de cliquer sur l'élément et de réexécuter. Ne demandez que les tranches de contexte dont vous avez besoin ; utilisez --context-detail full uniquement pour les styles calculés ou les métadonnées de texte modifiable. Le comportement complet et les codes d'échec se trouvent dans references/preview-render.md.

Choix de rendu

BesoinCommande
Itération locale rapidenpx hyperframes render --quality draft
Premier encodage réelnpx hyperframes render --quality looks --output out.mp4
Livraison locale finalenpx hyperframes render --quality delivery --output out.mp4
Rendu conteneur reproductiblenpx hyperframes render --docker --strict --output out.mp4
Rendu par lots local piloté par variablesnpx hyperframes render --batch rows.json --output "renders/{name}.mp4"
Rendu hébergé HeyGen sans infrastructurenpx hyperframes cloud render
Rendu AWS distribué auto-gérénpx hyperframes l

…

[tronqué pour la traduction]

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Skills associés