Drama2557/4RealDigital-Video-Studio

Cut the Curve — catálogo de técnicas

Cinco técnicas de costura, um princípio: corte na velocidade de pico, combine direção e velocidade em ambos os lados do corte — mais duas técnicas intra-cena (§6 chegadas, §7 slides). A lei da costura — lei vetorial, a corrente, o razão, o Portão da Costura — reside em motion-doctrine; leia-a primeiro. Este skill são os parâmetros e a mecânica. Todos os modelos de código GSAP (worker + registry): examples/gsap-implementation.md.

Catálogo

#	Técnica	Escopo	Eixo	Uso
1	Zoom-Through (para frente)	Troca de texto na cena	Z, em direção ao espectador	Aprofundar no mesmo pensamento
2	Zoom-Through Inverso	Batida de chegada/recompensa	Z, afastando do espectador	Algo maior pousa
3	Cut the Curve	Entre cenas	X / Y	O limite padrão, a corrente do filme
4	Waterfall Cut	Costura texto a texto	X, por palavra	Transferência no nível da palavra entre batidas de texto grande
5	Rack-Focus Blur-Cut	Troca de estado na mesma superfície	X / Y / Z	O corte que você quer VER — um floreio de foco puxado de câmera DSLR
6	Waterfall Entry	CHEGADA na cena (sem costura)	Y, de baixo	Cartões de título, aberturas de segmento, intros de lista
7	Nudge Curve	Slide de grupo na cena (sem costura)	X / Y	Reposicionar um grupo composto para abrir espaço

Direção Z é um sinal

"Mesmo eixo" não é suficiente em Z — o sinal de d(escala)/dt deve coincidir no corte:

Vetor Z	Escala de saída	Escala de entrada	Variante
Empurrar (para frente)	crescendo 1 → 1,2	crescendo 0,75 → 1	zoom-through
Puxar (para trás)	encolhendo 1 → 0,8	encolhendo 1,25 → 1	zoom-through inverso

Espelhos proibidos: uma saída recuando respondida por uma entrada crescendo do pequeno (puxar vira empurrar — o comum, já que crescer do pequeno é a entrada padrão do elemento), e uma saída empurrando respondida por uma retração superdimensionada. Isso vincula as PRÓPRIAS entradas da cena que chega durante a janela de costura (corte + ~0,5s), não apenas o tween do wrapper: segure o quadro de entrada composto, ou crie sua entrada para corresponder ao sinal. Verifique por regra 7 do Portão da Costura.

Lógica de blur (todas as variantes Z)

Sujeito	Pico blur	Por quê
Escala de texto (título, grupo de palavras)	10px	20px borra os glifos — o corte parece um glitch, não velocidade
Superfície de tela cheia (janela, cartão, screenshot)	18–20px	Blur mais claro em superfície grande parece um soluço de renderização

Mesmo pico de blur em ambos os lados no quadro de troca. Aplique blur no WRAPPER, nunca nos filhos.

---

1. Zoom-Through (para frente)

Corte com correspondência de velocidade no eixo Z; nunca ambos os textos visíveis. Tudo CRESCE: o texto de saída acelera em direção à câmera, uma troca dura esconde no pico de blur, o texto de entrada continua crescendo no plano focal. Apenas títulos e frases curtas. Total ≈ 0,4s.

Fase	Escala	Blur	Opacidade	Easing	Duração
Saída	1 → 1,2	0 → 10px	1 → 0,15	power3.in (opacidade: tween none separado)	0,2s
Corte (tl.set)	in: 0,75	10px	out: 0 / in: 0,15	—	—
Entrada	0,75 → 1	10 → 0px	0,15 → 1	expo.out	0,5s

A opacidade de saída DEVE ser seu próprio tween linear — power3.in segura a opacidade perto de 1 por muito tempo. Na entrada, todas as propriedades compartilham expo.out.

2. Zoom-Through Inverso (para trás)

O espelho de puxar para trás: o elemento de saída RECUA; o que chega chega SUPERSIZADO (como se estivesse atrás da câmera) e retrai para o plano focal. Tudo ENCOLHE. Gaste em batidas de CHEGADA/recompensa — uma linha de recompensa, uma resposta gigante, um estado final mantido — nunca limites comuns. Total ≈ 0,7s (30% saída / 70% entrada).

Fase	Escala	Blur	Opacidade	Easing	Duração
Saída	1 → 0,8	0 → 10px	1 → 0,15	power3.in (opacidade: tween none separado)	~0,2s
Corte (tl.set)	in: 1,25	10px	out: 0 / in: 0,15	—	—
Entrada	1,25 → 1	10 → 0px	0,15 → 1	expo.out	~0,5s

