From 4e2932292c2a53792169cb9eac40d8a640a6f074 Mon Sep 17 00:00:00 2001 From: erikgh Date: Fri, 21 Aug 2026 14:58:28 -0600 Subject: [PATCH] =?UTF-8?q?docs:=20spec=20de=20la=20nueva=20animaci=C3=B3n?= =?UTF-8?q?=20del=20hero=20=E2=80=94=20=C2=ABLas=20Tres=20L=C3=ADneas?= =?UTF-8?q?=C2=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2026-08-21-animacion-tres-lineas-design.md | 97 +++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 docs/superpowers/specs/2026-08-21-animacion-tres-lineas-design.md diff --git a/docs/superpowers/specs/2026-08-21-animacion-tres-lineas-design.md b/docs/superpowers/specs/2026-08-21-animacion-tres-lineas-design.md new file mode 100644 index 0000000..6eafb04 --- /dev/null +++ b/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.