VYBE Motion Design — Design de Movimento

O que VYBE Motion Design — Design de Movimento faz?

O movimento é a mensagem. Cada movimento deve dizer algo sobre o sujeito — peso, velocidade, confiança, admiração — ou não deve existir.

Todas as receitas são para HyperFrames: uma linha do tempo GSAP pausada por composição, determinística, que pode ser buscada. Use fromTo para entradas, transformações + opacidade + clipPath + filter para animação, nunca propriedades de layout.

Referências (carregue a que precisar)

Arquivo	Para
references/animation-principles.md	os 12 princípios aplicados a UI/type/graphics, vocabulário de easing, tabelas de temporização
references/transitions.md	14 receitas de transição com código GSAP, e quando usar cada uma
references/camera-movements.md	dolly, truck, crane, orbit, zoom-through, whip, rack focus, parallax — 2D e 3D
references/visual-effects.md	glow, bloom, light leak, granulado de filme, divisão cromática, desfoque de movimento, máscaras, morfoses

As dez regras

1. Coreografe, não anime. Planeje quem se move primeiro, quem responde, quem parada. Uma cena é uma sentença: sujeito → verbo → objeto.
2. Easing é personalidade. expo.out = premium/confiante; back.out = brincalhão; power2.inOut = câmera mecânica; sine.inOut = respirando/ambiental; none = deslocamento constante. Escolha 2–3 eases por filme e mantenha a consistência.
3. Rápido na entrada, suave no final. Maioria das entradas: 0,5–0,9s, 80% do percurso nos primeiros 30% do tempo.
4. Saídas são mais rápidas que entradas (≈60%) e usam eases .in.
5. Stagger revela hierarquia — 0,04–0,08s para letras, 0,1–0,18s para palavras, 0,3–0,6s para itens de lista. Nunca crie stagger idêntico.
6. Sobreponha ações. O próximo elemento começa antes do anterior terminar (parâmetro de posição "<0.2" / tempos absolutos). Sequencial = robótico.
7. Faça pausa para leitura. ≈0,3s por palavra + 0,5s; linhas de fechamento ≥2s.
8. Sempre algo vivo. Durante pausas, um push lento (scale 1→1.04), deriva ou varredura de luz evita que o quadro morra — mas apenas um movimento ambiente por camada.
9. Varie transições. No máximo uma transição fade-through-black por filme. Prefira cortes em movimento, match cuts, wipe com máscara, zoom-through, elementos compartilhados.
10. Respeite a batida. Se houver música, cada mudança importante ocorre na batida (60/bpm); os hits caem na batida forte, a antecipação começa antes dela.

Padrões GSAP seguros para busca (seek-safe)

const tl = gsap.timeline({ paused: true });
// Entrada: desfoque-para-nítido com subida (premium)
tl.fromTo("#s1-title", { opacity: 0, y: 40, filter: "blur(12px)" },
  { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.9, ease: "expo.out" }, 0.2);
// Revelação por wipe de máscara (editorial)
tl.fromTo("#s1-line", { clipPath: "inset(0 100% 0 0)" }, { clipPath: "inset(0 0% 0 0)", duration: 0.8, ease: "expo.inOut" }, 0.5);
// Espalhamento por glifo (em vez de letterSpacing — que é rejeitado pelo lint)
gsap.utils.toArray("#s1-word .ch").forEach((c, i, all) => {
  const off = (i - (all.length - 1) / 2) * -30;
  tl.fromTo(c, { x: off, opacity: 0 }, { x: 0, opacity: 1, duration: 1, ease: "expo.out" }, 1 + Math.abs(i - (all.length - 1) / 2) * 0.05);
});
// Contagem progressiva (buscável: onUpdate executa em cada busca)
const n = { v: 0 }, el = document.getElementById("s1-num");
tl.fromTo(n, { v: 0 }, { v: 97, duration: 1.4, ease: "expo.out", onUpdate: () => (el.textContent = Math.round(n.v)) }, 1.2);
// Pausa ambiente
tl.fromTo("#s1-stack", { scale: 1 }, { scale: 1.04, duration: 3, ease: "sine.inOut" }, 0);
window.__timelines["s1"] = tl;

Dividindo texto: envolva palavras/letras em <span class="w|ch" style="display:inline-block"> (transformações não funcionam em elementos inline). Mantenha espaços fora das spans.

Antes de entregar

• Duas cenas consecutivas não podem ter o mesmo movimento de entrada.
• Nenhuma propriedade é animada duas vezes no mesmo elemento em tempos sobrepostos.
• npx hyperframes check A seção Motion deve estar limpa; para auditorias de coreografia execute o script animation-map.mjs incluído no skill /hyperframes-animation quando instalado.