heygen-com/hyperframes

Cut the Curve — el catálogo de técnicas

Cinco técnicas SEAM, un principio: cortar en el pico de velocidad, emparejar dirección y velocidad en ambos lados del corte — más las dos técnicas en escena (§6 llegadas, §7 deslizamientos). La ley de costura (seam) — ley vectorial, la corriente, el libro mayor, la Puerta de Costura — está en motion-doctrine; léelo primero. Este skill son los parámetros y la mecánica. Todos los templates de código GSAP (worker + registry): examples/gsap-implementation.md.

Catálogo

#	Técnica	Ámbito	Eje	Uso
1	Zoom-Through (hacia adelante)	Intercambio de texto en escena	Z, hacia el espectador	avanzar más profundo en el mismo pensamiento
2	Zoom-Through Inverso	Golpe de llegada / remate	Z, alejándose del espectador	algo más grande aterriza
3	Cut the Curve	Entre escenas	X / Y	el límite predeterminado, la corriente de la película
4	Waterfall Cut	Costura texto a texto	X, por palabra	handoff a nivel de palabra entre golpes de texto grande
5	Rack-Focus Blur-Cut	Intercambio de estado en la misma superficie	X / Y / Z	el único corte que QUIERES que se VEA — un floreo de enfoque DSLR
6	Waterfall Entry	LLEGADA en escena (sin costura)	Y, desde abajo	tarjetas de título, abridores de segmento, intros de listas
7	Nudge Curve	Deslizamiento de grupo en escena (sin costura)	X / Y	reposicionar un grupo compuesto para hacer espacio

La dirección Z es un signo

"Mismo eje" no es suficiente en Z — el signo de d(escala)/dt debe coincidir a través del corte:

Vector Z	Escala de salida	Escala de entrada	Variante
Empuje (adelante)	creciendo 1 → 1.2	creciendo 0.75 → 1	zoom-through
Tirón (atrás)	encogiendo 1 → 0.8	encogiendo 1.25 → 1	zoom-through inverso

Espejos prohibidos: una salida que retrocede respondida por una entrada que crece desde pequeño (el tirón se convierte en empuje — el común, ya que crecer desde pequeño es la entrada de elemento predeterminada), y una salida de empuje respondida por una retracción sobredimensionada. Esto vincula las ENTRADAS PROPIAS de la escena entrante durante la ventana de costura (corte + ~0.5s), no solo el tween wrapper: mantén el fotograma entrante compuesto, o escribe su entrada para que coincida con el signo. Verifica según la regla 7 de la Puerta de Costura.

Lógica de desenfoque (todas las variantes Z)

Sujeto	Desenfoque pico	Por qué
Escala de texto (titular, grupo de palabras)	10px	20px emborrona las formas de las letras — el corte se lee como un fallo, no velocidad
Superficie de pantalla completa (ventana, tarjeta, captura de pantalla)	18–20px	un desenfoque más ligero en una superficie grande se lee como un hipo de renderizado

Mismo desenfoque pico en ambos lados en el fotograma de intercambio. Desenfoca el WRAPPER, nunca los hijos.

---

1. Zoom-Through (hacia adelante)

Corte con emparejamiento de velocidad en el eje Z; nunca ambos textos visibles. Todo CRECE: el texto saliente acelera hacia la cámara, un intercambio duro oculta en el pico de desenfoque, el texto entrante sigue creciendo hacia el plano focal. Solo titulares y frases cortas. Total ≈ 0.4s.

Fase	Escala	Desenfoque	Opacidad	Ease	Duración
Salida	1 → 1.2	0 → 10px	1 → 0.15	power3.in (opacidad: tween none separado)	0.2s
Corte (tl.set)	ent: 0.75	10px	sal: 0 / ent: 0.15	—	—
Entrada	0.75 → 1	10 → 0px	0.15 → 1	expo.out	0.5s

La opacidad de salida DEBE ser su propio tween lineal — power3.in mantiene la opacidad cerca de 1 demasiado tiempo. En la entrada, todas las propiedades comparten expo.out.

