HyperFrames Motion
Todo o conhecimento de movimento em um único skill: regras (receitas atômicas), blueprints (modelos de cena multifásica), transições (de 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), veja /hyperframes → core/.
Padrão: compor regras atômicas
Escolha de 2 a 4 regras em rules-index.md, cole-as com uma única timeline pausada do GSAP, pronto. 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 multifásico pré-projetado existente (brand-reveal, social-proof, demo-page-scroll-spotlight, etc.) e reutilizar seu pipeline de fases economiza tempo real de autoria.
- Você deseja 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) e examples/<id>.html (amostra executável). Não leia especulativamente; carregue apenas quando já tiver decidido que precisa de orquestração no nível da cena.
Roteamento
| O que deseja… | Leia |
|---|---|
| Escolher um padrão de movimento atômico por gatilho / tag | rules-index.md |
| Ler a receita completa de uma regra (HTML / CSS / GSAP) | rules/<name>.md |
| Escolher um modelo de cena multifásica | blueprints-index.md |
| Ler a receita completa de um blueprint | blueprints/<id>.md + examples/<id>.html |
| Criar uma transição de cena (CSS-driven, 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 | 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 do 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(), busca currentTime) | 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 externo 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 neste skill são baseadas em GSAP.
- Lottie quando um ativo tem sua própria timeline pré-definida (tipicamente exportações do After Effects).
- Three.js para cenas 3D, movimento de câmera, visuais baseados em shaders.
- Anime.js para tweens leves quando GSAP é excessivo.
- CSS para motivos repetidos simples, decoração, brilhos — 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 composição. Cada um registra suas instâncias no global específico do runtime para que o 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 em clipes de cenas posteriores, sem animação de display / visibility, sem construção de timeline dentro de async / setTimeout / Promise). Não repita aqui.
Acréscimos 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-motion/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
Lê todas as timelines GSAP registradas em window.__timelines, enumera tweens, amostra bounding boxes, 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 autoria.
Veja Também
/hyperframes→core/— estrutura de composição, atributos de dados, subcomposições, contrato de renderização determinística/hyperframes-design— paletas, tipografia, planejamento de batidas (direção criativa não relacionada a animação)/hyperframes→cli/—npx hyperframes lint / validate / inspect / preview / render