hyperframes-animation (HeyGen HyperFrames)
Définit les règles de timing et d'animation d'une composition HyperFrames : attributs data-*, clips, pistes et sous-compositions.
hyperframes-animation : fait respecter le contrat de rendu aux compositions d'animation HyperFrames (contrôle 3.8, skill 4.9, une phrase 4.5) au prix de 1.05 fois les tokens du contrôle, mais ce skill a été retiré du dépôt de HeyGen
Codex CLI · gpt-6-astra
26.1 / 30
Gain par rapport à sans skill : +1.16 · Recommandé · 18 exécutions
Recommandé : total 26.1/30 d'au moins 22, qualité de sortie 4.9 d'au moins 3.5 et gain +1.16 d'au moins +1.0.
SOTA
RéussiTesté avec Codex.
Couvre Codex, Claude Code
Codex CLI 0.166 (palier SOTA) : 18 exécutions notées. Une réussite ici couvre aussi Claude Code selon notre règle de palier ; elle ne dit rien du second palier.
Scores
Chaque dimension va de 0 à 5 et les six forment le total sur 30. 5 est la meilleure note dans chaque dimension. Coût 5 signifie bon marché et rapide. Installation 5 signifie facile.
- Fiabilité du déclenchement
- 5.0
- Gain par rapport à sans skill
- 3.2
- Qualité de sortie
- 4.9
- Coût en tokens et en temps
- 5.0
- Installation et portabilité
- 4.0
- Sécurité
- 4.0
Revue de sécurité
PrudenceScan statique : 17 CRITIQUE / 17 ÉLEVÉ / 148 MOYEN. Revue manuelle : sûr à exécuter dans un bac à sable sans réseau (le BLOCK du scanner est un faux positif) ; n'exécutez pas ses scripts à l'aveugle. Un scan propre ne prouve pas qu'un skill est sûr.
Installer
npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation
Commit épinglé: 207c8a4daf6480d697f203784f1fd422727569e3
Testé: 2026-11-02
Ce que nous avons testé
- Titre cinétique — Créez une composition HyperFrames (un framework open source qui rend une page HTML en MP4 en parcourant une timeline GSAP image par image ; GSAP vient d'une balise script CDN) de 6 secondes en 1920x1080 : un titre de trois mots (« Build. Ship. Repeat. ») où chaque mot arrive en force…
- Transition entre scènes — Créez une composition HyperFrames (un framework open source qui rend une page HTML en MP4 en parcourant une timeline GSAP image par image ; GSAP vient d'une balise script CDN) de 8 secondes en 1920x1080 avec deux scènes plein écran (« Problem » pendant 4.5s, « Solution » pendant 4.5s) qu…
- Statistique avec compteur et barre — Créez une composition HyperFrames (un framework open source qui rend une page HTML en MP4 en parcourant une timeline GSAP image par image ; GSAP vient d'une balise script CDN) de 7 secondes en 1920x1080 : un grand nombre qui monte de 0 à 87% en 2.5 secondes avec une barre horizont…
Points forts
- Fait passer le score moyen de 3.76 à 4.92 par rapport à sans skill (+1.16).
- Le skill a été détecté sans être nommé : son fichier a été lu dans 6/6 exécutions avec skill.
- Aucune surcharge de tokens : 1.05 fois le volume de tokens sans skill.
- Fait mieux que la version en une phrase de sa propre règle de +0.39.
- Qualité absolue élevée avec le skill : 4.92 sur 5.
Points faibles
- Réserve de test : testé au commit 207c8a4 de heygen-com/hyperframes, une version plus ancienne. Le skill a ensuite été retiré du HEAD du dépôt, la commande d'installation peut donc ne pas fonctionner sur le dépôt actuel. Il lit aussi hyperframes-core pendant les exécutions.
- n=2 par tâche et par bras ; les écarts inférieurs à environ 1 point sont du bruit.
Avis
Codex CLI 0.166 (gpt-6-astra, low reasoning) sur un PC Windows de test dédié, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, skill installé (traitement) ou absent (contrôle) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée au prompt (groupe « prompt d'une phrase »), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous). HyperFrames est décrit en une phrase dans chaque prompt (page HTML rendue en MP4 en parcourant une timeline GSAP). Tâches : un titre cinétique de 6 secondes où trois mots arrivent en force, une transition de 8 secondes entre deux scènes, et un compteur de 7 secondes avec une barre. Le groupe « une phrase » énonce les règles d'animation en un paragraphe.
Comparaison à trois bras
| Bras | Score moyen (0-5) | Tokens par exécution |
|---|---|---|
| Sans le skill | 3.76 | 131k |
| Prompt d'une phrase | 4.52 | 87k |
| Avec le skill | 4.92 | 137k |
Mesuré avec Codex CLI sur 18 exécutions, noté par des contrôles basés sur des règles, sans juge LLM. Total 26.1 / 30, verdict Recommandé.
Divulgation : testé au commit 207c8a4 de heygen-com/hyperframes, une version plus ancienne. Le skill a ensuite été retiré du HEAD du dépôt, la commande d'installation peut donc ne pas fonctionner sur le dépôt actuel. Il lit aussi hyperframes-core pendant les exécutions.
Verdict : recommandé (26.1 / 30). Source : heygen-com/hyperframes, skills/hyperframes-animation, skills/hyperframes-core, épinglé au commit 207c8a4. Installation : npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation. Licence : Apache-2.0 (LICENSE du dépôt).
Ce que c'est
La compétence hyperframes-animation de heygen-com/hyperframes, testée au commit 207c8a4 (la compétence ne se trouve plus à la HEAD du dépôt, cette description porte donc sur une version retirée), fournit des conseils d'animation pour les compositions HyperFrames : une seule timeline GSAP en pause, enregistrée dans window.__timelines[root id], des alias de transformation GSAP au lieu des propriétés de mise en page, des eases nommées, du stagger pour les séquences, pas de Math.random/Date.now/timers/rAF/getBoundingClientRect au moment du tween, des compteurs progressifs animés sur un objet proxy, et des scènes avec data-start/data-duration dont le total est couvert par la durée racine.
Comment nous avons testé
Codex CLI 0.166 (gpt-6-astra, raisonnement faible) sur un PC de test Windows dédié, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, compétence installée (avec compétence), absente (témoin) ou absente avec l'exigence essentielle de la compétence condensée en une phrase ajoutée au prompt (groupe prompt d'une phrase), 2 exécutions par groupe et par tâche, réseau désactivé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais la compétence (sauf la formulation indiquée ci-dessous).
HyperFrames est décrit en une phrase dans chaque prompt (page HTML rendue en MP4 en parcourant une timeline GSAP). Tâches : un titre cinétique de 6 secondes où trois mots arrivent en claquant, une transition de 8 secondes entre deux scènes, et un compteur de 7 secondes avec une barre. Le prompt d'une phrase énonce les règles d'animation en un paragraphe.
- Titre cinétique — Crée une composition HyperFrames 1920x1080 de 6 secondes (un framework open source qui rend une page HTML en MP4 en parcourant une timeline GSAP image par image ; GSAP provient d'une balise script CDN) : un titre de trois mots (« Construis. Déploie. Répète. ») où chaque mot arrive en claquant…
- Transition de scène — Crée une composition HyperFrames 1920x1080 de 8 secondes (un framework open source qui rend une page HTML en MP4 en parcourant une timeline GSAP image par image ; GSAP provient d'une balise script CDN) avec deux scènes plein écran (« Problème » pendant 4.5s, « Solution » pendant 4.5s)…
- Compteur avec barre — Crée une composition HyperFrames 1920x1080 de 7 secondes (un framework open source qui rend une page HTML en MP4 en parcourant une timeline GSAP image par image ; GSAP provient d'une balise script CDN) : un grand nombre qui compte de 0 à 87% en 2.5 secondes avec une barre horizontale…
Le score est calculé de manière programmatique (tests masqués / détection des problèmes implantés / vérifications de contraintes / rendu + OCR le cas échéant), avec une note de 0–5 par exécution. Aucun juge LLM n'a attribué de score.
Résultats
Le prompt d'une phrase fourni au troisième groupe : « Dans une composition HyperFrames, utilise une seule timeline GSAP en pause, enregistrée dans window.__timelines[root id] ; déplace les éléments avec les alias de transformation GSAP (x, y, scale, rotation, opacity), jamais width/height/top/left ; choisis des eases nommées et utilise stagger pour les séquences ; pas de Math.random/Date.now/timers/rAF/getBoundingClientRect au moment du tween, pas de repeat:-1 ; pilote les compteurs avec un tween sur l'onUpdate d'un objet proxy ; les scènes sont des éléments temporisés avec data-start/data-duration et la data-duration racine doit les couvrir. »
| Tâche | Score témoin | Prompt d'une phrase | Avec compétence | Tokens témoin | Tokens du prompt d'une phrase | Tokens avec compétence | Compétence lue |
|---|---|---|---|---|---|---|---|
| t1-kinetic | 3.5 | 4.25 | 4.75 | 113k | 77k | 144k | 2/2 |
| t2-transition | 3.57 | 5.0 | 5.0 | 152k | 111k | 159k | 2/2 |
| t3-countup | 4.21 | 4.32 | 5.0 | 126k | 73k | 107k | 2/2 |
Score moyen : 3.76 sans contre 4.92 avec la compétence (écart +1.16). Tokens par exécution : 131k contre 137k (1.05x) ; temps 72s contre 70s. Groupe prompt d'une phrase : 4.52 (gain de la compétence par rapport au prompt d'une phrase : +0.39 ; gain propre du prompt d'une phrase par rapport à l'absence de compétence : +0.77) ; tokens du prompt d'une phrase : 87k par exécution, la compétence coûte donc 1.57x le prompt d'une phrase.
Ce qui s'est passé
- Témoin 3.76, compétence 4.92, prompt d'une phrase 4.52 (n=6 chacun). Les échecs les plus fréquents du témoin sont structurels : l'élément racine n'avait pas un jeu complet id/width/height/duration dans 6/6 exécutions, et la timeline n'était pas enregistrée dans window.__timelines dans 5/6, si bien que le moteur de rendu HyperFrames ne peut pas la trouver.
- La compétence a passé ces contrôles dans 6/6. Le prompt d'une phrase n'a enregistré la timeline que dans 2 exécutions sur 6 (échec sur les tâches de titre cinétique et de compteur), même s'il donnait correctement la durée et les attributs racine.
- Tâche de titre cinétique : la compétence comme le témoin ont échoué au contrôle du stagger mot par mot dans 2/2 exécutions (ils utilisaient des tweens séparés par mot) ; le prompt d'une phrase utilisait le stagger dans 2/2. Ce contrôle est étroit, la différence relève donc en partie du style de code.
- Tokens : compétence 137k, prompt d'une phrase 87k, témoin 131k par exécution. La compétence rend les exécutions plus fiables au coût en tokens du témoin, pas à moindre coût, et le prompt d'une phrase coûte 36 % de moins que l'un ou l'autre.
- La compétence est volumineuse (environ 133 fichiers installés dans le dossier de travail, avec des règles, des plans et des techniques). Les exécutions avec compétence lisaient à la fois hyperframes-animation et hyperframes-core : la compétence renvoie donc à
hyperframes-core, et une partie de ce gain tient au contrat de cette compétence core.
Scores par dimension
| Dimension | Score | Pourquoi |
|---|---|---|
| 1_output_quality | 4.92 | Score moyen de 4.92/5 avec la compétence (contrôles programmatiques, voir le tableau par tâche). |
| 2_lift_vs_no_skill | 3.16 | +1.16 point par rapport à 3.76 sans la compétence (n=2 par tâche ; moins d'environ 1 point relève du bruit). |
| 3_trigger | 5.0 | Fichier de compétence lu dans 6/6 exécutions avec compétence. |
| 4_instructions_portability | 4 | SKILL.md et de nombreux fichiers de référence ; spécifique à HyperFrames. |
| 5_efficiency | 5 | 1.05x de tokens (137k contre 131k par exécution) et 0.96x de temps (70s contre 72s). |
| 6_safety_hygiene | 4 | Texte et règles uniquement ; voir security.md. |
Limites de ce test
- Contrôles statiques sur le texte HTML/GSAP ; aucune image n'a été rendue (la CLI hyperframes, Chrome et FFmpeg n'ont pas été exécutés), le minutage et la qualité visuelle ne sont donc pas mesurés.
- Testée au commit 207c8a4 car la HEAD ne contient plus la compétence ; la commande d'installation peut ne pas fonctionner sur le dépôt actuel.
- Le contrôle du stagger n'accepte que l'option
staggerde GSAP, pas les décalages équivalents mot par mot. - n=2 par cellule.
- n = 2 par groupe et par tâche : les écarts inférieurs à environ 1 point relèvent du bruit.
- Le score basé sur des règles mesure ce que les contrôles peuvent voir ; il ne peut juger du goût ni du caractère optimal d'un résultat.
Sécurité
Voir security.md. Analyse : 17 CRITICAL / 17 HIGH / 148 MEDIUM. Verdict : sûr à exécuter (sandbox sans réseau). Une analyse propre ne prouve pas qu'une compétence est sûre.
En bref
Avec la compétence, les compositions respectent presque toujours le contrat HyperFrames ; sans elle, la racine et l'enregistrement de la timeline sont généralement erronés. Un paragraphe énonçant les règles rattrape l'essentiel pour moins de tokens. La compétence n'étant plus dans le dépôt de l'éditeur, considérez ce résultat comme un compte rendu de cette version antérieure.
Transcription
Journal d'exécution : hyperframes-animation (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Colonnes : tâche, groupe-exécution, score (0-5), tokens, secondes, vérifications réussies, fichiers de la skill ouverts par l'agent. t1-kinetic control-1: score 3.5, tokens 128548, s 60.2, vérifications 7/10, rien ouvert t1-kinetic control-2: score 3.5, tokens 99223, s 66.5, vérifications 7/10, rien ouvert t1-kinetic oneliner-1: score 4.25, tokens 79255, s 64.5, vérifications 9/10, rien ouvert t1-kinetic oneliner-2: score 4.25, tokens 75639, s 62.9, vérifications 9/10, rien ouvert t1-kinetic treatment-1: score 4.75, tokens 106794, s 54.6, vérifications 9/10, ouvert hyperframes-animation,hyperframes-core t1-kinetic treatment-2: score 4.75, tokens 181725, s 64.4, vérifications 9/10, ouvert hyperframes-animation,hyperframes-core t2-transition control-1: score 3.57, tokens 139995, s 89.6, vérifications 8/11, rien ouvert t2-transition control-2: score 3.57, tokens 164538, s 97.6, vérifications 8/11, rien ouvert t2-transition oneliner-1: score 5.0, tokens 98384, s 101.1, vérifications 11/11, rien ouvert
18 exécutions, 21 artefacts
Exemple de sortie
SOTA · With the skill: index.html (t1-kinetic, run 1, Codex)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Build. Ship. Repeat.</title> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #080b10; color: #f5f7f5; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; } .clip { position: absolute; inset: 0; } .background { background: #080b10; } .glow { position: absolute; left: 310px; top: 140px; width: 1300px; height: 800px; border-radius: 50%; background: radial-gradient(ellipse, #167b60 0%, #0d463e 32%, transparent 70%); opacity: .24; } .grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 120px 120px; mask-image: radial-gradient(ellipse, black, transparent 72%); } .content { display: flex; align-items: center; justify-content: center; flex-direction: column; } .headline { display: flex; align-items: baseline; justify-content: center; gap: 34px; margin: 0; width: 1720px; font-size: 160px; font-weight: 850; letter-spacing: -9px; line-height: 1.15; } .word { display: block; flex: 0 0 auto; transform-origin: 50% 65%; opacity: 0; } #repeat { color: #b7f676; } .subtitle { margin: 38px 0 0; font-size: 34px; font-weight: 400; letter-spacing: 1px; color: #b9c5c2; opacity: 0; } .beats { position: absolute; bottom: 210px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; } .beat { display: block; width: 38px; height: 4px; background: #b7f676; opacity: .15; transform-origin: left center; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"> <div class="clip background" data-start="0" data-duration="6" data-track-index="0" aria-hidden="true"> <div class="glow" id="glow"></div> <div class="grid"></div> </div> <section class="clip content" data-start="0" data-duration="6" data-track-index="1"> <h1 class="headline" aria-label="Build. Ship. Repeat."><span class="word" id="build">Build.</span><span class="word" id="ship">Ship.</span><span class="word" id="repeat">Repeat.</span></h1> <p class="subtitle" id="subtitle">The loop that never stops</p> <div class="beats" aria-hidden="true"><i class="beat"></i><i class="beat"></i><i class="beat"></i></div> </section> </div> <script> // Every visual change belongs to this single, frame-seekable timeline. const tl = gsap.timeline({ paused: true }); const beats = [0.25, 0.95, 1.65]; tl.fromTo('#glow', { scale: 0.88, x: -65, opacity: 0.24 }, { scale: 1.12, x: 65, opacity: 0.40, duration: 6, ease: 'sine.inOut' }, 0); tl.fromTo('#build', { scale: 1.65, y: -55, opacity: 0 }, { scale: 1, y: 0, opacity: 1, duration: 0.32, ease: 'power4.out' }, beats[0]); tl.fromTo('#ship', { scale: 1.35, x: 95, opacity: 0 }, { scale: 1, x [... excerpt: first 3200 of 4167 characters]