docs: spec de la nueva animación del hero — «Las Tres Líneas»

docs/superpowers/specs/2026-08-21-animacion-tres-lineas-design.md

@@ -0,0 +1,97 @@
+# 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.