Doutrina de Movimento (Gateway)
Leia isto antes de compor qualquer animação. Decide O QUE acontece em cada costura e como cada cena performa; as skills de técnica implementam isso. Estas regras substituem orientações genéricas / upstream de movimento. A falha que isso previne: cenas criadas isoladamente — o momento 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 (o catálogo) |
| Cascatas de texto / entrada de elementos | cut-the-curve §6 (entrada em cascata) |
| Reposicionamento de grupo dentro da cena (sem corte) | cut-the-curve §7 (curva de ajuste) |
| Ação / início de cena / ignição de morph guiada pelo cursor | oversized-cursor |
| Mecânicas de renderização de costura / proteção contra flash branco | seam-craft |
| Lançamento de produto / vídeo explicativo / legendas | sobrepõe text-beat-economics, brand-faithful, captions-overlay sobre a skill upstream |
Ordem de criação: ledger vetorial (ledger.json) → CARIMBAR as costuras mestre a partir dele
(scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → rota de movimento
sustentado por fase → transportadores e causas → compor builds → VERIFICAR (scripts/seam-gate.mjs).
Crie manualmente apenas morphs/match-cuts de Nível A; costuras carimbadas passam no portal 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 de eixos em um corte.
- Direção — nunca espelhe. Em Z, direção = o SINAL da mudança de escala: crescer = empurrar (câmera para frente), encolher = puxar (câmera para trás). Uma saída de recuo respondida por uma entrada de crescimento a partir do pequeno é um vetor espelhado — a violação mais comum, porque crescer a partir do pequeno é a entrada de elemento padrão.
- Velocidade — velocidade inicial da entrada ≈ velocidade final da saída, via facilidades
espelhadas (saída
power4.in+ entradapower4.out, mesma distância e duração; o lado de entrada capta ≥50% do caminho nocional). Mecânicas emcut-the-curve. - Fase — o corte atinge o meio do movimento em AMBOS os lados. Assentar para descansar antes do corte, ou começar do repouso depois dele, é um batimento morto.
A Corrente
Cada filme escolhe UMA direção dominante (padrão da casa: ESQUERDA). Toda costura comum a usa. Outros vetores são RESERVADOS — gastar um significa algo:
| Vetor | Significado |
|---|---|
| A corrente (ESQUERDA) | "próximo batimento" — progresso para frente neutro |
| Para cima | elevação — uma conclusão ou revelação se eleva acima do que veio antes |
| Z para frente (zoom-through) | aprofundando 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 além 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 Ledger Vetorial
Escreva-o antes de criar qualquer linha do tempo mestre — como ledger.json na raiz do projeto
(esquema: references/seam-gate.md). Uma linha por costura: tempo de corte, vetores de saída e entrada
(eixo + direção sinalizada; linhas Z carregam o sinal de escala), seletores, técnica. Saída e
entrada devem corresponder; se uma linha não corresponder, corrija o plano, não a facilidade. O
verificador verifica a consistência da linha estaticamente antes de qualquer amostragem em tempo de execução.
Transportadores
O olho segue objetos, não abstrações. As costuras mais fortes passam um transportador concreto através do corte em posição E velocidade correspondentes: um cursor no meio do caminho, um contêiner que encolhe/encaixa 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 + desvanecimento precoce, entrada em pleno voo). Nunca uma crossfade — ela não tem transportador algum.
Movimento Causal
Encadeie o movimento para que cada movimento seja visivelmente lançado pelo anterior: clique → comprimir → soltar mola → voo → impacto → recuo → revelação.
- Efeitos começam NO quadro causador — mesma posição na linha do tempo, nunca "logo depois."
- Reações escalam com a massa implícita: elementos grandes ricocheteiam mais devagar, pequenos estalam.
- Uma força é uma licença para mudar de direção; uma inversão sem causa é um pingue-pongue.
O Portal de Costura (portal 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) impõe numericamente, por
costura: consistência da linha do ledger, saída ainda em movimento no corte, entrada em pleno
voo (nunca a partir do repouso), direção medida = direção do ledger, correspondência de
velocidade de entrada/saída (WARN), sobreposição zero (um lado visível por quadro — o
corte não é um dissolve), a regra do sinal Z (d(escala)/dt mesmo sinal em ambos os lados;
as entradas da própria cena que chega são escaneadas por conflito de sinal) e continuidade
do retângulo transportador com escala ancestral incluída. Use seam-gate.mjs probe --t <corte>
para encontrar os verdadeiros seletores transportadores de cada costura ao criar o ledger.
Regras que o script não pode verificar — ainda suas:
- Edits reabrem a costura. Qualquer alteração no primeiro/último ~1s de uma cena (incluindo re-timing para um novo VO) invalida a auditoria daquele limite — execute novamente o verificador.
- Áudio é o relógio. Re-time as cenas para os timestamps de palavra reais 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 é desocultado em sua opacidade inicial — definaautoAlpha: 0inicial Edata-start= o tempo de corte, nunca antes.
Parte 2 — Desempenho (a cena continua performando)
Sem oscilação ociosa
Loops de seno ociosos (respirar, flutuar, derivar, pulsar brilho) são PROIBIDOS como movimento sustentado — eles são lidos 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 entrada e saída é dona de uma destas rotas (nomeie a rota no plano):
| Rota | O que é |
|---|---|
| Revelações em cena | Segure conteúdo de volta; entregue nos batimentos 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+pan: estabelecer amplo → viajar → chegar no sujeito |
| Vida sequenciada de UI | O produto se comporta ao longo do tempo: o progresso avança, destaque de etapa, contagens se movem |
| Sequências animadas | Os elementos atuam um batimento: um cartão arquiva em uma pilha, um item é arrastado, um resultado se monta |
| Ação guiada por cursor | Um cursor ampliado guia o olho para um gatilho; seu CLIQUE acende o próximo batimento (oversized-cursor) |
Teste: pause em qualquer segundo — algo significativo deve estar em pleno voo (uma revelação aterrissando, a câmera viajando, a UI fazendo o que a narração diz).
Pausa 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 o efeito.
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: corte-da-curva inverte isso (entrada ~127% da saída).
- Escalonamento total ≤ 500ms; com 8+ elementos, aperte o atraso por item ou escalone os primeiros.
- Facilidades proibidas:
bounce.out/elastic.out. Ultrapassagem de entradaback.out(1.4–1.7)é aceitável. - Elementos semelhantes compartilham uma única intenção de facilidade + 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 é
corte-da-curva na direção da corrente. Morphs de elemento compartilhado escritos manualmente
(intent: morph) não contam para o orçamento.
Anti-Padrões
| Não faça | Em vez disso |
|---|---|
| Criar a entrada de cada cena isoladamente | Escreva o ledger vetorial primeiro |
| Crossfade entre cenas | Corte-da-curva na direção da corrente |
| Saída completa, DEPOIS 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 de zoom inverso → entrada de crescimento a partir do pequeno | Corresponda o sinal de velocidade de escala (Portal de Costura 7) |
| Introdução pop-in da própria cena que chega sob uma entrega de costura Z | 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 |
| Inversão de direção sem uma causa | Gaste uma força, ou mantenha a corrente |
| Vetores reservados usados como variedade | Padrão para a corrente; gaste-os com significado |
| Reação alguns quadros após sua causa | Ignição no mesmo quadro |
| Ação salta direto para o resultado | Agende pausa antes do clímax (0,3–0,75s) |