2. Zoom-Through Inverso (hacia atrás)

El espejo del tirón hacia atrás: el elemento saliente RETROCEDE; el entrante llega SOBREDIMENSIONADO (como si estuviera justo detrás de la cámara) y se retrae hacia el plano focal. Todo ENCOGE. Úsalo en golpes de LLEGADA/remate — una línea de remate, una respuesta gigante, un estado final mantenido — nunca en límites ordinarios. Total ≈ 0.7s (30% salida / 70% entrada).

Fase	Escala	Desenfoque	Opacidad	Ease	Duración
Salida	1 → 0.8	0 → 10px	1 → 0.15	power3.in (opacidad: tween none separado)	~0.2s
Corte (tl.set)	ent: 1.25	10px	sal: 0 / ent: 0.15	—	—
Entrada	1.25 → 1	10 → 0px	0.15 → 1	expo.out	~0.5s

El desenfoque es de 10px para escala de texto; 18–20px solo cuando ambos lados son superficies a sangrado completo.

Disciplina de signo: la escena entrante llega como un fotograma compuesto dentro del wrapper que se retrae — sin introducción de crecimiento desde pequeño en la ventana de costura. Las entradas escalonadas ocurren después de que la retracción se asienta, o comienzan en ≥1 y se retraen.

3. Cut the Curve (límite de escena predeterminado)

Corte con emparejamiento de velocidad en X/Y — el predeterminado para TODOS los límites entre escenas, en la corriente de la película, no un acento. El héroe saliente acelera en una dirección, el corte aterriza a medio movimiento, el héroe entrante continúa la MISMA dirección y desacelera. Total ≈ 0.6s; direcciones IZQUIERDA / DERECHA / ARRIBA / ABAJO (predeterminado IZQUIERDA).

Recorrido parcial: ~12% del fotograma (≈230px a 1920) — nunca movimientos completos fuera de pantalla.

Dirección	Salida	Inicio → fin de entrada
Hacia la izquierda	x: 0 → −230	x: +230 → 0
Hacia la derecha	x: 0 → +230	x: −230 → 0
Hacia arriba	y: 0 → −230	y: +230 → 0
Hacia abajo	y: 0 → +230	y: −230 → 0

Mecánica:

• Eases espejados: salida power4.in + entrada power4.out, misma distancia y duración — las dos mitades de un solo power4.inOut, por lo que la velocidad coincide exactamente en el corte.
• El truco de desvanecimiento: la opacidad de salida se completa en ~25–30% de su recorrido (desvanecimiento ≈ 0.18–0.3s vs movimiento 0.3–0.34s); la entrada se enciende en ~0.35 de opacidad a medio camino. Sincroniza el último elemento que se desvanece para que muera justo en el corte — un espacio donde nada se mueve se lee como aire muerto.
• Salida 0.2–0.4s; entrada ≥ salida. Desenfoque opcional 8–10px.
• Escenario base: #root debe ser opaco (background: var(--canvas-deep, var(--canvas, #000))) — el corte a medio camino abre una ventana de opacidad sumada < 1 que de otro modo parpadea en blanco (ver seam-craft).

push-slide existe pero viola el recorrido parcial y la fase de medio movimiento; prefiere cut-the-curve.

4. Waterfall Cut (corte palabra por palabra con cut-the-curve)

Cut-the-curve a nivel de PALABRA — el corte hacia la izquierda más fuerte para costuras texto a texto. Las palabras salientes se desvanecen en sus propias curvas; las palabras entrantes entran en cascada a medio vuelo — una ola que el ojo monta a través de la costura.

Ámbito: escrito por worker dentro de una composición multigolpe (capas .beat de fotograma completo apiladas), NO un tipo registry/injector — crea tweens en tramos de palabras, no en wrappers de clip. El límite hacia y desde el bloque de golpe de texto aún obtiene una transición de registry normal. No cuenta contra el presupuesto de 2–3 transiciones.

