hyperframes-keyframespor HeyGen

HyperFrames Keyframes Skill.

Uma skill para Claude Code e Codex voltada a movimento e vídeo: punch-ins, zooms, reenquadramentos, movimentos Ken Burns e keyframes 2D/3D para HyperFrames.

Motion e Vídeo
Video

Baixar OpenDesign Ver guia de uso

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

--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms

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

01 O que faz

O que o Skill hyperframes-keyframes Faz no Claude Code e no 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

Trata punch-ins, punch-outs, zooms, reenquadramentos, movimentos Ken Burns, movimentos de câmera, transições de match/whip visuais e keyframes 2D/3D seguros para seek em composições HyperFrames. Suporta GSAP, keyframes CSS, Anime.js, WAAPI, FLIP, paths, máscaras, morph/draw SVG, rastros de texto e profundidade 3D. Keyframes são um contrato de pose: estados visíveis, identidade contínua do sujeito, runtime seguro para seek, pixels verificados.

Concentra-se no movimento visual dentro dos clipes, não na montagem de clipes ou na estratégia de cena. Requer construção de runtime síncrona, instâncias de timeline registradas e temporização determinística. Os autores verificam com hyperframes lint, check, o comando keyframes, diagnósticos focados --shot e snapshots nos momentos de prova.

O que ele produz

Instância de timeline GSAP registrada em window.__timelines[compositionId] com paused: true

Veja o exemplo de prompt ↗

Como funciona

01
Identificar o Sujeito e os Estados
Identifique o sujeito animado, os estados visíveis, o estado final e o runtime antes de criar os keyframes.
02
Escolher o Mecanismo Mais Simples
Escolha o mecanismo mais simples que comprove o prompt, consultando references/keyframe-patterns.md apenas se o mecanismo não estiver claro.
03
Criar e Registrar
Crie keyframes seguros para seek no runtime declarado, construindo de forma síncrona e registrando a instância de runtime.
04
Verificar com Diagnósticos
Verifique usando hyperframes lint, check, o comando keyframes, um --shot focado e snapshots nos momentos de prova.
05
Corrigir e Retestar
Se a prova falhar, corrija os keyframes de origem e execute novamente o diagnóstico com falha mais simples antes de renderizar.

02 Encontre o ideal para você

Quando Usar a Skill hyperframes-keyframes

Use a skill hyperframes-keyframes no Claude Code ou Codex quando o trabalho for movimento e vídeo deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

Punch-in ou punch-out com escala e translação em keyframes em um wrapper visual/crop sem tempo próprio dentro do clipe
Zoom ou reenquadramento suave em vários estados, mantendo um único wrapper de sujeito com múltiplos estados como uma escada de poses
Movimento de câmera de pan, reenquadramento ou Ken Burns com translação animada do wrapper mais escala
Movimentos de câmera encadeados com beats de transformação rotulados em uma única timeline registrada e segura para seek
Match cut ou whip pan preservando a geometria, direção e velocidade autoradas

Conheça os Limites

Estratégia ampla de cena, design de marca, obtenção de mídia, legendas ou planejamento geral de vídeo
Cortes rígidos por intervalo de origem, aparar, dividir e reordenar, que pertencem a hyperframes-core
Rampas de velocidade de origem com envelope de taxa de reprodução variável no tempo, que não são suportadas
Quadros congelados arbitrários no meio da origem, que exigem pré-processamento de um segmento estático/derivado

O Que Fornecer

Poses visíveis e estado finalAs poses necessárias para comprovar o movimento pretendido, incluindo o estado final que completa a animação.

03 Dentro da skill

Regras que o skill hyperframes-keyframes dá ao Claude Code e ao Codex

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

Timelines do GSAP Pausadas
As timelines do GSAP devem usar gsap.timeline({ paused: true }), nunca chamar tl.play() para movimento crítico para renderização, e ser registradas como window.__timelines[compositionId] com uma chave correspondente a data-composition-id.
Anime.js com Autoplay False
As instâncias do Anime.js devem ter autoplay: false e ser adicionadas a window.__hfAnime com duration e loops finitos.
Modo de Preenchimento dos Keyframes CSS
Os keyframes CSS exigem duration e iteration count finitos, delay determinístico e animation-fill-mode: both.
Nunca Use Timers ou Random
Nunca use Date.now(), performance.now(), Math.random() sem seed, gatilhos de hover/scroll, timers, timelines criadas de forma assíncrona, requestAnimationFrame não registrado, ou loops infinitos para movimento crítico para renderização.
Faça Keyframe Apenas dos Canais Visíveis
Faça keyframe dos canais visíveis, como x/y/z, scale, opacity, clip-path, masks, e não do estado auxiliar oculto.
Preserve a Identidade do Objeto
Preserve a identidade do objeto quando a continuidade for importante. Use crossfade apenas quando o movimento pretendido for substituição ou dissolução.
O Quadro Final É Parte da Animação
O quadro final é parte da animação, não uma limpeza. Não redefina para o estado de repouso a menos que solicitado. Não termine em preto a menos que solicitado.
Nomeie Sujeitos e Poses
Nomeie o sujeito em movimento e as poses necessárias para comprovar o movimento pretendido, incluindo o estado final.

