Instalação do plugin: Antes dos comandos de configuração ou atualização, siga as regras de execução do plugin quando esta skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.
Animação HyperFrames
Todo o conhecimento de movimento em uma skill: regras (receitas atômicas), blueprints (modelos de cena multifase), transições (cena para cena), 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 a 4 regras de rules-index.md, junte-as em uma única timeline GSAP pausada. Isso é mais rápido e produz menos código do que começar de um blueprint.
Carregue um blueprint quando
- A cena corresponde a um modelo multifase pré-projetado existente (revelação de marca, prova social, etc.) e reutilizar seu pipeline de fase economiza tempo real de autoria.
- Você deseja um código funcional e confiável para uma coreografia complexa de 4 a 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 quando já tiver decidido que precisa de orquestração em nível de cena.
Roteamento
| Deseja… | Leia |
|---|---|
| Escolher um padrão de movimento atômico por gatilho / tag | rules-index.md |
| Ler a receita HTML / CSS / GSAP completa de uma regra | rules/<nome>.md |
| Escolher um modelo de cena multifase | 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 — arrasto 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 — eases / stagger | adapters/gsap-easing-and-stagger.md |
| GSAP — timeline / labels | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (exportações 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 |
Keyframes CSS (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 + pós-efeitos WebGL/GLSL (capturar DOM ao vivo via drawElementImage) | adapters/html-in-canvas-patterns.md |
Efeitos de animação de texto nomeados (24 IDs via skill externa animate-text) | adapters/animate-text.md |
Escolhendo um runtime
- GSAP é o padrão para 95% do trabalho de movimento — cobre orquestração de timeline, transformações, easing, stagger. Todas as regras atômicas nesta skill são baseadas em GSAP.
- Lottie quando um ativo tem sua própria timeline pré-definida (tipicamente exportações 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 tweening leve quando GSAP é exagero.
- CSS para motivos repetidos simples, decoração, brilho — sem custo de animação JavaScript.
- WAAPI para keyframes nativos do navegador sem dependência de GSAP.
- TypeGPU / WebGPU para canvases renderizados por GPU (partículas, vidro líquido, shaders personalizados).
Múltiplos runtimes podem coexistir em uma 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 em clipes de cenas posteriores, sem tweens de display ou visibility bruta, e sem construção de timeline dentro de async / setTimeout / Promise). autoAlpha do GSAP e conjuntos de visibilidade com duração zero em limites explícitos de timeline permanecem permitidos pelo core. Use essas exceções apenas em elementos não-clipe ou wrappers dentro de um clipe; o framework é dono do ciclo de vida de .clip. Não reafirme o contrato completo aqui.
Adições de artesanato de animação além do 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 e gera animation-map.json. Use-o para auditar a 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 empacotado. Defina HYPERFRAMES_SKILL_PKG_VERSION=<versão> apenas ao executar a skill fora da instalação empacotada do CLI/skill e você precisa fixar essa versão de inicialização explicitamente.
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 batida (direção criativa não-animação)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render