hyperframes (heygen-com/hyperframes)
Cria, edita, anima e renderiza vídeos HyperFrames, de filmes de lançamento e explicadores a gráficos e legendas.
Skill HyperFrames: mesma qualidade de vídeo de sem skill, mas 1.9x os tokens e uma estrutura de projeto mais editável
Codex CLI · gpt-6-astra
19.9 / 30
Ganho sobre sem skill: -0.01 · Situacional · 18 execuções
Situacional: o total 19.9/30 está abaixo de 22 e o ganho -0.01 está abaixo de +1.0. Para ser recomendado, é preciso total de 22/30, qualidade da saída de 3.5 e ganho de +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
- 2.0
- Qualidade da saída
- 4.9
- Custo de tokens e tempo
- 2.0
- Instalação e portabilidade
- 3.0
- Segurança
- 3.0
Revisão de segurança
AtençãoVarredura estática: 27 CRÍTICO / 26 ALTO / 88 MÉDIO. Revisão manual: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que a skill é segura.
Instalar
npx skills@latest add heygen-com/hyperframes --skill hyperframes
Commit fixado: af0d68d612ebd9c419f27d9ebc8068512667bae4
Testado: 2026-11-02
O que testamos
- Teaser de produto de 15 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um teaser de produto de 15 segundos, 1920x1080, 30 fps, para a Tidepool, uma assinatura mensal de petiscos de algas. Texto obrigatório na tela: o nome 'Tidepool',…
- Vídeo explicativo animado com gráfico de barras de 20 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um vídeo explicativo animado de 20 segundos, 1920x1080, 30 fps: um gráfico de barras da receita mensal (Aug $42k, Sep $58k, Oct $71k). Título 'Revenue, last 3 months'…
- Short vertical com legendas de 30 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por npx hyperframes render), crie um short vertical para redes sociais de 30 segundos, 1080x1920, 30 fps, com legendas embutidas. Legendas, na ordem, cada uma na tela por cerca de 5 segundos começando em…
Prós
- A skill foi acionada sem ser nomeada: o arquivo da skill foi lido em 6/6 execuções de tratamento.
- Qualidade absoluta alta com a skill: 4.89 de 5.
Contras
- Nenhum ganho mensurável em relação ao grupo sem skill (-0.01, dentro do ruído).
- Um prompt de uma frase tirou 4.91, contra 4.89 com a skill (-0.01).
- Usa 1.95x os tokens do grupo sem skill.
- O controle já tira 4.9: efeito teto, então o teste não consegue mostrar ganho.
- Ressalva do teste: avalia apenas a orientação da skill: o ciclo da CLI do hyperframes (check, preview, render) não estava disponível no sandbox. A CLI é um pacote npm separado que não auditamos nem executamos, e ela envia telemetria de uso a menos que seja desativada. As skills irmãs hyperframes-core e hyperframes-animation foram testadas no commit mais antigo 207c8a4; esta, no af0d68d.
- 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 uma máquina de teste Mac, 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). Ambiente: o template do projeto (index.html com a tag de script do GSAP, metadados da composição) é o mesmo para todos os grupos. O sandbox não tem rede nem a CLI do HyperFrames, então nenhum dos grupos conseguiu rodar check, snapshot ou render; eles escreveram apenas o código-fonte. Depois, renderizamos todos os projetos em outra máquina offline com o HyperFrames 0.8.226 fixado (qualidade draft). Isso testa o texto da skill, não o ciclo da CLI.
Comparação entre os braços
| Braço | Nota média (0-5) | Tokens por execução |
|---|---|---|
| Sem a skill | 4.9 | 128k |
| Prompt de uma frase | 4.91 | 150k |
| Com a skill | 4.89 | 249k |
Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 19.9 / 30, veredito Situacional.
Divulgação: Avalia apenas a orientação da skill: o loop da CLI do hyperframes (check, preview, render) não estava disponível no sandbox. A CLI é um pacote npm separado que não auditamos nem executamos, e ela envia telemetria de uso a menos que seja desativada. As skills irmãs hyperframes-core e hyperframes-animation foram testadas no commit mais antigo 207c8a4; esta, em af0d68d.
Veredito: Situacional (19.9 / 30). Fonte: heygen-com/hyperframes, skills/hyperframes, fixada no commit af0d68d. Instalação: npx skills@latest add heygen-com/hyperframes --skill hyperframes. Licença: Apache-2.0.
O que é
A skill hyperframes de heygen-com/hyperframes (Apache-2.0): um SKILL.md de 1,100 palavras mais ~25 arquivos de referência e alguns scripts auxiliares, para criar vídeos como HTML que é renderizado em MP4 avançando uma timeline GSAP pausada quadro a quadro. Ela define um contrato de renderização de 12 regras (todo elemento com tempo é class="clip" com data-start/data-duration, uma timeline pausada registrada em window.__timelines, nada não determinístico), uma estrutura editável (uma cena por subcomposição) e um ciclo de trabalho em torno da CLI npx hyperframes (check, snapshot, preview, render).
Como testamos
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um Mac de teste, um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (grupo com skill), 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 desativada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pela formulação indicada abaixo).
Ambiente: o template do projeto (index.html com a tag de script do GSAP, metadados da composição) é o mesmo para todos os grupos. O sandbox não tem rede nem CLI do HyperFrames, então nenhum dos grupos pôde rodar check, snapshot ou render; eles apenas escreveram o código-fonte. Depois renderizamos cada projeto em uma máquina offline separada com o HyperFrames 0.8.226 fixado (qualidade de rascunho). Isso testa o texto da skill, não seu ciclo de CLI.
- Teaser de produto de 15 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por
npx hyperframes render), crie um teaser de produto de 15 segundos, 1920x1080, 30 fps, para a Tidepool, uma assinatura mensal de snacks de algas. Texto obrigatório na tela: o nome 'Tidepool',… - Explicativo animado de gráfico de barras de 20 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por
npx hyperframes render), crie um explicativo animado de 20 segundos, 1920x1080, 30 fps: um gráfico de barras da receita mensal (ago $42k, set $58k, out $71k). Título 'Revenue, last 3 months… - Short vertical legendado de 30 s — Neste projeto HyperFrames (composição raiz index.html, timeline GSAP, renderizado por
npx hyperframes render), crie um short social vertical de 30 segundos, 1080x1920, 30 fps, com legendas queimadas. Legendas, em ordem, cada uma na tela por cerca de 5 segundos começando em…
A pontuação é programática (testes ocultos / detecção de problemas plantados / verificações de restrições / renderização+OCR quando aplicável), de 0 a 5 por execução. Nenhum juiz LLM decidiu qualquer nota.
Resultados
A frase única dada ao terceiro grupo: "Crie como uma composição HTML do HyperFrames: uma raiz com data-composition-id/data-width/data-height/data-duration, todo elemento com tempo recebendo class="clip" mais data-start e data-duration em segundos, uma timeline GSAP pausada registrada como window.__timelines["<composition-id>"], e nada não determinístico (sem Date.now(), Math.random() sem seed, timers, rede ou repeat:-1)."
| Tarefa | Nota do controle | Uma frase | Com a skill | Tokens do controle | Tokens da frase | Tokens com a skill | Skill lida |
|---|---|---|---|---|---|---|---|
| t1-teaser | 5.0 | 5.0 | 4.97 | 140k | 173k | 364k | 2/2 |
| t2-chart | 4.71 | 4.72 | 4.71 | 125k | 116k | 184k | 2/2 |
| t3-vertical | 5.0 | 5.0 | 5.0 | 117k | 158k | 197k | 2/2 |
Nota média: 4.9 sem vs 4.89 com a skill (delta -0.01). Tokens por execução: 128k vs 249k (1.95x); tempo 154s vs 208s. Grupo de uma frase: 4.91 (ganho da skill sobre a frase: -0.01; ganho da própria frase sobre sem skill: +0.0); tokens da frase: 150k por execução, então a skill custa 1.67x a frase.
O que aconteceu
- A qualidade dos vídeos foi a mesma. Todos os 18 projetos renderizaram com o tamanho, o comprimento e a taxa de quadros corretos de primeira, e o texto obrigatório (nome, slogan, $14 / caixa, frase de encerramento, legendas) foi encontrado na tela pelo OCR em toda execução que deveria tê-lo. Nota média 4.90 sem a skill, 4.91 só com a versão de uma frase de suas regras, 4.89 com a skill. Os únicos pontos perdidos, nos três grupos, vêm do fato de o explicativo de gráfico de barras ficar parado por longos trechos (quadros com movimento de 15-23%).
- A versão de uma frase foi tão bem quanto a skill. Dar ao agente de controle uma única frase do contrato (classe clip, data-start/data-duration, uma timeline pausada, nenhum código não determinístico) produziu as mesmas notas e a mesma aparência: vimos folhas de contato do teaser, do gráfico e do short vertical dos três grupos e não conseguimos classificá-los por qualidade.
- A skill é lida sempre (6/6 execuções com a skill), mas muda como o projeto é construído, não como ele se parece. Todas as 6 execuções com a skill dividiram o filme em subcomposições (compositions/*.html, uma por cena) como pede sua seção 'mantenha editável'; Nenhuma das 12 execuções sem a skill fez isso. Marcar elementos com tempo como
clips variou por grupo, não por skill: as execuções sem skill usaram 0-6 por projeto, as com skill 1-9, e as da frase 3-25. Essa é a parte da skill que importa se alguém for abrir o projeto no HyperFrames Studio depois, e não é pontuada aqui. - Custa caro. 249k tokens por execução contra 128k sem a skill (1.94x) e 150k com a frase (1.66x), 15 comandos por execução contra 8, e cerca de 35% mais tempo. O agente lê o SKILL.md e vários arquivos de referência primeiro e, no modo autônomo, ainda escreve
SPEC.md,REVIEW.mde um README que ninguém pediu (4.7 arquivos por execução contra 1). - Parte da skill não pôde rodar. O ciclo do SKILL.md é check, snapshot, review e então render; sem CLI disponível, os agentes recorreram a arquivos REVIEW.md escritos à mão. Um ambiente com a CLI funcionando poderia mostrar um resultado diferente e talvez pegar erros que os projetos daqui, feitos de primeira, não tinham.
Notas por dimensão
| Dimensão | Nota | Por quê |
|---|---|---|
| 1_output_quality | 4.89 | Nota média 4.89/5 com a skill (verificações programáticas, veja a tabela por tarefa). |
| 2_lift_vs_no_skill | 1.99 | -0.01 pontos vs 4.90 sem a skill (n=2 por tarefa; abaixo de ~1 ponto é ruído). |
| 3_trigger | 5.0 | Arquivo da skill lido em 6/6 execuções com a skill. |
| 4_instructions_portability | 3 | Depende da CLI |
| 5_efficiency | 2 | 1.95x tokens (249k vs 128k por execução) e 1.35x tempo (208s vs 154s). |
| 6_safety_hygiene | 3 | Texto e scripts revisados: apenas menções de documentação a
|
Limitações deste teste
- O ciclo da CLI (check, snapshot, preview, render) não estava disponível no sandbox, então isto avalia apenas a orientação da skill; a própria premissa da skill é que a CLI fecha o ciclo.
- Três tarefas: um teaser de produto, um gráfico de três barras e um short vertical legendado, todos desenhados em código. Filmagens, áudio, mapas, blocos do registry e os recursos de mídia baseados no HeyGen não foram testados.
- Renderizações em qualidade de rascunho em uma máquina Linux; a verificação de movimento é um limiar grosseiro de diferença entre quadros e a mesma tarefa de gráfico perde pontos em todos os grupos.
- As contagens estruturais (subcomposições, elementos clip) vêm da leitura dos arquivos-fonte e não fazem parte da nota de 0-30.
- A licença é Apache-2.0, mas a CLI em que a skill se apoia é um pacote npm separado que não auditamos nem rodamos no computador de teste; ela envia telemetria de uso a menos que seja desativada.
- 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 avalia gosto nem se o resultado é o melhor possível.
Segurança
Veja security.md. Varredura: 27 CRITICAL / 26 HIGH / 88 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que a skill é segura.
Conclusão
Para vídeos avulsos desenhados em código neste sandbox, a skill não deixou os vídeos melhores e custou cerca do dobro dos tokens; uma frase do seu contrato fez o mesmo trabalho. Seu valor está na estrutura do projeto (uma cena por subcomposição, clipes marcados) para quem vai continuar editando no HyperFrames Studio, e no ciclo de CLI que não pudemos exercitar. Instale se você trabalha com HyperFrames regularmente; pule para renderizações rápidas e descartáveis.
Transcrição
Log de execuções: hyperframes (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-teaser control-1: nota 5.0, tokens 158742, s 258.0, verificações 5/5, nada aberto t1-teaser control-2: nota 5.0, tokens 122491, s 163.4, verificações 5/5, nada aberto t1-teaser oneliner-1: nota 5.0, tokens 194827, s 274.5, verificações 5/5, nada aberto t1-teaser oneliner-2: nota 5.0, tokens 151350, s 215.4, verificações 5/5, nada aberto t1-teaser treatment-1: nota 4.94, tokens 359882, s 360.9, verificações 5/5, abriu hyperframes t1-teaser treatment-2: nota 5.0, tokens 370088, s 251.3, verificações 5/5, abriu hyperframes t2-chart control-1: nota 4.73, tokens 159545, s 126.0, verificações 4/5, nada aberto t2-chart control-2: nota 4.69, tokens 91764, s 107.4, verificações 4/5, nada aberto t2-chart oneliner-1: nota 4.74, tokens 118117, s 146.0, verificações 4/5, nada aberto
18 execuções, 21 artefatos
Resultado de exemplo
SOTA · With the skill: compositions/arrival.html (t1-teaser, run 1, Codex)
<template> <style>*{box-sizing:border-box}#root{position:absolute;inset:0;font-family:Arial,Helvetica,sans-serif;color:#173E32}.stage,.artboard{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden}.artboard{background:#F5F0DF}h1,h2,p{margin:0}.eyebrow{font-size:24px;font-weight:700;letter-spacing:4px;text-transform:uppercase}.rule{height:2px;background:currentColor;opacity:.3}.pouch{position:absolute;width:470px;height:650px}.pouch svg{width:100%;height:100%}.wipe{position:absolute;z-index:20}.serial{position:absolute;left:192px;top:930px;font-size:22px;letter-spacing:3px}.wordmark{font-weight:900;letter-spacing:-8px}.chip{position:absolute;width:400px;height:472px}.chip svg{width:100%;height:100%} </style> <div id="root" data-composition-id="arrival" data-width="1920" data-height="1080" data-duration="5"> <div id="arrival-stage" class="clip stage" data-start="0" data-duration="5" data-track-index="0" data-track-kind="graphics"><div class="artboard"> <svg id="arrival-rings" width="1920" height="1080" style="position:absolute" aria-hidden="true"><g fill="none" stroke="#173E32" stroke-width="2" opacity=".16"><ellipse cx="1450" cy="530" rx="335" ry="335"/><ellipse cx="1450" cy="530" rx="445" ry="445"/><ellipse cx="1450" cy="530" rx="560" ry="560"/></g></svg> <div id="arrival-kicker" class="eyebrow" style="position:absolute;left:192px;top:202px">Meet your monthly ocean fix</div> <div style="position:absolute;left:192px;top:299px;overflow:hidden;width:1000px;height:220px"><h1 id="arrival-title" class="wordmark" data-var-text="brand" style="font-size:192px;line-height:1.1">Tidepool</h1></div> <p id="arrival-copy" data-var-text="tagline" style="position:absolute;left:194px;top:555px;width:820px;font-size:48px;line-height:1.25;letter-spacing:-1px">Crisp seaweed snacks, delivered monthly</p> <div id="arrival-rule" class="rule" style="position:absolute;left:194px;top:750px;width:710px"></div> <p id="arrival-note" style="position:absolute;left:194px;top:785px;font-size:24px;letter-spacing:2px">FROM THE SEA. TO YOUR SNACK DRAWER.</p> <div id="arrival-pouch" class="pouch" style="left:1190px;top:201px"><svg viewBox="0 0 470 650" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Illustrated Tidepool seaweed snack pouch"><defs><linearGradient id="a-foil" x1="0" x2="1"><stop stop-color="#BACA99"/><stop offset=".12" stop-color="#E3E8BC"/><stop offset=".7" stop-color="#D7DFAE"/><stop offset="1" stop-color="#AABA8C"/></linearGradient><pattern id="a-seal" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M0 0V8" stroke="#173E32" opacity=".2" stroke-width="2"/></pattern></defs><path d="M40 15Q235 0 430 15L420 68Q436 350 445 605Q235 640 25 605L48 68Z" fill="url(#a-foil)" stroke="#173E32" stroke-width="3"/><path d="M40 15Q235 0 430 15L425 50H44Z" fill="url(#a-seal)"/><path d="M30 580Q235 600 441 580L445 605Q235 640 25 605Z" fill="url(#a-seal)"/><path d="M48 68H420" stroke="#173E32" stroke-width="3" opacity=".4"/><path d="M64 82L47 565M405 80L423 564" stroke="#FFFBE2" stroke-width="4" opacity=".6"/><text x="235" y="157" text-anchor="middle" fill="#173E32" font-family="Arial, sans-serif" font-size="71" font-weight="900" letter-spacin [... excerpt: first 3200 of 5490 characters]