heygen-com/hyperframes

Corte a Curva — o catálogo de técnicas

Cinco técnicas SEAM, um princípio: corte na velocidade de pico, corresponda direção e velocidade em ambos os lados do corte — mais as duas técnicas intra-cena (§6 chegadas, §7 slides). A LEI da costura — lei vetorial, a corrente, o livro-razão, o Portão da Costura — vive 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 + registro): examples/gsap-implementation.md.

Catálogo

#	Técnica	Escopo	Eixo	Uso para
1	Zoom-Through (para frente)	Troca de texto intra-cena	Z, em direção ao visualizador	progredindo mais fundo no mesmo pensamento
2	Inverse Zoom-Through	Batida de chegada / recompensa	Z, para longe do visualizador	algo maior aterrissa
3	Corte a Curva	Entre cenas	X / Y	o limite padrão, a corrente do filme
4	Corte Cascata	Costura texto-com-texto	X, por palavra	transferência no nível da palavra entre batidas de texto grandes
5	Corte de Desfoque Foco-Rack	Troca de estado na mesma superfície	X / Y / Z	o único corte que você quer VER — um floreio de puxada de foco DSLR
6	Entrada Cascata	CHEGADA intra-cena (sem costura)	Y, de baixo	cartões de título, aberturas de segmento, intros de lista
7	Curva de Empurrão	Slide de grupo intra-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 corresponder através do 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)	diminuindo 1 → 0,8	diminuindo 1,25 → 1	inverse zoom-through

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

Lógica de desfoque (todas as variantes Z)

Sujeito	Desfoque de pico	Por que
Escala de texto (manchete, grupo de palavras)	10px	20px borra letras — o corte parece uma falha, não velocidade
Superfície de quadro completo (janela, cartão, captura de tela)	18–20px	desfoque mais claro em uma superfície grande parece um soluço de renderização

Mesmo desfoque de pico em ambos os lados no quadro de troca. Desfoque o WRAPPER, nunca os 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 brusca esconde-se no pico do desfoque, o texto de entrada continua crescendo até o plano focal. Manchetes e frases curtas apenas. Total ≈ 0,4s.

Fase	Escala	Desfoque	Opacidade	Ease	Duração
Saída	1 → 1,2	0 → 10px	1 → 0,15	power3.in (opacidade: tween none separado)	0,2s
Corte (tl.set)	entrada: 0,75	10px	saída: 0 / entrada: 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 mantém a opacidade perto de 1 por tempo demais. Na entrada, todas as propriedades compartilham expo.out.

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

O espelho de puxar para trás: o elemento de saída RECUA; o de entrada chega SUPERDIMENSIONADO (como se logo atrás da câmera) e retrai para o plano focal. Tudo DIMINUI. 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	Desfoque	Opacidade	Ease	Duração
Saída	1 → 0,8	0 → 10px	1 → 0,15	power3.in (opacidade: tween none separado)	~0,2s
Corte (tl.set)	entrada: 1,25	10px	saída: 0 / entrada: 0,15	—	—
Entrada	1,25 → 1	10 → 0px	0,15 → 1	expo.out	~0,5s

Desfoque é 10px para escala de texto; 18–20px apenas quando ambos os lados são superfícies de sangria total.

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

3. Corte a Curva (limite de cena padrão)

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

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

Direção	Saída	Início → fim da entrada
Esquerda	x: 0 → −230	x: +230 → 0
Direita	x: 0 → +230	x: −230 → 0
Cima	y: 0 → −230	y: +230 → 0
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 corresponde exatamente no corte.
• O truque do fade: a opacidade de saída completa-se em ~25–30% de sua viagem (fade ≈ 0,18–0,3s vs movimento 0,3–0,34s); a entrada acende em ~0,35 de opacidade no meio do caminho. Temporize o último elemento desbotando para morrer exatamente no corte — uma lacuna onde nada se move parece ar morto.
• Saída 0,2–0,4s; entrada ≥ saída. Desfoque opcional 8–10px.
• Fundo do palco: #root deve ser opaco (background: var(--canvas-deep, var(--canvas, #000))) — o corte no meio da janela abre uma janela de soma-opacidade < 1 que pisca branco caso contrário (veja seam-craft).

push-slide existe, mas viola a viagem parcial e a fase de meio-movimento; prefira corte-a-curva.

4. Corte Cascata (corte-a-curva palavra por palavra)