Parámetro	Valor	Por qué
Recorrido	±230px (~12% fotograma)	recorrido parcial + velocidad > empuje de fotograma completo
Salida	0.34s power4.in	la aceleración ES el corte
Desvanecimiento salida	0.18s, comienza con x	palabra desaparece en ~25–30% del recorrido — sin mancha
Escalonamiento salida	+0.022s en orden de lectura	la línea se pela, no un deslizamiento de bloque
Entrada	0.3s power4.out	segunda mitad del compuesto — emparejamiento de velocidad
Opacidad inicio entrada	0.35	ignición a medio camino; binario 0→1 da un pop
Espacios entrada	0.05s × 0.84 decadencia	cascada que acelera, resuelve compuesta

Reglas:

• Una dirección por cadena, montando la corriente. El zoom inverso es solo el golpe de LLEGADA de la cadena.
• Preestablece todas las palabras a x: +230, opacity: 0 en tiempo de construcción — immediateRender: false solo deja las palabras no iniciadas visibles en reposo.
• Un primer golpe corto puede salir en línea completa: su desvanecimiento termina ~0.02s antes del corte para que aún esté estriado cuando las siguientes palabras se enciendan — sin espacio muerto.
• Solo transform/opacidad (seguro para seek); se aplica escenario base opaco.

5. Rack-Focus Blur-Cut (el corte visible)

La única variante donde el corte es VISTO: un pico de desenfoque de desenfoque oculta un intercambio duro de un solo fotograma — un tiro de enfoque DSLR manual. Úsalo como un floreo ocasional para un intercambio de estado de la MISMA superficie dentro de un tema visual; nunca el límite predeterminado.

Diferencias con los demás: la salida permanece COMPLETAMENTE OPACA hasta el corte (el desenfoque oculta el intercambio — sin desvanecimiento temprano); eases power2.in / power2.out (óptica suave, no impulso).

Reglas:

• Fuego solo en un golpe narrativo, ≤ una vez por ~8s; nunca a mitad de subtítulo o durante una pausa.
• Corta en el pico de DESENFOQUE (≥6px; pico 8–12px, ≤16–18px máx) — intercambiar en el camino hacia arriba muestra el corte.
• Una escala sutil (~1.06 respiración de lente) lo vende como óptica.
• Misma dirección en ambos lados — la ley vectorial aún se aplica. Entrada ≥ duración de salida.
• Desenfoca el wrapper; nunca desenfoque + opacidad en un solo tween en un elemento (error de composición sin cabeza); nunca desenfoques un <video> directamente (envuélvelo).

---

6. Waterfall Entry (llegada en escena — no una costura)

Cascada de LLEGADA escalonada: palabras/elementos entran desde abajo (una dirección consistente), cada uno comienza antes de que el anterior se asiente — una ola que acelera y se resuelve en un diseño compuesto. Tarjetas de título, abridores de segmento, intros de listas/características. El hermano de costura es §4; no mezcles sus reglas:

	§6 Entrada (llegada)	§4 Waterfall Cut (costura)
Opacidad	BINARIA 0→1 mediante tl.set en la entrada — nunca desvanecer	se enciende a 0.35 a medio camino — el desvanecimiento ES el truco de velocidad
Eje predeterminado	Y, desde abajo	X, montando la corriente
Lado saliente	ninguno	las palabras se desvanecen con power4.in espejado

Coreografía:

• Superpón, no encoles — el siguiente elemento comienza dentro de ±2 fotogramas del asentamiento del anterior; los espacios SE ENCOGEN a través de la cascada; el último elemento encaja.
• La velocidad varía según el peso — los elementos pesados/ancla viajan más lejos y más tiempo; las palabras ligeras/puntuación encajan apretadas:

Parámetro	Ancla/pesado	Palabra normal	Ligero/puntuación
Offset Y	60–80px	40–50px	30–48px
Duración	0.16–0.20s	0.13–0.16s	0.10–0.13s
Superposición	espacio de 0–2f	superposición de 1f	superposición de 1–2f

