98 lines
4.8 KiB
Markdown
98 lines
4.8 KiB
Markdown
# 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.
|