Doutrina de Movimento (Gateway)
Leia isto antes de compor qualquer animação. Decide O QUE acontece em cada costura (seam) e como cada cena performa; as skills de técnica implementam isso. Estas regras substituem orientações de movimento genéricas/de nível superior. A falha que isso previne: cenas criadas isoladamente — o momentum do olho morre em cada corte, e as cenas oscilam no lugar entre a entrada e a saída.
Mapa de Rotas
| Decisão (esta skill) | Skill de Implementação |
|---|---|
| Escolha da transição de costura + parâmetros + código | cut-the-curve §1–5 (catálogo) |
| Cascatas de entrada de texto/elemento | cut-the-curve §6 (entrada em cascata) |
| Reposicionamento de grupo dentro da cena (sem corte) | cut-the-curve §7 (curva de ajuste) |
| Ação liderada por cursor / início de cena / ignição de morph | oversized-cursor |
| Mecânicas de renderização de costura / proteção contra flash branco | seam-craft |
| Trabalho de lançamento de produto / explicador / legendas | sobrepõe text-beat-economics, brand-faithful, captions-overlay sobre a skill de nível superior |
Ordem de criação: livro-razão vetorial (ledger.json) → CARIMBE as costuras mestras a partir dele (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → rota de movimento sustentado por fase → transportadores e causas → montagens de construção → VERIFIQUE (scripts/seam-gate.mjs).
Crie manualmente apenas morphs/cortes de correspondência Tier-A; costuras carimbadas passam no portão por construção.
Parte 1 — A Lei da Costura
A Lei Vetorial
Como a Cena A sai determina como a Cena B entra: mesmo eixo, mesma direção, velocidade correspondente, corte no meio do movimento em ambos os lados.
- Eixo — x permanece x, y permanece y, Z permanece Z. Nunca troque eixos em um corte.
- Direção — nunca espelhe. Em Z, direção = o SINAL da mudança de escala: crescendo = empurrar (câmera para frente), diminuindo = puxar (câmera para trás). Uma saída recuando respondida por uma entrada crescendo do pequeno é um vetor espelhado — a violação mais comum, porque crescer do pequeno é a entrada de elemento padrão.
- Velocidade — velocidade inicial de entrada ≈ velocidade final de saída, via suavizações espelhadas (saída
power4.in+ entradapower4.out, mesma distância e duração; o lado de chegada pega ≥50% através do caminho nocional). Mecânicas emcut-the-curve. - Fase — o corte cai no meio do movimento em AMBOS os lados. Assentar em repouso antes do corte, ou começar do repouso depois dele, é uma batida morta.
A Corrente
Cada filme escolhe UMA direção dominante (padrão da casa: ESQUERDA). Cada costura comum a usa. Outros vetores são RESERVADOS — gastar um significa algo:
| Vetor | Significado |
|---|---|
| A corrente (ESQUERDA) | "próxima batida" — progresso neutro para frente |
| Para cima | elevação — uma conclusão ou revelação se eleva acima do que veio antes |
| Z para frente (zoom-through) | empurrando mais fundo no mesmo pensamento |
| Z para trás (zoom inverso) | CHEGADA — algo maior pousa |
| Explosão de escala (explodir) | saindo de um mundo — uma superfície explode na direção da câmera |
- Nunca execute costuras consecutivas em direções opostas — pingue-pongue é lido como erro.
- Uma mudança de direção precisa de uma causa visível (clique / ricochete / impacto) ou de um limite de capítulo.
O Livro-Razão Vetorial
Escreva-o antes de criar qualquer linha do tempo mestra — como ledger.json na raiz do projeto (esquema: references/seam-gate.md). Uma linha por costura: tempo do corte, vetores de saída e entrada (eixo + direção sinalizada; linhas Z carregam o sinal da escala), seletores, técnica. Saída e entrada devem corresponder; se uma linha não corresponder, corrija o plano, não a suavização. O verificador verifica a consistência das linhas estaticamente antes de qualquer amostragem em tempo de execução.
Transportadores (Carriers)
O olho segue objetos, não abstrações. As costuras mais fortes entregam um transportador concreto através do corte em posição E velocidade correspondidas: um cursor no meio do caminho, um contêiner que encolhe/ancora no próximo layout, uma marca que voa para seu encaixe exato, o grupo de palavras de um corte em cascata. Sem transportador natural, os heróis da cena o carregam (viagem parcial + fade precoce, entrada em pleno voo). Nunca um crossfade — ele não tem transportador algum.
Movimento Causal
Encadeie o movimento para que cada movimento seja visivelmente lançado pelo último: clique → compressão → liberação da mola → voo → impacto → recuo → revelação.
- Efeitos começam NO quadro causador — mesma posição na linha do tempo, nunca "pouco depois".
- Reações escalam com a massa implícita: elementos grandes recuam mais devagar, pequenos estalam.
- Uma força é uma licença para mudar de direção; uma virada sem causa é um pingue-pongue.
O Portão da Costura (portão de construção — execute o verificador, saia 0 ou a costura não está pronta)
node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html # gerar
node <SKILL_DIR>/scripts/seam-gate.mjs verify --ledger ledger.json --project . # verificar
O script (uso + esquema do ledger: references/seam-gate.md) aplica numericamente, por costura: consistência da linha do ledger, saída ainda em movimento no corte, entrada em pleno voo (nunca do repouso), direção medida = direção do ledger, correspondência de velocidade entrada/saída (AVISO), sobreposição zero (um lado visível por quadro — o corte não é uma dissolução), a regra do sinal Z (d(escala)/dt mesmo sinal em ambos os lados; as próprias entradas da cena de chegada são escaneadas por luta de sinais), e continuidade do retângulo do transportador com escala ancestral incluída. Use seam-gate.mjs probe --t <corte> para encontrar os verdadeiros seletores do transportador de cada costura ao criar o ledger.
Regras que o script NÃO pode verificar — ainda suas:
- Edições reabrem a costura. Qualquer mudança no primeiro/último ~1s de uma cena (incluindo re-timing para novo VO) invalida a auditoria daquele limite — execute o verificador novamente.
- Áudio é o relógio. Re-timing de cenas para os timestamps reais das palavras do VO; nunca apresse uma leitura para caber em um slot. Uma regeneração de VO reabre suas costuras.
- Pegadinha do clip-gating (a causa usual de uma FALHA de sobreposição zero): um clipe cujo
data-startprecede seu tween de entrada é revelado em sua opacidade inicial — definaautoAlpha: 0inicial Edata-start= o tempo do corte, nunca antes.
Parte 2 — Performance (a cena continua performando)
Sem oscilação ociosa
Loops senoidais ociosos (respirar, flutuar, derivar, pulsar brilho) são PROIBIDOS como movimento sustentado — eles leem como "o vídeo está esperando." Uma cena que termina de entrar com segundos restantes é um bug de planejamento: adicione história, não oscilação. Cada fase entre a entrada e a saída é de propriedade de uma destas rotas (nomeie a rota no plano):
| Rota | O que é |
|---|---|
| Revelações em estágios | Segure conteúdo de volta; pague-o nas batidas da narração — o quadro continua ganhando informação (padrão para ≥2 grupos de conteúdo) |
| Câmera com intenção | Um caminho mapeado de escala+panorâmica: estabelecer amplo → viajar → chegar no assunto |
| Vida de UI sequenciada | O produto se comporta ao longo do tempo: progresso avança, destaque etapa, contagens marcam |
| Sequências animadas | Elementos encenam uma batida: um cartão se arquiva em uma pilha, um item é arrastado, um resultado se monta |
| Ação liderada por cursor | Um cursor grande guia o olho para um gatilho; seu CLIQUE acende a próxima batida (oversized-cursor) |
Teste: pause em qualquer segundo — algo significativo deve estar em pleno voo (uma revelação pousando, a câmera viajando, a UI fazendo o que a narração diz).
Quietude antes do clímax
Agende uma pausa de 0,3–0,75s entre a ação principal e seu resultado — a vírgula dramática. Uma cena que salta direto da ação para o resultado perde isso.
Intenções de timing
- Entrada única ≤ ~800ms; construção mais longa = escalonamento de múltiplos elementos, não um elemento lento.
- Saída ≈ 75% da entrada. Exceção: cut-the-curve inverte isso (entrada ~127% da saída).
- Escalonamento total ≤ 500ms; com 8+ elementos, aperte o atraso por item ou escalone os primeiros.
- Suavizações proibidas:
bounce.out/elastic.out. Overshoot de entradaback.out(1.4–1.7)é aceitável. - Elementos semelhantes compartilham uma intenção de suavização+duração — nunca um par único por elemento.
Vocabulário de transição
Use apenas 2–3 transições entre cenas por filme e repita-as; o limite padrão é cut-the-curve na direção da corrente. Morphs de elemento compartilhado escritos à mão (intent: morph) não contam contra o orçamento.
Anti-Padrões
| Não faça | Em vez disso |
|---|---|
| Criar cada entrada de cena isoladamente | Escreva o livro-razão vetorial primeiro |
| Crossfade entre cenas | Cut-the-curve na direção da corrente |
| Saída completa, ENTÃO a cena muda | Corte no meio do movimento em ambos os lados |
| Entrada começa do repouso após um corte | Entre ≥50% através do caminho nocional |
| Saída zoom inverso → entrada crescendo do pequeno (ou empurrar → retração ampliada) | Corresponda o sinal da velocidade de escala (Portão da Costura 7) |
| Intro pop-in da própria cena de chegada sob uma entrega Z-costura | Segure seu quadro de abertura composto, ou corresponda o sinal |
| Oscilação ociosa / respirar / flutuar para preencher tempo | Atribua uma rota de movimento sustentado; ou adicione história |
| Virada de direção sem causa | Gaste uma força, ou mantenha a corrente |
| Vetores reservados usados como variedade | Padrão para a corrente; gaste-os em significado |
| Reação alguns quadros após sua causa | Ignição no mesmo quadro |
| Ação salta direto para o resultado | Agende quietude antes do clímax (0.3–0.75s) |