Las Tres Líneas — nueva animación del hero

Fecha: 2026-08-21 Estado: aprobado por Erik (brainstorming con visual companion) Reemplaza a: el "Astrolabio de Claridad" actual de components/primitives/EscenaClaridad.tsx

Contexto

La animación Three.js actual del hero (anillos-giroscopio que se alinean en túnel + barras doradas que se proyectan) fue rechazada por la dirección: "no tiene sentido, no existe coherencia, y está mal hecha". En brainstorming con visual companion se compararon tres conceptos animados que narraban literalmente CLARIDAD → DIRECCIÓN → CRECIMIENTO. Erik eligió el concepto A · «Las Tres Líneas» (clic registrado en el companion), con comportamiento final "una vez + reposo vivo".

Decisión previa que se mantiene: la animación sigue siendo Three.js (three + @react-three/fiber ya en package.json).

Concepto

El símbolo de la marca cuenta la historia de los tres pilares. Tres barras doradas —las tres líneas del ≡ de cre≡er— pasan de caos a ascenso:

Fase	Tiempo	Qué pasa
Caos	0–3 s	Las barras flotan enredadas: rotación libre, deriva sinusoidal desacoplada por línea, sin rumbo.
CLARIDAD	3–5.2 s	Se asientan y forman el ≡: quietas, niveladas, exactas.
DIRECCIÓN	5.2–7.2 s	En conjunto se inclinan ~9° y se escalonan: dejan de ser símbolo y se vuelven peldaños.
CRECIMIENTO	7.2–9.6 s	Cada línea se prolonga hacia adelante (la superior más); brillo dorado (emissive) creciente.
Reposo vivo	∞	Pose final quieta + deriva mínima de cámara y pulso de brillo casi imperceptible. Viva, sin distraer del CTA.

Paleta y materiales idénticos a los validados en el preview: dorado #C4942E metálico (metalness 0.8, roughness 0.25, emissive dorado en crecimiento), sobre fondo transparente (el blanco del hero).

Alcance

Solo se reescribe el interior de EscenaClaridad.tsx. Misma ruta, misma API (className), mismo componente exportado.

Queda intacto (cero cambios):

ClaridadHero.tsx — dynamic import con ssr: false, carga lazy por IntersectionObserver (rootMargin 300px), hueco reservado en Hero.tsx.
Hero.tsx — el contenedor h-64 lg:h-[28rem] que reserva el espacio.
Las 4 pruebas de components/primitives/__tests__/EscenaClaridad.test.tsx (son de envoltorio: aria-hidden, tamaño por el caller, frameloop always/demand). Siguen pasando sin edits.

Dentro de EscenaClaridad.tsx:

Se eliminan: Anillos (giroscopio), el túnel, la proyección del ≡, Suelo + texturaSombra (textura canvas) y la pointLight azul claro de relleno. Se conservan ambient + directional + pointLight dorada (las tres luces del preview aprobado).
Queda: un único componente TresLineas con las 3 barras (BoxGeometry trasladada para que el origen quede en un extremo y así "crecer" al escalar en X), cámara frontal con deriva sutil, SiHayWebGL, IntersectionObserver para pausar fuera de vista.
Escena final: 3 meshes + 3 luces. De ~10 objetos a 6.

Comportamiento

Relato una vez (~9.6 s de coreografía) + reposo vivo: tras la fase de crecimiento, la escena queda en pose de escalera con (a) deriva mínima de cámara (sin(t·0.25)·~0.5 en X, la misma del preview) y (b) pulso de emissive ~0.06–0.12 lento. Nada de saltos ni reinicios.
prefers-reduced-motion: se monta directo en la pose final de la escalera, estático (estatico → frameloop: demand). Mismo patrón que hoy.
Fuera de vista: frameloop: demand vía IntersectionObserver existente.
El tiempo no avanza cuando estatico (patrón time.current actual), pero el reposo vivo sigue corriendo para lectores sin reduced-motion mientras la escena esté en vista.

Parámetros de la coreografía (del preview aprobado)

easeOut cúbico (1-(1-t)^3) y tramo(t, inicio, duración) como hoy.
Caos: posiciones sin/cos(t·f_i + φ_i) con frecuencias desacopladas por línea; rotación euler libre por línea.
≡: posiciones y = 0.7 / 0 / −0.7, x = 0, escala base 1; quaternions identidad.
Dirección: inclinación grupal −0.16 rad (~9°); escalonado x = i·1.15−1.15, y = 0.35 + i·0.8.
Crecimiento: escala X = 1 + 0.1·direccion + (0.35 + i·0.35)·crecimiento; emissiveIntensity = crecimiento·(0.1 + i·0.06), en reposo pulsa ±0.03 lento.
Cámara: (0, 0.9, 8) mirando a (0, 0.7, 0); X += sin(t·0.25)·0.5.

Pruebas

Las 4 existentes siguen igual (envoltorio). No se agregan pruebas nuevas: la coreografía es visual y el wrapper ya está blindado.
Único cambio textual: actualizar el comentario de concepto del archivo ("El Astrolabio de Claridad" → "Las Tres Líneas").

Fuera de alcance

Touch/click interactivity, scroll-driven states, variante por variant del hero (hormozi/editorial), cambios de copy, cambios en ClaridadHero.

4.8 KiB Raw Blame History Unescape Escape