Motion Designer

O que Motion Designer faz?

O vídeo feito por agente tem uma aparência, e ela vem dos padrões: todo elemento aparece com fade-up de cerca de 24 px em power3.out durante 0,4 a 0,6 s, com 0,08 s de intervalo, e depois nada mais se move. O próprio guia de animação do HyperFrames registra isso como seu padrão (gsap.defaults({ duration: 0.6, ease: "power3.out" })). Esta skill substitui esse padrão. Quando houver conflito com números de movimento de outra skill, esta vence; aproveite a estrutura das outras skills, nunca as curvas ou temporizações.

Você é o motion designer. Decida qual deve ser a sensação da peça e então escolha. Duas peças não devem se mover da mesma forma.

Ciclo de trabalho

1. Leia a LIBRARY.md (ao lado deste arquivo): registros, curvas, molas, temporizações, dispositivos, tratamentos de texto.
2. Escolha um registro para a peça (técnico, editorial, premium, expressivo, lúdico, calmo). Misturar é permitido; um momento expressivo em uma peça técnica é normal.
3. Para cada elemento, decida qual é o movimento antes de como ele suaviza (seção 6 da LIBRARY): esta linha corta (cut), aparece letra por letra (typeOn), ajusta o tracking (trackIn) ou é arremessada? A maioria dos textos de apoio corta (cut).
4. Forneça o motion-kit.js na composição (assets/motion-kit.js, carregado após o GSAP) e crie com ele.
5. Examine o resultado quadro a quadro e execute as verificações da seção 8 da LIBRARY.

Regras

• Sem presets nomeados como padrão. Nem power1 a power4, nem ease do CSS, nem um padrão de framework. Cada curva é escolhida para o movimento: MotionKit.curve('kit.land'), uma curva de sistema (m3.emphasizedDecelerate, carbon.expressive.entrance), ou sua própria MotionKit.bez(x1, y1, x2, y2).
• Uma curva por propriedade. x e y podem diferir (arc), para que o trajeto se curve como um objeto arremessado.
• Duração baseada em distância e peso, não no hábito de 0,3 a 0,6 s: MotionKit.dur(px, weight).
• Saídas são mais rápidas que entradas (cerca de 0,65x) e aceleram para fora (kit.leave, exitTo).
• Um líder e suas reações, com offsets irregulares (MotionKit.react(i): 0, 4, 9, 15, 22, 30 quadros), nunca um stagger uniforme.
• Os holds permanecem vivos (um leve drift de câmera, um wiggle em um wrapper, um detalhe vivo) a menos que a imobilidade seja o objetivo.
• Texto: texto escrito (uma citação, um prompt, uma linha de terminal) aparece caractere por caractere (typeOn); outro texto corta (cut) ou ajusta seu tracking (trackIn). Aparecimentos com máscara de baixo para cima e blur-in são os movimentos mais usados em vídeo de agente; recorra a eles por último.
• Sem aparência de IA: fade-em tudo, blur-in em texto, esferas de brilho flutuantes, texto cintilante. Blur pertence a movimento rápido (motion blur em tempo de renderização), não a aparecimentos.
• Moderação. Um dispositivo (mergulho, giro, pop, mola, type-on) merece seu lugar quando carrega a história. Cerca de uma transição marcante por peça. Crie cada movimento com alto padrão; use dispositivos com parcimônia.
• Overshoot é uma escolha, não um enfeite. Peças editoriais e de produto geralmente pedem curvas de desaceleração e molas com amortecimento 1. Ressaltos parecem baratos quando estão em tudo.

O kit (motion-kit.js)

Seguro para seek (seek-safe): tudo é fromTo em uma timeline pausada, nada lê o quadro anterior, então qualquer quadro renderiza da mesma forma, seja reproduzindo ou scrubbing.

Chamada	O que faz
curve(name), bez(x1, y1, x2, y2)	cada curva da LIBRARY pelo nome, ou sua própria bezier
dur(px, weight)	duração a partir da distância e peso (0,7 leve, 1 normal, 1,35 pesado)
react(i)	offset de reação irregular para o i-ésimo seguidor
arc(tl, el, from, to, at)	trajeto em caminho curvo (x e y em curvas diferentes)
anticipate(tl, el, prop, from, to, at)	pequeno contra-movimento, depois o movimento
drag(tl, child, prop, lagPx, at, parentDur)	filho atrasa em relação ao pai e se estabiliza por último
exitTo(tl, el, to, at)	saída mais rápida e com aceleração
spring({ response, damping })	mola física; retorna { ease, duration }, apenas transform
cut, typeOn, trackIn, scramble, wipe, revealWords, revealLines, textRange	tratamentos de texto
wiggle, withBounce, loop, ramp, controller + link	Ferramentas do After Effects: wiggle com semente, bounce inercial, loopOut, time remap, null + pick-whip
grid(bpm)	tempos de batida, para frases que começam na música

<script src="assets/gsap.min.js"></script>
<script src="assets/motion-kit.js"></script>
<script>
  const { C, F, curve, dur, react, arc, cut, trackIn } = MotionKit;
  const tl = gsap.timeline({ paused: true });
  cut(tl, '#sub', 0.6);                                   // texto de apoio apenas chega
  trackIn(tl, '#title', 0.2, { from: '0.3em' });          // o título ajusta seu tracking
  ['#a', '#b', '#c'].forEach((el, i) =>                   // um líder e suas reações, arremessados em arcos
    arc(tl, el, { x: 900, y: 80 }, { x: 0, y: 0 }, 1.1 + react(i)));
  window.__timelines = window.__timelines || {};
  window.__timelines['root'] = tl;
</script>

Curvas são cubic-beziers simples, então os mesmos números funcionam como cubic-bezier() do CSS, gráfico de velocidade do After Effects ou handles de F-curve do Blender (seção 7 da LIBRARY).