04 Coloque em prática

Instalar hyperframes-keyframes 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-keyframes 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-keyframes

Forma genérica da CLI skills para skills/hyperframes-keyframes/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

Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

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:

Execute o hyperframes lint para verificar problemas estruturais
Execute o hyperframes check para validar a composição
Execute hyperframes keyframes com --shot e --samples para verificar alvos, paradas, caminhos e espaçamento de tempo
Use --layout strip para comprovar movimento no local, sobreposições, contato e mudanças sutis de escala/opacidade
Use --ghost com --angle para comprovar canvas, WebGL, movimento com shader e projeção de profundidade 3D
Capture o primeiro frame, poses de prova, final-menos-hold e o final exato para verificar máscaras, legibilidade do texto, estado completo e ausência de caudas pretas/reset

No OpenDesign importe hyperframes-keyframes pelo 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-keyframes/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 avaliação ou contagem de uso para hyperframes-keyframes.
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

Limite de edição do criadorKeyframes controlam o movimento visual; o core controla montagem de clipes, corte, splice, offsets de origem e cortes secos
ProcedimentoWorkflow de cinco etapas, da identificação de sujeito e estados até a autoria, verificação e correções guiadas por diagnóstico
ContratoNomeie sujeitos e poses, aplique keyframes aos canais visíveis, preserve a identidade, mantenha estados por tempo suficiente, trate o frame final como animação
Regras de RuntimeTimelines pausadas do GSAP, fill-mode both em CSS, autoplay false no Anime, requisitos de registro, padrões proibidos de timer/random/async
Formas de KeyframeKeyframes em array, keyframes por porcentagem, arrays de propriedade, pai com ease-none e easing por ponto, easeEach para sensação compartilhada
CanaisPrefira canais visuais/de compositor como x/y/scale/opacity; evite canais de layout/ciclo de vida como top/left, width/height, display
Escolha de MecanismoTabela que associa necessidades aos mecanismos mais simples: FLIP, deslocamento por caminho, desenho de traço, interpolação de forma, stagger, subdivisão de texto, 3D
TempoAntecipação, aceleração, prova de pico, follow-through, overshoot, escolha de ease, offsets de stagger, holds finais, velocidade contínua
TextoPreserve caixas de linha, espaçamento entre palavras, legibilidade, ajuste final; mova glifos ou faixas mascaradas; capture frames legíveis
SVGDrawSVGPlugin para crescimento de traço, MorphSVGPlugin para interpolação de forma, converta primitivas em paths, divida silhuetas complexas
3DUse perspective, preserve-3d, deslocamento em z, rotação, movimento de câmera/mundo, ordem de oclusão e camadas; comprove profundidade com ângulos de diagnóstico
Canvas / WebGLAplique keyframes à câmera, transformação de objeto, material, uniforms de shader; renderize a partir do tempo do HyperFrames; use --ghost para prova

A Descrição da Própria Skill

Use quando uma composição HyperFrames precisar de punch-in, punch-out, zoom, reframe, tratamento Ken Burns, movimento de câmera, match visual/whip handoff, ou outros keyframes 2D/3D seek-safe; também para GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, ou diagnósticos `hyperframes keyframes`. Não use para estratégia ampla de cena, design de marca, sourcing de mídia, legendas ou planejamento geral de vídeo.

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

06 Antes de instalar

Perguntas Sobre a Skill hyperframes-keyframes

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Qual é a diferença entre esta skill e a hyperframes-animation?

Esta skill controla a implementação de keyframes e a mecânica de movimento visual. Use hyperframes-animation para receitas de cena amplas e coreografia de handoff visual. Use hyperframes-cli para a documentação completa de comandos. Esta skill foca na autoria, registro e verificação dos keyframes propriamente ditos.

HyperFrames Keyframes

Execute hyperframes-keyframes em uma Tarefa Real de Motion e Vídeo.

Baixe o OpenDesign, importe hyperframes-keyframes a partir do link do 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-keyframes

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

Nos termos do próprio skill

Como funciona

Quando Usar a Skill hyperframes-keyframes

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o skill hyperframes-keyframes dá ao Claude Code e ao Codex

Timelines do GSAP Pausadas

Anime.js com Autoplay False

Modo de Preenchimento dos Keyframes CSS

Nunca Use Timers ou Random

Faça Keyframe Apenas dos Canais Visíveis

Preserve a Identidade do Objeto

O Quadro Final É Parte da Animação

Nomeie Sujeitos e Poses