Diseño de movimiento VYBE

¿Qué hace Diseño de movimiento VYBE?

El movimiento es el mensaje. Cada movimiento debe decir algo sobre el sujeto — peso, velocidad, confianza, maravilla — o no debería existir.

Todas las recetas son para HyperFrames: una línea de tiempo GSAP pausada por composición, determinista, seekable. Usa fromTo para entradas, transforma + opacidad + clipPath + filter para animación, nunca propiedades de layout.

Referencias (carga la que necesites)

Archivo	Para
references/animation-principles.md	los 12 principios aplicados a UI/tipografía/gráficos, vocabulario de easing, tablas de temporización
references/transitions.md	14 recetas de transición con código GSAP, y cuándo usar cada una
references/camera-movements.md	dolly, truck, crane, órbita, zoom-through, whip, rack focus, paralaje — 2D y 3D
references/visual-effects.md	resplandor, bloom, fuga de luz, granulado de película, división cromática, desenfoque de movimiento, máscaras, morphs

Las diez reglas

1. Coreografía, no animación. Planea quién se mueve primero, quién responde, quién se sostiene. Una escena es una oración: sujeto → verbo → objeto.
2. El easing es personalidad. expo.out = premium/confiado; back.out = juguetón; power2.inOut = cámara mecánica; sine.inOut = respiración/ambiente; none = deriva constante. Elige 2–3 eases por película y mantén consistencia.
3. Rápido al entrar, lento al asentarse. La mayoría de las entradas: 0.5–0.9s, el 80% del recorrido en el primer 30% del tiempo.
4. Las salidas son más rápidas que las entradas (≈60%) y usan eases .in.
5. El escalonamiento revela jerarquía — 0.04–0.08s para letras, 0.1–0.18s para palabras, 0.3–0.6s para elementos de lista. Nunca escalones todo de manera idéntica.
6. Superpone acciones. El siguiente elemento comienza antes de que termine el anterior (parámetro de posición "<0.2" / tiempos absolutos). Secuencial = robótico.
7. Pausa para leer. ≈0.3s por palabra + 0.5s; líneas finales ≥2s.
8. Siempre algo vivo. Durante las pausas, un push lento (scale 1→1.04), deriva o barrido de luz mantiene vivo el encuadre — pero solo un movimiento ambiente por capa.
9. Varía las transiciones. Como máximo un fundido a negro por película. Prefiere cortes en movimiento, cortes de coincidencia, barridos de máscara, zoom-throughs, elementos compartidos.
10. Respeta el ritmo. Si hay música, cada cambio importante cae en un tiempo (60/bpm); los impactos caen en el tiempo fuerte, la anticipación comienza antes.

Patrones GSAP seguros para seek

const tl = gsap.timeline({ paused: true });
// Entrada: borroso a nítido (premium)
tl.fromTo("#s1-title", { opacity: 0, y: 40, filter: "blur(12px)" },
  { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.9, ease: "expo.out" }, 0.2);
// Revelación por barrido de máscara (editorial)
tl.fromTo("#s1-line", { clipPath: "inset(0 100% 0 0)" }, { clipPath: "inset(0 0% 0 0)", duration: 0.8, ease: "expo.inOut" }, 0.5);
// Dispersión por glifo (en lugar de letterSpacing — que lint rechaza)
gsap.utils.toArray("#s1-word .ch").forEach((c, i, all) => {
  const off = (i - (all.length - 1) / 2) * -30;
  tl.fromTo(c, { x: off, opacity: 0 }, { x: 0, opacity: 1, duration: 1, ease: "expo.out" }, 1 + Math.abs(i - (all.length - 1) / 2) * 0.05);
});
// Conteo ascendente (seekable: onUpdate se ejecuta en cada seek)
const n = { v: 0 }, el = document.getElementById("s1-num");
tl.fromTo(n, { v: 0 }, { v: 97, duration: 1.4, ease: "expo.out", onUpdate: () => (el.textContent = Math.round(n.v)) }, 1.2);
// Pausa ambiente
tl.fromTo("#s1-stack", { scale: 1 }, { scale: 1.04, duration: 3, ease: "sine.inOut" }, 0);
window.__timelines["s1"] = tl;

División de texto: envuelve palabras/letras en <span class="w|ch" style="display:inline-block"> (las transformaciones no funcionan en elementos inline). Mantén los espacios fuera de los spans.

Antes de entregar

• No dos escenas consecutivas comparten el mismo movimiento de entrada.
• Ninguna propiedad se anima dos veces en el mismo elemento en tiempos superpuestos.
• npx hyperframes check La sección de Movimiento está limpia; para auditorías de coreografía ejecuta el script animation-map.mjs incluido con el skill /hyperframes-animation de HyperFrames cuando esté instalado.