Blur é de escala de texto 10px; 18–20px apenas quando ambos os lados são superfícies em tela cheia.

Disciplina de sinal: a cena que chega chega como um quadro composto dentro do wrapper que retrai — sem introdução crescendo do pequeno na janela de costura. Entradas escalonadas acontecem após a retração se estabilizar, ou começam ≥1 e retraem.

3. Cut the Curve (limite de cena padrão)

Corte com correspondência de velocidade X/Y — o padrão para TODOS os limites cena-a-cena, na corrente do filme, não um acento. O herói de saída acelera em uma direção, o corte cai no meio do movimento, o herói de entrada continua na MESMA direção e desacelera. Total ≈ 0,6s; direções ESQUERDA / DIREITA / CIMA / BAIXO (padrão ESQUERDA).

Deslocamento parcial: ~12% do quadro (≈230px a 1920) — nunca movimentos completos para fora da tela.

Direção	Saída	Início → fim da entrada
Para a esquerda	x: 0 → −230	x: +230 → 0
Para a direita	x: 0 → +230	x: −230 → 0
Para cima	y: 0 → −230	y: +230 → 0
Para baixo	y: 0 → +230	y: −230 → 0

Mecânica:

• Eases espelhados: saída power4.in + entrada power4.out, mesma distância e duração — as duas metades de um power4.inOut, então a velocidade coincide exatamente no corte.
• O truque de fade: a opacidade de saída completa em ~25–30% do seu deslocamento (fade ≈ 0,18–0,3s vs movimento 0,3–0,34s); a entrada começa em ~0,35 de opacidade no meio do caminho. Cronometre o último elemento que desaparece para morrer exatamente no corte — uma lacuna onde nada se move soa como ar morto.
• Saída 0,2–0,4s; entrada ≥ saída. Blur opcional 8–10px.
• Fundo de palco: #root deve ser opaco (background: var(--canvas-deep, var(--canvas, #000))) — o corte no meio da janela abre uma janela de opacidade somada < 1 que pisca branco caso contrário (veja seam-craft).

push-slide existe, mas viola o deslocamento parcial e a fase de meio-movimento; prefira cut-the-curve.

4. Waterfall Cut (cut-the-curve palavra por palavra)

Cut-the-curve na granularidade de PALAVRA — o corte mais forte para a esquerda para costuras texto a texto. Palavras de saída saem em suas próprias curvas; palavras de entrada entram em cascata no meio do voo — uma onda que o olho monta através da costura.

Escopo: criado pelo worker dentro de uma composição multi-batida (camadas .beat empilhadas em tela cheia), NÃO um tipo registry/injector — ele faz tween em spans de palavra, não wrappers de clipe. O limite para dentro e para fora do bloco de batida de texto ainda recebe uma transição de registry normal. Não conta contra o orçamento de 2–3 transições.

Parâmetro	Valor	Por quê
Deslocamento	±230px (~12% quadro)	deslocamento parcial + velocidade > push de tela cheia
Saída	0,34s power4.in	a aceleração É o corte
Fade de saída	0,18s, começa com x	palavra desaparece em ~25–30% do deslocamento — sem arrasto
Stagger de saída	+0,022s na ordem de leitura	a linha descasca, não um slide de bloco
Entrada	0,3s power4.out	metade de trás do composto — correspondência de velocidade
Opacidade inicial da entrada	0,35	ignição no meio do caminho; 0→1 binário aparece
Gaps de entrada	0,05s × decaimento 0,84	cascata acelerando, resolve composto

Regras:

• Uma direção por cadeia, montando a corrente. Zoom-through inverso é apenas a batida de CHEGADA da cadeia.
• Pré-defina todas as palavras para x: +230, opacity: 0 no tempo de construção — immediateRender: false sozinho deixa palavras não iniciadas visíveis em repouso.
• Uma primeira batida curta pode sair em linha inteira: seu fade termina ~0,02s antes do corte para que ainda esteja em movimento quando as próximas palavras acenderem — sem lacuna morta.
• Apenas transform/opacity (seguro para seek); fundo de palco opaco se aplica.

5. Rack-Focus Blur-Cut (o corte visível)

A variante onde o corte é VISTO: um PIQUE de desfoque de desfoco esconde uma troca dura de um único quadro — um foco puxado de câmera DSLR à mão. Use como um floreio ocasional para uma troca de estado da MESMA superfície dentro de um tema visual; nunca o limite padrão.