Corte-a-curva na granularidade de PALAVRA — o corte mais forte para a esquerda para costuras texto-com-texto. Palavras de saída ramificam-se 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 de múltiplas batidas (camadas .beat de quadro completo empilhadas), NÃO um tipo de registrador/injetor — ele ajusta extensões de palavras, não wrappers de clipe. O limite de entrada e saída do bloco de batida de texto ainda recebe uma transição de registro normal. Não conta contra o orçamento de 2–3 transições.

Parâmetro	Valor	Por que
Viagem	±230px (~12% quadro)	viagem parcial + velocidade > empurrão de quadro completo
Saída	0,34s power4.in	a aceleração É o corte
Fade de saída	0,18s, começa com x	palavra desaparece por ~25–30% da viagem — sem borrão
Stagger de saída	+0,022s 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 de início da entrada	0,35	ignição no meio do caminho; binário 0→1 estala
Lacunas de entrada	0,05s × decaimento 0,84	cascata acelerando, resolve composto

Regras:

• Uma direção por cadeia, montando a corrente. Zoom inverso é a batida de CHEGADA da cadeia apenas.
• 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 busca); fundo de palco opaco aplica-se.

5. Corte de Desfoque Foco-Rack (o corte visível)

A única variante onde o corte é VISTO: um pico de desfoque de desfocagem ESCONDE uma troca brusca de quadro único — uma puxada de foco DSLR de 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 das outras: a saída permanece TOTALMENTE OPACA até o corte (o desfoque esconde a troca — sem fade antecipado); eases power2.in / power2.out (óptica suave, não momentum).

Regras:

• Acione apenas em uma batida narrativa, ≤ uma vez a cada ~8s; nunca no meio de uma legenda ou durante uma espera.
• Corte no PICO do desfoque (≥6px; pico 8–12px, ≤16–18px máximo) — trocar no caminho para cima mostra o corte.
• Uma escala sutil (~1,06 respiração de lente) vende como óptica.
• Mesma direção em ambos os lados — a lei vetorial ainda se mantém. Entrada ≥ duração da saída.
• Desfoque o wrapper; nunca desfoque + opacidade em um tween em um elemento (erro de composição sem cabeça); nunca desfoque um <video> diretamente (envolva-o).

---

6. Entrada Cascata (chegada intra-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 estabilizar — 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 Corte Cascata (costura)
Opacidade	BINÁRIA 0→1 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:

• Sobreponha, não enfileire — o próximo elemento começa dentro de ±2 quadros do anterior se estabilizar; lacunas ENCOLHEM ao longo da cascata; o último elemento encaixa.
• A velocidade varia por peso — elementos pesados/âncora viajam mais e por mais tempo; palavras leves/pontuação encaixam firmemente:

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	lacuna 0–2q	sobreposição 1q	sobreposição 1–2q

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

7. Curva de Empurrão (slide de grupo intra-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 para com um tranco. Encadeie três tweens em uma propriedade:

Fase	Ease	Distância	Tempo	Sensação
1 rampa de entrada	power3.in	~10%	~20%	mal se move — o movimento registra, sem solavanco
2 explosão	none (linear)	~65%	~18%	~2× a média px/quadro — proposital
3 cauda	power4.out	~25%	~62%	rastejar decaindo para o repouso — mata o tranco

Regras:

• A cauda é ≥3× a rampa de entrada em TEMPO. Se ainda bater: estenda o tempo da cauda (não a distância) ou use power5.out.
• A fase 2 permanece linear — suavizá-la perde o contraste da explosão.
• Revele novo conteúdo DURANTE a fase 2 — a explosão mascara sua aparência.
• Mesmas proporções na vertical; dimensione as distâncias proporcionalmente, mantenha as proporções de tempo.

---

Escolhendo uma Variante

	Zoom-Through	Inverse Zoom	Corte a Curva	Corte Cascata
Escopo	Troca de texto intra-cena	Batida de chegada/recompensa	Entre cenas	Costura texto-com-texto
Sinal Z / eixo	crescendo (empurrar)	diminuindo (puxar)	X / Y	X, por palavra
Viagem/escala	1→1,2, depois 0,75→1	1→0,8, depois 1,25→1	±230px	±230px
Desfoque de pico	10px texto / 18–20 quadro completo	10px texto / 18–20 quadro completo	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 a	carregado lateralmente	uma onda através da costura

Anti-Padrões

Não faça	... porque
...	...