hyperframes-animationpor HeyGen

HyperFrames Animation Skill.

Uma skill para Claude Code e Codex voltada a movimento e vídeo: regras de animação, blueprints de cena, transições e adaptadores de runtime para HyperFrames.

Motion e Vídeo
Video

Baixar OpenDesign Ver guia de uso

heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

Cabeçalhos de metadados e seção lidos do arquivo upstream em 2026-09-14 · 7.755 caracteres no total

01 O que faz

O que o Skill hyperframes-animation Faz no Claude Code e Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Fornece todo o conhecimento de animação para o HyperFrames: regras atômicas de movimento, blueprints de cenas com múltiplas fases, transições de cena, técnicas de motion design e sete adaptadores de runtime (GSAP como padrão, além de Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Os usuários escolhem 2 a 4 regras atômicas e as combinam em uma única timeline GSAP pausada, ou carregam um blueprint com múltiplas fases para coreografias complexas de 4-5 fases, ou consultam APIs específicas de runtime.

Também cobre a auditoria de composições existentes via animation-map.mjs e 24 efeitos nomeados de animação de texto. O GSAP é o padrão para 95% do trabalho de motion, cobrindo orquestração de timeline, transforms, easing e stagger. Tudo é nativo do HyperFrames: timeline única pausada, seek-safe, determinística.

O que ele produz

animation-map.json contendo dados de auditoria de coreografia com zonas mortas, consistência de stagger e avisos de ciclo de vida

Veja o exemplo de prompt ↗

Como funciona

01
Escolher e Compor Regras Atômicas
Selecione 2 a 4 regras do rules-index.md e combine-as em uma única timeline GSAP pausada. Este é o workflow padrão, mais rápido do que começar a partir de um blueprint.
02
Carregar um Blueprint para Cenas com Múltiplas Fases
Quando a cena corresponder a um template pré-desenhado existente, como brand-reveal ou social-proof, carregue sua receita a partir do blueprints-index.md para reutilizar seu pipeline de fases.
03
Consultar APIs Específicas de Runtime
Use a tabela de roteamento para encontrar eases e controles de timeline do GSAP, métodos do player Lottie, APIs do mixer do Three.js ou outra documentação específica de runtime conforme necessário.
04
Auditar Coreografia com animation-map
Execute animation-map.mjs para ler todas as timelines GSAP, enumerar tweens, amostrar bboxes, calcular flags e gerar animation-map.json para auditar zonas mortas e consistência de stagger.

02 Encontre o ideal para você

Quando Usar a Skill hyperframes-animation

Use a skill hyperframes-animation no Claude Code ou Codex quando o trabalho for motion e vídeo desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Padrões de movimento atômico selecionados por trigger ou tag no rules-index.md
Transições de cena orientadas por CSS entre dois clipes
Cenas 3D, movimento de câmera e visuais orientados por shaders usando Three.js
Canvases renderizados por GPU com partículas, liquid glass ou shaders personalizados usando TypeGPU

Conheça os Limites

Animar width, height, top ou left para mudanças de layout

O Que Fornecer

Diretório de composiçãoInforme o caminho do seu diretório de composição ao executar animation-map.mjs para auditar a coreografia.
ID do blueprintQuando sua cena corresponder a um template com múltiplas fases, informe o ID do blueprint a partir do blueprints-index.md para carregar sua receita completa.

03 Dentro da skill

Regras que o Skill hyperframes-animation Dá ao Claude Code e Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Pré-calcular Constantes de Layout
Nunca derive posições a partir de getBoundingClientRect no momento do tween.
Movimento Espacial Usa Apenas Aliases de Transform do GSAP
Use x, y, scale, rotation para toda movimentação espacial. Nunca anime width, height, top ou left para mudanças de layout.
GSAP É o Runtime Padrão
O GSAP é o padrão para 95% do trabalho de motion, cobrindo orquestração de timeline, transforms, easing e stagger. Todas as regras atômicas nesta skill são baseadas em GSAP.
Componha Regras Atômicas por Padrão
Escolha 2-4 regras de rules-index.md e componha-as. Isso é mais rápido e produz menos código do que partir de um blueprint.
Múltiplos Runtimes Podem Coexistir
Múltiplos runtimes podem coexistir em uma composição. Cada um registra suas instâncias no global específico do runtime para que HyperFrames possa buscar todos eles em uma única passagem.
Não Leia Blueprints Especulativamente
Não leia um arquivo de blueprint especulativamente; carregue-o apenas quando você já tiver decidido que precisa de orquestração no nível de cena.
Propriedades Não Espaciais São Permitidas
A allowlist permite tweens de propriedades não espaciais como opacity, color, backgroundColor e borderRadius, mas nunca width, height, top ou left para mudanças de layout.

04 Coloque em prática

Instalar hyperframes-animation no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar hyperframes-animation ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Forma genérica de CLI skills para skills/hyperframes-animation/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Confirme que todas as instâncias de runtime estão registradas em seus globais específicos de runtime para que o HyperFrames possa buscá-las em uma única passagem

No OpenDesign importe hyperframes-animation a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Arquivo da skill: skills/hyperframes-animation/SKILL.md Checksum de conteúdo registrado na verificação; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 49.761 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório heygen-com/hyperframes, que contém 9 skills neste catálogo. Não é uma classificação ou contagem de uso para hyperframes-animation.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Padrão: componha regras atômicasEscolha 2-4 regras de rules-index.md e componha com a timeline do GSAP, mais rápido do que blueprints
Carregue um blueprint quandoUse quando a cena corresponder a um template multifásico ou precisar de uma coreografia executável de 4-5 fases
RoteamentoTabela que mapeia tarefas para arquivos: rules, blueprints, transitions, techniques, adapters, scripts
Escolhendo um runtimeQuando usar GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU
Restrições CríticasConstantes de layout pré-calculadas, apenas aliases de transform do GSAP, sem tweens de width/height/top/left
ScriptsExecute animation-map.mjs para auditar a coreografia e gerar animation-map.json
Veja TambémLinks para hyperframes-core, hyperframes-creative, hyperframes-cli

A Descrição da Própria Skill

"Todo o conhecimento de animação para HyperFrames — regras de movimento atômico, blueprints de cena multifásica, transições de cena, técnicas mais amplas de motion design E os sete adaptadores de runtime (GSAP padrão, mais Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use para qualquer tarefa de movimento ou animação: escolha 2-4 regras e componha, ou carregue um blueprint, ou consulte API específica de runtime (por exemplo, eases do GSAP / player Lottie / mixer Three.js). Também cobre auditoria da coreografia (mapa de animação) de uma composição existente e 24 efeitos de animação de texto nomeados. Nativo de HyperFrames: única timeline pausada, seek-safe, determinístico."

Descrição de front-matter do SKILL.md. O arquivo completo tem cerca de 7.755 caracteres. Leia o arquivo completo no GitHub.

HyperFrames Animation

Executar hyperframes-animation em uma Tarefa Real de Motion e Vídeo.

Baixe OpenDesign, importe hyperframes-animation de seu link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

O que o Skill hyperframes-animation Faz no Claude Code e Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill hyperframes-animation

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o Skill hyperframes-animation Dá ao Claude Code e Codex

Pré-calcular Constantes de Layout

Movimento Espacial Usa Apenas Aliases de Transform do GSAP

GSAP É o Runtime Padrão

Componha Regras Atômicas por Padrão

Múltiplos Runtimes Podem Coexistir

Não Leia Blueprints Especulativamente

Propriedades Não Espaciais São Permitidas