docs: spec de la nueva animación del hero — «Las Tres Líneas»
This commit is contained in:
erikgh committed
1 parent
50726dad91
commit
4e2932292c
1 file changed
+97
@@ -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.
|
||||||
Reference in new issue
Block a user