Diferenças dos outros: a saída permanece TOTALMENTE OPACA até o corte (o blur esconde a troca — sem fade antecipado); eases power2.in / power2.out (óptica suave, não momentum).

Regras:

• Dispare apenas em uma batida narrativa, ≤ uma vez a cada ~8s; nunca no meio de uma legenda ou durante uma pausa.
• Corte no PIQUE do blur (≥6px; pico 8–12px, máximo ≤16–18px) — trocar na subida mostra o corte.
• Uma escala sutil (~1,06 de respiração de lente) vende como óptica.
• Mesma direção em ambos os lados — a lei vetorial ainda vale. Duração da entrada ≥ duração da saída.
• Aplique blur no wrapper; nunca blur + opacidade em um tween em um elemento (bug de composição sem cabeça); nunca aplique blur diretamente em <video> (envolva-o).

---

6. Waterfall Entry (chegada na cena — não uma costura)

Cascata de CHEGADA escalonada: palavras/elementos chicoteiam de baixo (uma direção consistente), cada um começando antes do anterior se estabelecer — uma onda acelerando que se resolve em um layout composto. Cartões de título, aberturas de segmento, intros de lista/recurso. O irmão de costura é §4; não misture suas regras:

	§6 Entrada (chegada)	§4 Waterfall Cut (costura)
Opacidade	0→1 BINÁRIO via tl.set na entrada — nunca fade	acende em 0,35 no meio do caminho — o fade É o truque de velocidade
Eixo padrão	Y, de baixo	X, montando a corrente
Lado de saída	nenhum	palavras saem em power4.in espelhado

Coreografia:

• Sobreposição, não fila — o próximo elemento começa dentro de ±2 quadros do anterior se estabelecer; gaps ENCOLHEM na cascata; o último elemento encaixa.
• Velocidade varia por peso — elementos pesados/âncora viajam mais longe e por mais tempo; palavras leves/pontuação encaixam apertado:

Parâmetro	Âncora/pesado	Palavra normal	Leve/pontuação
Deslocamento Y	60–80px	40–50px	30–48px
Duração	0,16–0,20s	0,13–0,16s	0,10–0,13s
Sobreposição	gap de 0–2q	sobreposição de 1q	sobreposição de 1–2q

• Ease power4.out (expo.out para snap extra); nunca .inOut em uma entrada.
• Uma direção por cascata.
• Divida a ÚLTIMA palavra em fragmentos para estender o clímax; fragmentos viajam mais longe.
• Após o estabelecimento, o grupo geralmente desliza para abrir espaço para a próxima batida — isso é §7.

7. Nudge Curve (slide de grupo na cena — não uma costura)

Reposicionamento lento-rápido-lento de um grupo composto (linhas de palavras, pilhas de cartões, listas) para revelar conteúdo ou abrir espaço. Nenhum ease embutido único produz isso — power4.inOut bate e para. Encadeie três tweens em uma propriedade:

Fase	Ease	Distância	Tempo	Sensação
1 ramp-in	power3.in	~10%	~20%	mal se move — o movimento registra, sem solavanco
2 burst	none (linear)	~65%	~18%	~2× px/quadro média — proposital
3 cauda	power4.out	~25%	~62%	rastejamento decaindo para descanso — mata o estalo

Regras:

• A cauda é ≥3× o ramp-in em TEMPO. Se ainda estalar: estenda o tempo da cauda (não a distância) ou use power5.out.
• A fase 2 permanece linear — aplicar easing perde o contraste do burst.
• Revele novo conteúdo DURANTE a fase 2 — o burst mascara sua aparição.
• Mesmas proporções na vertical; escale as distâncias proporcionalmente, mantenha as proporções de tempo.

---

Escolhendo uma Variante

	Zoom-Through	Zoom-Through Inverso	Cut the Curve	Waterfall Cut
Escopo	Troca de texto na cena	Batida de chegada/recompensa	Entre cenas	Costura texto a texto
Sinal Z / eixo	crescendo (empurrar)	encolhendo (puxar)	X / Y	X, por palavra
Deslocamento/escala	1→1,2, depois 0,75→1	1→0,8, depois 1,25→1	±230px	±230px
Pico blur	10px texto / 18–20 tela cheia	10px texto / 18–20 tela cheia	8–10px opcional	nenhum
Eases	power3.in / expo.out	power3.in / expo.out	power4.in / power4.out	power4.in / power4.out
Sensação	progredindo através	chegando em	carregado lateralmente	uma onda através da costura

Anti-Padrões

| Não faça

…

[truncado para tradução]