Instalação via plugin: Antes de executar comandos de configuração ou atualização, siga as regras de instalação de plugin quando esta skill estiver dentro de um plugin HyperFrames. Instalações independentes mantenham 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 multifásicos), transições (cena para cena), técnicas (padrões mais amplos de design de movimento) e adaptadores (APIs por runtime).
Para o contrato de composição (atributos de dados, sub-composições, determinismo), veja hyperframes-core.
Padrão: compor regras atômicas
Escolha de 2 a 4 regras de rules-index.md, cole-as com uma única timeline pausada do GSAP e pronto. Isso é mais rápido e produz menos código do que começar com um blueprint.
Carregar 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 real
- Você deseja um código de referência executá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 leia especulativamente; carregue-o quando já tiver decidido que precisa de orquestração em nível de cena.
Roteamento
| Se você quer… | Leia |
|---|---|
| Escolher um padrão de movimento atômico por gatilho/etiqueta | rules-index.md |
| Ler uma regra completa (HTML/CSS/GSAP) | rules/<nome>.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 (baseada em CSS, entre dois clipes) | transitions/overview.md, transitions/catalog.md |
| Consultar uma técnica mais ampla de design de movimento | techniques.md |
| Desfoque de movimento — arrasto de obturador em um elemento, e quando não usar | 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 prontos para uso | rules/gsap-effects.md |
| GSAP — transformações/desempenho | adapters/gsap-transforms-and-perf.md |
| GSAP — easing/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 personagens (ciclo de caminhada, mascote, boneco 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 + pós-efeitos WebGL/GLSL (capturar DOM ao vivo via drawElementImage) | adapters/html-in-canvas-patterns.md |
Efeitos nomeados de animação de texto (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 (normalmente exportações After Effects), incluindo personagens que andam, gesticulam ou reagem.
- Three.js para cenas 3D, movimento de câmera, visuais baseados em shaders.
- Anime.js para tweens leves 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 única composição. Cada um registra suas instâncias no global específico do runtime para que HyperFrames possa buscar todos em uma única passagem.
Restrições Críticas
Pré-requisito: hyperframes-core → Uma timeline pausada + Regras inegociáveis (timeline pausada única, data-duration governa a duração, sem Math.random / Date.now / performance.now, sem repeat: -1 sem uma data-duration finita, sem gsap.set no carregamento da página para clipes de cenas posteriores, sem display ou tweens brutos de visibility, e registre a timeline somente depois de totalmente construída, inclusive quando a construção é executada dentro de um callback assíncrono, como document.fonts.ready). autoAlpha do GSAP e conjuntos de visibilidade de duração zero em limites explícitos da timeline permanecem permitidos pelo core. Use essas exceções apenas em elementos não-clipe ou wrappers dentro de um clipe; o framework possui o ciclo de vida .clip. Não reescreva o contrato completo aqui.
Adições de criação 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 do 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 <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
Lê todas as timelines GSAP registradas em window.__timelines, enumera tweens, amostra bboxes, calcula flags, gera animation-map.json. Use para auditar coreografia (zonas mortas, consistência do stagger, avisos de ciclo de vida) após a criação.
animation-map.mjs resolve pacotes auxiliares do projeto atual primeiro e pode inicializar a versão do pacote HyperFrames agrupada. Defina HYPERFRAMES_SKILL_PKG_VERSION=<versão> apenas quando executar a skill fora do CLI/instalação agrupada e você precisar fixar essa versão de inicialização explicitamente.
Veja Também
hyperframes-core— estrutura de composição, atributos de dados, sub-composições, contrato de renderização determinísticahyperframes-creative— paletas, tipografia, narração, planejamento de batidas (direção criativa não-animada)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render