Cut the Curve — el catálogo de técnicas
Cinco técnicas SEAM, un principio: cortar en la velocidad máxima, igualar dirección y velocidad en ambos lados del corte — más las dos técnicas en escena (§6 llegadas, §7 diapositivas). La ley SEAM (ley vectorial, la corriente, el libro mayor, la Puerta Seam) vive en motion-doctrine; léela primero. Este skill son los parámetros y la mecánica. Todas las plantillas de código GSAP (worker + registry): examples/gsap-implementation.md.
Catálogo
| # | Técnica | Alcance | Eje | Uso |
|---|---|---|---|---|
| 1 | Zoom-Through (adelante) | Intercambio de texto en escena | Z, hacia el visor | profundizar en el mismo pensamiento |
| 2 | Inverse Zoom-Through | Llegada / ritmo de remate | Z, alejándose | 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 | Unión texto a texto | X, por palabra | traspaso a nivel de palabra entre ritmos de texto grande |
| 5 | Rack-Focus Blur-Cut | Intercambio de estado en misma superficie | X / Y / Z | el único corte que QUIERES QUE SE VEA — un floreo de DSLR focus-pull |
| 6 | Waterfall Entry | LLEGADA en escena (sin unión) | Y, desde abajo | tarjetas de título, aperturas de segmento, intros de listas |
| 7 | Nudge Curve | Diapositiva de grupo en escena (sin unión) | 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 | inverse zoom-through |
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 unión (corte + ~0.5s), no solo el tween envoltorio: mantén el cuadro entrante compuesto, o autoriza su entrada para que coincida con el signo. Verifica según la regla 7 de la Puerta Seam.
Lógica de desenfoque (todas las variantes Z)
| Sujeto | Desenfoque máximo | Por qué |
|---|---|---|
| Escala de texto (titular, grupo de palabras) | 10px | 20px mancha las letras — el corte se lee como un fallo, no velocidad |
| Superficie de cuadro completo (ventana, tarjeta, captura) | 18–20px | un desenfoque más claro en una superficie grande se lee como un contratiempo de renderizado |
Mismo desenfoque máximo en ambos lados en el cuadro de intercambio. Desenfoca el ENVOLTORIO, nunca los hijos.
1. Zoom-Through (adelante)
Corte con velocidad emparejada en el eje Z; nunca ambos textos visibles. Todo CRECE: el texto saliente acelera hacia la cámara, un intercambio duro se oculta en el desenfoque máximo, el texto entrante sigue creciendo hasta 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) | in: 0.75 | 10px | out: 0 / in: 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. Inverse Zoom-Through (hacia atrás)
El espejo de tirón hacia atrás: el elemento saliente RECEDE; el entrante llega SOBREDIMENSIONADO (como si estuviera justo detrás de la cámara) y se retrae al plano focal. Todo ENCOGE. Úsalo en ritmos de LLEGADA/remate — una línea de remate, una respuesta gigante, un estado final sostenido — 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) | in: 1.25 | 10px | out: 0 / in: 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 sangre completa.
Disciplina de signo: la escena entrante llega como un cuadro compuesto dentro del envoltorio que se retrae — sin intro de crecer desde pequeño en la ventana de unión. Las entradas escalonadas ocurren después de que la retracción se asienta, o comienzan ≥1 y se retraen.
3. Cut the Curve (límite de escena predeterminado)
Corte con velocidad emparejada en X/Y — el predeterminado para TODOS los límites de escena a escena, 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 cuadro (≈230px a 1920) — nunca movimientos fuera de pantalla completos.
| 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 reflejados: salida
power4.in+ entradapower4.out, misma distancia y duración — las dos mitades de unpower4.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. Cronometra el último elemento que se desvanece para que muera justo en el corte — un espacio donde nada se mueve se lee como tiempo muerto.
- Salida 0.2-0.4s; entrada ≥ salida. Desenfoque opcional 8-10px.
- Escenario de etapa:
#rootdebe ser opaco (background: var(--canvas-deep, var(--canvas, #000))) — el corte a medio camino abre una ventana de opacidad sumada < 1 que destella en blanco de lo contrario (verseam-craft).
push-slide existe pero viola el recorrido parcial y la fase de medio movimiento; prefiere cut-the-curve.
4. Waterfall Cut (cut-the-curve palabra por palabra)
Cut-the-curve a granularidad de PALABRA — el corte hacia la izquierda más fuerte para uniones de texto a texto. Las palabras salientes se desvanecen en sus propias curvas; las palabras entrantes caen en cascada a medio vuelo — una ola que el ojo cabalga a través de la unión.
Alcance: autorizado por worker dentro de una composición de múltiples ritmos (capas .beat apiladas de cuadro completo), NO un tipo de registro/injector — modifica tramos de palabras, no envoltorios de clips. El límite hacia y desde el bloque de ritmo de texto aún obtiene una transición de registro normal. No cuenta contra el presupuesto de 2-3 transiciones.
| Parámetro | Valor | Por qué |
|---|---|---|
| Recorrido | ±230px (~12% cuadro) | recorrido parcial + velocidad > empuje de cuadro completo |
| Salida | 0.34s power4.in | la aceleración ES el corte |
| Desvanec. de salida | 0.18s, comienza con x | palabra desaparecida en ~25-30% del recorrido — sin mancha |
| Escalon. de salida | +0.022s orden de lectura | la línea se pela, no un deslizamiento en bloque |
| Entrada | 0.3s power4.out | mitad trasera del compuesto — coincidencia de velocidad |
| Opacidad inicio entrada | 0.35 | encendido a medio camino; el binario 0→1 salta |
| Brechas de entrada | 0.05s × 0.84 decaimiento | cascada acelerada, se resuelve compuesta |
Reglas:
- Una dirección por cadena, cabalgando la corriente. El zoom inverso es solo el ritmo de LLEGADA de la cadena.
- Preconfigura todas las palabras a
x: +230, opacity: 0en tiempo de construcción —immediateRender: falsesolo deja palabras sin iniciar visibles en reposo. - Un primer ritmo corto puede salir en línea completa: su desvanecimiento termina ~0.02s antes del corte, por lo que aún está rayando cuando las siguientes palabras se encienden — sin espacio muerto.
- Solo transform/opacity (seguro para seek); se aplica el escenario de etapa 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 cuadro — un focus-pull de DSLR de mano. Ú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:
- Actívalo solo en un ritmo narrativo, ≤ una vez por ~8s; nunca a mitad de título o durante una pausa.
- Corta en el desenfoque MÁXIMO (≥6px; pico 8-12px, máximo ≤16-18px) — 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. Duración de entrada ≥ salida.
- Desenfoca el envoltorio; nunca desenfoque + opacidad en un tween en un solo elemento (error de composición headless); nunca desenfoques un
<video>directamente (envuélvelo).
6. Waterfall Entry (llegada en escena — no es una unión)
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 acelerada que se resuelve en un diseño compuesto. Tarjetas de título, aperturas de segmento, intros de listas/características. El hermano de unión es §4; no mezcles sus reglas:
| §6 Entrada (llegada) | §4 Waterfall Cut (unión) | |
|---|---|---|
| Opacidad | BINARIA 0→1 mediante tl.set en la entrada — nunca desvanecer | se enciende en 0.35 a medio camino — el desvanecimiento ES el truco de velocidad |
| Eje predet. | Y, desde abajo | X, cabalgando la corriente |
| Lado saliente | ninguno | palabras salen en power4.in reflejado |
Coreografía:
- Superponer, no hacer cola — el siguiente elemento comienza dentro de ±2 cuadros de que el anterior se asiente; las brechas 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 rápido:
| Parámetro | Ancla/pesado | Palabra normal | Ligero/puntuación |
|---|---|---|---|
| Desplaz. Y | 60-80px | 40-50px | 30-48px |
| Duración | 0.16-0.20s | 0.13-0.16s | 0.10-0.13s |
| Superpos. | brecha 0-2f | superposición 1f | superposición 1-2f |
- Ease
power4.out(expo.out para un chasquido extra); nunca.inOuten una entrada. - Una dirección por cascada.
- Divide la ÚLTIMA palabra 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 ritmo — eso es §7.
7. Nudge Curve (diapositiva de grupo en escena — no es una unión)
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 único lo produce — power4.inOut se detiene de golpe. Encadena tres tweens en una 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/cuadro promedio — con propósito |
| 3 cola | power4.out | ~25% | ~62% | arrastre decreciente hasta el reposo — mata 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 — aplicar ease le resta contraste a la ráfaga.
- Revela contenido nuevo DURANTE la fase 2 — la ráfaga enmascara su aparición.
- Mismas proporciones vertical; escala las distancias proporcionalmente, mantén las proporciones de tiempo.
Elegir una variante
| Zoom-Through | Inverse Zoom | Cut the Curve | Waterfall Cut | |
|---|---|---|---|---|
| Alcance | Intercambio de texto en escena | Llegada/ritmo de remate | Entre escenas | Unión 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 cuadro completo | 10px texto / 18-20 cuadro completo | 8-10px opcional | ninguno |
| Eases | power3.in / expo.out | power3.in / expo.out | power4.in / power4.out | power4.in / power4.out |
| Sensación | profundizando | llegando a | llevado de lado | una ola a través de la unión |
Anti-patrones
| No hagas esto …
… [truncado para traducción]