hyperframes-animation (HeyGen HyperFrames)
Define as regras de tempo e animação de uma composição HyperFrames: atributos data-*, clipes, faixas e subcomposições.
hyperframes-animation: faz composições de animação HyperFrames seguirem o contrato de renderização (controle 3.8, skill 4.9, prompt de uma frase 4.5) ao custo de 1.05x os tokens do controle, mas esta skill foi descontinuada do repositório da HeyGen
Codex CLI · gpt-6-astra
26.1 / 30
Ganho sobre sem skill: +1.16 · Recomendado · 18 execuções
Recomendado: o total 26.1/30 é pelo menos 22, a qualidade da saída 4.9 é pelo menos 3.5 e o ganho +1.16 é pelo menos +1.0.
SOTA
AprovadoTestado com Codex.
Cobre Codex, Claude Code
Codex CLI 0.166 (nível SOTA): 18 execuções avaliadas. Uma aprovação aqui também vale para o Claude Code pela nossa regra de níveis; ela não diz nada sobre o segundo nível.
Notas
Cada dimensão vai de 0 a 5, e as seis somam o total de 30. 5 é melhor em todas as dimensões. Custo 5 significa barato e rápido. Instalação 5 significa fácil.
- Confiabilidade do acionamento
- 5.0
- Ganho sobre sem skill
- 3.2
- Qualidade da saída
- 4.9
- Custo de tokens e tempo
- 5.0
- Instalação e portabilidade
- 4.0
- Segurança
- 4.0
Revisão de segurança
AtençãoVarredura estática: 17 CRÍTICO / 17 ALTO / 148 MÉDIO. Revisão manual: seguro para executar em sandbox sem rede (o BLOCK do scanner é um falso positivo); não execute os scripts dela às cegas. Uma varredura limpa não prova que a skill é segura.
Instalar
npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation
Commit fixado: 207c8a4daf6480d697f203784f1fd422727569e3
Testado: 2026-11-02
O que testamos
- Manchete cinética — Crie uma composição HyperFrames de 6 segundos em 1920x1080 (um framework open-source que renderiza uma página HTML em MP4 percorrendo uma timeline GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN): uma manchete de três palavras ('Build. Ship. Repeat.') em que cada palavra entra com impacto…
- Transição de cena — Crie uma composição HyperFrames de 8 segundos em 1920x1080 (um framework open-source que renderiza uma página HTML em MP4 percorrendo uma timeline GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN) com duas cenas em tela cheia ('Problem' por 4.5s, 'Solution' por 4.5s)…
- Estatística crescente com barra — Crie uma composição HyperFrames de 7 segundos em 1920x1080 (um framework open-source que renderiza uma página HTML em MP4 percorrendo uma timeline GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN): um número grande que sobe de 0 a 87% em 2.5 segundos com uma barra horizontal…
Prós
- Eleva a nota média de 3.76 para 4.92 em relação ao grupo sem skill (+1.16).
- A skill foi acionada sem ser nomeada: o arquivo da skill foi lido em 6/6 execuções de tratamento.
- Sem custo extra de tokens: 1.05x os tokens do grupo sem skill.
- Supera em +0.39 uma versão de uma frase da própria regra.
- Qualidade absoluta alta com a skill: 4.92 de 5.
Contras
- Ressalva do teste: testada no commit 207c8a4 de heygen-com/hyperframes, uma versão mais antiga. A skill foi removida depois do HEAD do repositório, então o comando de instalação pode não funcionar no repositório atual. Ela também lê a hyperframes-core durante as execuções.
- n=2 por tarefa por braço; diferenças abaixo de cerca de 1 ponto são ruído.
Avaliação
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC Windows dedicado a testes, um projeto temporário novo e HOME/TMPDIR/caches temporários por execução, skill instalada (tratamento), ausente (controle) ou ausente com o requisito central da skill condensado em uma frase anexada ao prompt (grupo de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto o texto indicado abaixo). O HyperFrames é descrito em uma frase em cada prompt (página HTML renderizada em MP4 percorrendo uma timeline GSAP). Tarefas: uma manchete cinética de 6 segundos em que três palavras entram com impacto, uma transição de 8 segundos entre duas cenas e um número crescente de 7 segundos com uma barra. O prompt de uma frase enuncia as regras de animação em um parágrafo.
Comparação entre os braços
| Braço | Nota média (0-5) | Tokens por execução |
|---|---|---|
| Sem a skill | 3.76 | 131k |
| Prompt de uma frase | 4.52 | 87k |
| Com a skill | 4.92 | 137k |
Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 26.1 / 30, veredito Recomendado.
Divulgação: Testada no commit 207c8a4 de heygen-com/hyperframes, uma versão mais antiga. A skill foi removida depois do HEAD do repositório, então o comando de instalação pode não funcionar no repositório atual. Ela também lê hyperframes-core durante as execuções.
Veredito: Recomendado (26.1 / 30). Fonte: heygen-com/hyperframes, skills/hyperframes-animation, skills/hyperframes-core, fixada no commit 207c8a4. Instalação: npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation. Licença: Apache-2.0 (LICENSE do repositório).
O que é
A skill hyperframes-animation de heygen-com/hyperframes, testada no commit 207c8a4 (a skill não está mais no HEAD do repositório, então isto descreve uma versão aposentada), traz orientação de animação para composições HyperFrames: uma linha do tempo GSAP pausada registrada em window.__timelines[root id], aliases de transformação do GSAP em vez de propriedades de layout, eases nomeados, stagger para sequências, nada de Math.random/Date.now/timers/rAF/getBoundingClientRect no momento do tween, contadores crescentes animados com tween em um objeto proxy, e cenas com data-start/data-duration cuja soma é coberta pela duração da raiz.
Como testamos
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC Windows dedicado a testes, um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (tratamento) ou ausente (controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo).
O HyperFrames é descrito em uma frase em cada prompt (página HTML renderizada em MP4 avançando por uma linha do tempo GSAP). Tarefas: um título cinético de 6 segundos em que três palavras entram com força, uma transição de duas cenas de 8 segundos e um contador crescente de 7 segundos com uma barra. O prompt de uma frase enuncia as regras de animação em um parágrafo.
- Título cinético — Crie uma composição HyperFrames (um framework de código aberto que renderiza uma página HTML em MP4 avançando por uma linha do tempo GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN) de 6 segundos em 1920x1080: um título de três palavras ('Construa. Entregue. Repita.') em que cada palavra entra com força…
- Transição de cena — Crie uma composição HyperFrames (um framework de código aberto que renderiza uma página HTML em MP4 avançando por uma linha do tempo GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN) de 8 segundos em 1920x1080 com duas cenas em tela cheia ('Problema' por 4.5s, 'Solução' por 4.5s) que…
- Estatística com contador e barra — Crie uma composição HyperFrames (um framework de código aberto que renderiza uma página HTML em MP4 avançando por uma linha do tempo GSAP quadro a quadro; o GSAP vem de uma tag de script de CDN) de 7 segundos em 1920x1080: um número grande que sobe de 0 a 87% ao longo de 2.5 segundos com uma barra horizontal…
A pontuação é programática (testes ocultos / detecção de problemas plantados / verificações de restrições / renderização+OCR quando aplicável), 0–5 por execução. Nenhum juiz LLM decidiu qualquer pontuação.
Resultados
O prompt de uma frase dado ao terceiro grupo: "Em uma composição HyperFrames, use uma linha do tempo GSAP pausada registrada em window.__timelines[root id]; mova as coisas com aliases de transformação do GSAP (x, y, scale, rotation, opacity), nunca width/height/top/left; escolha eases nomeados e use stagger para sequências; nada de Math.random/Date.now/timers/rAF/getBoundingClientRect no momento do tween, nem repeat:-1; anime contadores com um tween no onUpdate de um objeto proxy; cenas são elementos cronometrados com data-start/data-duration e o data-duration da raiz precisa cobri-las."
| Tarefa | Pontuação do controle | Uma frase | Com a skill | Tokens do controle | Tokens de uma frase | Tokens com a skill | Skill lida |
|---|---|---|---|---|---|---|---|
| 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 |
Pontuação média: 3.76 sem a skill vs 4.92 com ela (delta +1.16). Tokens por execução: 131k vs 137k (1.05x); tempo 72s vs 70s. Grupo de uma frase: 4.52 (ganho da skill sobre o prompt de uma frase: +0.39; ganho do próprio prompt de uma frase sobre nenhuma skill: +0.77); tokens do prompt de uma frase: 87k por execução, então a skill custa 1.57x o prompt de uma frase.
O que aconteceu
- Controle 3.76, skill 4.92, uma frase 4.52 (n=6 cada). As falhas mais frequentes do controle são estruturais: o elemento raiz não tinha o conjunto completo id/width/height/duration em 6/6 execuções, e a linha do tempo não foi registrada em window.__timelines em 5/6, então o renderizador do HyperFrames não consegue encontrá-la.
- A skill passou nessas verificações em 6/6. O prompt de uma frase registrou a linha do tempo em apenas 2 de 6 execuções (falhou nas tarefas de título cinético e de contador), embora tenha acertado a duração e os atributos da raiz.
- Tarefa de título cinético: tanto a skill quanto o controle perderam o stagger por palavra em 2/2 execuções na verificação de stagger (usaram tweens separados por palavra); o prompt de uma frase usou stagger em 2/2. Essa verificação é estreita, então a diferença é em parte de estilo de código.
- Tokens: skill 137k, uma frase 87k, controle 131k por execução. A skill torna as execuções mais confiáveis com o custo de tokens do controle, não mais baratas, e o prompt de uma frase é 36% mais barato que qualquer um dos dois.
- A skill é grande (cerca de 133 arquivos instalados na pasta de trabalho, com regras, blueprints e técnicas). As execuções com a skill leram tanto hyperframes-animation quanto hyperframes-core, então a skill aponta para a skill core e parte desse ganho é o contrato do core.
Pontuações por dimensão
| Dimensão | Pontuação | Por quê |
|---|---|---|
| 1_output_quality | 4.92 | Pontuação média 4.92/5 com a skill (verificações programáticas, veja a tabela por tarefa). |
| 2_lift_vs_no_skill | 3.16 | +1.16 pontos vs 3.76 sem a skill (n=2 por tarefa; menos de ~1 ponto é ruído). |
| 3_trigger | 5.0 | Arquivo da skill lido em 6/6 execuções com a skill. |
| 4_instructions_portability | 4 | SKILL.md mais muitos arquivos de referência; específico do HyperFrames. |
| 5_efficiency | 5 | 1.05x tokens (137k vs 131k por execução) e 0.96x tempo (70s vs 72s). |
| 6_safety_hygiene | 4 | Somente prosa e regras; veja security.md. |
Limites deste teste
- Verificações estáticas sobre o texto HTML/GSAP; nenhum frame foi renderizado (a CLI hyperframes, o Chrome e o FFmpeg não foram executados), então a cadência visual e a qualidade não são medidas.
- Testada no commit 207c8a4 porque o HEAD não contém mais a skill; o comando de instalação pode não funcionar no repositório atual.
- A verificação de stagger aceita apenas a opção
staggerdo GSAP, não deslocamentos por palavra equivalentes. - n=2 por célula.
- n = 2 por grupo por tarefa: diferenças abaixo de cerca de 1 ponto são ruído.
- A pontuação baseada em regras mede o que as verificações conseguem ver; não julga bom gosto nem se o resultado é o melhor possível.
Segurança
Veja security.md. Scan: 17 CRITICAL / 17 HIGH / 148 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Um scan limpo não prova que uma skill é segura.
Conclusão
Com a skill, as composições cumprem o contrato do HyperFrames quase sempre; sem ela, a raiz e o registro da linha do tempo geralmente ficam errados. Um parágrafo enunciando as regras recupera a maior parte disso com menos tokens. Como a skill não está mais no repositório do fornecedor, trate o resultado como um registro daquela versão anterior.
Transcrição
Log de execuções: hyperframes-animation (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Colunas: tarefa, grupo-execução, nota (0-5), tokens, segundos, verificações aprovadas, arquivos da skill abertos pelo agente. t1-kinetic control-1: nota 3.5, tokens 128548, s 60.2, verificações 7/10, nada aberto t1-kinetic control-2: nota 3.5, tokens 99223, s 66.5, verificações 7/10, nada aberto t1-kinetic oneliner-1: nota 4.25, tokens 79255, s 64.5, verificações 9/10, nada aberto t1-kinetic oneliner-2: nota 4.25, tokens 75639, s 62.9, verificações 9/10, nada aberto t1-kinetic treatment-1: nota 4.75, tokens 106794, s 54.6, verificações 9/10, abriu hyperframes-animation,hyperframes-core t1-kinetic treatment-2: nota 4.75, tokens 181725, s 64.4, verificações 9/10, abriu hyperframes-animation,hyperframes-core t2-transition control-1: nota 3.57, tokens 139995, s 89.6, verificações 8/11, nada aberto t2-transition control-2: nota 3.57, tokens 164538, s 97.6, verificações 8/11, nada aberto t2-transition oneliner-1: nota 5.0, tokens 98384, s 101.1, verificações 11/11, nada aberto
18 execuções, 21 artefatos
Resultado de exemplo
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]