# 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.