• Ease power4.out (expo.out para más chasquido); nunca .inOut en una entrada.
• Una dirección por cascada.
• Divide la PALABRA FINAL en fragmentos para extender el clímax; los fragmentos viajan más lejos.
• Después del asentamiento, el grupo generalmente se desliza para hacer espacio para el siguiente golpe — eso es §7.

7. Nudge Curve (deslizamiento de grupo en escena — no una costura)

Reposicionamiento lento-rápido-lento de un grupo compuesto (filas de palabras, pilas de tarjetas, listas) para revelar contenido o hacer espacio. Ningún ease incorporado lo produce — power4.inOut se detiene de golpe. Encadena tres tweens en una sola propiedad:

Fase	Ease	Distancia	Tiempo	Sensación
1 subida	power3.in	~10%	~20%	apenas se mueve — el movimiento se registra, sin sacudida
2 ráfaga	none (lineal)	~65%	~18%	~2× px/fotograma promedio — con propósito
3 cola	power4.out	~25%	~62%	arrastre decadente al reposo — elimina el golpe

Reglas:

• La cola es ≥3× la subida en TIEMPO. Si aún golpea: extiende el tiempo de la cola (no la distancia) o usa power5.out.
• La fase 2 permanece lineal — darle ease pierde el contraste de ráfaga.
• Revela nuevo contenido DURANTE la fase 2 — la ráfaga enmascara su aparición.
• Mismas relaciones en vertical; escala las distancias proporcionalmente, mantén las relaciones de tiempo.

---

Cómo elegir una variante

	Zoom-Through	Zoom-Through Inverso	Cut the Curve	Waterfall Cut
Ámbito	Intercambio de texto en escena	Golpe de llegada/remate	Entre escenas	Costura texto a texto
Signo/eje Z	creciendo (empuje)	encogiendo (tirón)	X / Y	X, por palabra
Recorrido/escala	1→1.2, luego 0.75→1	1→0.8, luego 1.25→1	±230px	±230px
Desenfoque pico	10px texto / 18–20 pantalla completa	10px texto / 18–20 pantalla completa	8–10px opcional	ninguno
Eases	power3.in / expo.out	power3.in / expo.out	power4.in / power4.out	power4.in / power4.out
Sensación	avanzando a través de	llegando a	llevado lateralmente	una ola a través de la costura

Anti-patrones

No hagas	En su lugar
Dos o más SEAM en un solo golpe o entre un par de escenas (a menos que una sea §5 a media jugada, que no cuenta como SEAM)	Elige una variante por límite. §4 reemplaza §3 en su ámbito; no los apiles.
§1 o §2 entre escenas separadas cuando no hay una línea Z que las conecte (cámaras separadas)	Usa §3 (o §4 para texto). El eje Z entre escenas no correlacionadas se lee como inconsistencia de espacio.
§5 como límite predeterminado, o dentro de los primeros ~3s de una escena, o en un grupo de límites rápidos	§5 es un floreo narrativo para un intercambio de estado en la misma superficie, no un ritmo.
Barajar elementos dentro de un grupo compuesto en lugar de deslizar el grupo completo (§7)	Mover elementos individuales rompe la composición y añade ruido. Desliza el grupo.
§6 con opacidad transitiva (0→1 a lo largo de la entrada)	Ajuste binario en la entrada (tl.set). El desvanecimiento en la entrada de llegada se lee como deriva.
Animar opacidad y cualquier otra propiedad en el mismo tween en un elemento durante un corte de costura	La opacidad debe ser su propio tween lineal separado (o ser binaria). Mezclarlos causa artefactos de renderizado.

---

Este catálogo es el manual de referencia para toda la animación de transición y texto cinético. Los parámetros deben ser aplicados por workers y registries a través de examples/gsap-implementation.md. Siempre prioriza la continuidad de movimiento sobre los efectos; la velocidad y la dirección son la firma.