HyperFrames Animação
Todo o conhecimento de movimento em uma habilidade: regras (receitas atômicas), blueprints (modelos de cena em múltiplas fases), transições (cena a 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, una-as com uma única timeline GSAP pausada, pronto. Isso é mais rápido e produz menos código do que começar a partir de um blueprint.
Carregue um blueprint quando
- A cena corresponde a um modelo pré-projetado existente em múltiplas fases (revelação de marca, prova social etc.) e reutilizar seu pipeline de fases economiza tempo real de autoria.
- Você deseja um código executável de verdade 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 quando já tiver decidido que precisa de orquestração no nível da cena.
Roteamento
| Deseja… | Leia |
|---|---|
| Escolher um padrão atômico de movimento por gatilho / tag | rules-index.md |
| Ler a receita completa HTML / CSS / GSAP de uma regra | rules/<nome>.md |
| Escolher um modelo de cena em múltiplas fases | 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 |
| 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 / rótulos | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (exportações After Effects, window.__hfLottie) | adapters/lottie.md |
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 habilidade 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 habilidade são baseadas em GSAP.
- Lottie quando um ativo tem sua própria timeline pré-definida (geralmente exportações After Effects).
- Three.js para cenas 3D, movimento de câmera, visuais orientados por shaders.
- 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 mesma composição. Cada um registra suas instâncias no global específico do runtime para que HyperFrames possa buscar todos eles 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 display ou tweens crus de visibility, e sem construção de timeline dentro de async / setTimeout / Promise). GSAP autoAlpha e definições de visibilidade com duração zero em limites explícitos da timeline permanecem permitidos pelo núcleo. Use essas exceções apenas em elementos que não são clipes ou em wrappers dentro de um clipe; o framework possui o ciclo de vida do .clip. Não reescreva o contrato completo aqui.
Acréscimos de criação de animação sobre o contrato do núcleo:
- 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 núcleo também permiteopacity/color/backgroundColor/borderRadiuspara tweens de propriedades não espaciais — mas nuncawidth/height/top/leftpara alterações 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 para auditar a coreografia (zonas mortas, consistência de stagger, avisos de ciclo de vida) após a criação.
animation-map.mjs resolve pacotes auxiliares do projeto atual primeiro; em seguida, pode inicializar a versão do pacote HyperFrames incluída. Defina HYPERFRAMES_SKILL_PKG_VERSION=<versão> apenas ao executar a habilidade fora da instalação da CLI/habilidade incluída e você precisar 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 batidas (direção criativa não relacionada a animação)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render