Instalação de plugins: Antes de comandos de configuração ou atualização, siga as regras de execução de plugins quando este skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.
Animação HyperFrames
Todo conhecimento de movimento em um único skill: regras (receitas atômicas), blueprints (modelos de cena multifásicos), transições (entre cenas), técnicas (padrões mais amplos de motion design) e adaptadores (APIs por runtime).
Para o contrato de composição (atributos de dados, subcomposições, determinismo), consulte hyperframes-core.
Padrão: compor regras atômicas
Escolha 2-4 regras de rules-index.md, junte-as com uma única timeline GSAP pausada, pronto. Isso é mais rápido e produz menos código do que começar com um blueprint.
Carregue um blueprint quando
- A cena corresponde a um modelo multifásico pré-projetado existente (revelação de marca, prova social, etc.) e reutilizar seu pipeline de fases economiza tempo de autoria
- Você deseja um código executável e de referência para uma coreografia complexa de 4-5 fases
Os blueprints estão em blueprints-index.md. Cada entrada aponta para blueprints/<id>.md (receita). Não o leia especulativamente; carregue-o somente quando já tiver decidido que precisa de orquestração em nível de cena.
Roteamento
| Quer… | Leia |
|---|---|
| Escolher um padrão de movimento atômico por gatilho / tag | rules-index.md |
| Ler a receita completa de HTML / CSS / GSAP de uma regra | rules/<name>.md |
| Escolher um modelo de cena multifásico | blueprints-index.md |
| Ler a receita completa de um blueprint | blueprints/<id>.md |
| Criar uma transição de cena (orientada a CSS, entre dois clipes) | transitions/overview.md, transitions/catalog.md |
| Consultar uma técnica mais ampla de motion design | techniques.md |
| Desfoque de movimento — rastro de obturador em um elemento, e quando não usá-lo | references/motion-blur.md |
| Analisar o mapa de animação de uma composição existente | scripts/animation-map.mjs |
| API GSAP — timeline / tweens / parâmetros de posição | adapters/gsap.md |
| GSAP — receitas de efeitos prontas para uso | rules/gsap-effects.md |
| GSAP — transformações / desempenho | adapters/gsap-transforms-and-perf.md |
| GSAP — easings / stagger | adapters/gsap-easing-and-stagger.md |
| GSAP — timeline / labels | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (exportações do After Effects, window.__hfLottie) | adapters/lottie.md |
| Animação de personagem (ciclo de caminhada, mascote, fantoche articulado, gestos) | adapters/lottie.md → Personagens |
Three.js / WebGL (cenas 3D, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
CSS keyframes (animation-delay / play-state / fill-mode) | adapters/css-animations.md |
Web Animations API (element.animate(), currentTime seek) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, pipelines de computação) | adapters/typegpu.md |
HTML-como-textura + WebGL/GLSL pós-efeitos (capturar DOM ao vivo via drawElementImage) | adapters/html-in-canvas-patterns.md |
Efeitos nomeados de animação de texto (24 IDs via skill externo animate-text) | adapters/animate-text.md |
Escolhendo um runtime
- GSAP é o padrão para 95% do trabalho de movimento — abrange orquestração de timeline, transformações, easing, stagger. Todas as regras atômicas neste skill são baseadas em GSAP.
- Lottie quando um ativo tem sua própria timeline pré-definida (tipicamente exportações do After Effects), incluindo personagens que andam, gesticulam ou reagem.
- Three.js para cenas 3D, movimento de câmera, visuais orientados por shader.
- Anime.js para tweens leves quando GSAP é exagerado.
- CSS para motivos repetidos simples, decoração, brilho — sem custo de animação JavaScript.
- WAAPI para keyframes nativos do navegador sem dependência do GSAP.
- TypeGPU / WebGPU para canvases renderizados por GPU (partículas, vidro líquido, shaders personalizados).
Múltiplos runtimes podem coexistir em uma única composição. Cada um registra suas instâncias no global específico do runtime para que o HyperFrames possa buscar todos em uma única passada.
Restrições Críticas
Pré-requisito: hyperframes-core → Regras Inegociáveis (timeline única pausada, data-duration governa a duração, sem Math.random / Date.now / performance.now, sem repeat: -1, sem gsap.set no carregamento da página para clipes de cenas posteriores, sem tweens de display ou visibility brutos, e sem construção de timeline dentro de async / setTimeout / Promise). autoAlpha do GSAP e configurações de visibilidade de duração zero em limites explícitos da timeline permanecem permitidos pelo core. Use essas exceções apenas em elementos que não são clipes ou wrappers dentro de um clipe; o framework é dono do ciclo de vida .clip. Não reafirme o contrato completo aqui.
Adições de artesanato de animação sobre o contrato do core:
- Constantes de layout pré-calculadas — nunca derive posições de
getBoundingClientRect()no momento do tween. Medições de DOM no momento do tween dessincronizam porque o renderizador amostra em paralelo; calcule coordenadas uma vez na configuração da composição e reutilize. - Movimento espacial usa apenas aliases de transformação do GSAP (
x,y,scale,rotation). A lista de permissões do core também permiteopacity/color/backgroundColor/borderRadiuspara tweens de propriedades não espaciais — mas nuncawidth/height/top/leftpara mudanças de layout.
Scripts
node skills/hyperframes-animation/scripts/animation-map.mjs <diretório-da-composição> \
--out <diretório-da-composição>/.hyperframes/anim-map
Lê cada timeline GSAP registrada em window.__timelines, enumera tweens, amostra bboxes, calcula flags, gera animation-map.json. Use para auditar coreografia (zonas mortas, consistência de stagger, avisos de ciclo de vida) após a autoria.
animation-map.mjs resolve pacotes auxiliares do projeto atual primeiro, depois pode inicializar a versão do pacote HyperFrames incluído. Defina HYPERFRAMES_SKILL_PKG_VERSION=<versão> apenas ao executar o skill fora da CLI/instalação do skill incluída e você precisar fixar explicitamente essa versão de inicialização.
Veja Também
hyperframes-core— estrutura de composição, atributos de dados, subcomposições, contrato de renderização determinísticahyperframes-creative— paletas, tipografia, narração, planejamento de batidas (direção criativa não relacionada a animação)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render