Creeer-Web/docs/superpowers/specs/2026-07-31-hilo-conductor-sistema-visual-design.md

El hilo conductor — sistema visual, ilustración y movimiento

Fecha: 31/jul/2026 Estado: aprobado en brainstorming, pendiente de plan de implementación Origen: mensaje de la dueña del 30/jul/2026 — "súper, sólo le falta algo de gráfico y movimiento"

---

1. Problema

La landing ya tiene contenido correcto y una primera capa de gráfico y movimiento (fondos de puntos, blur-in de títulos, spotlight en tarjetas, carrusel, ilustración de inflexión). Aun así, tres cosas la mantienen por debajo del nivel que la marca merece:

1. No hay hilo visual. Es una pila de diez secciones con cortes duros entre fondos. Nada conecta una sección con la siguiente.
2. Casi no hay ilustración. Existe una sola pieza dibujada (IlustracionInflexion); el resto es iconografía de línea y patrones de puntos. La metáfora gráfica central del Manual de Identidad Visual — Complejidad → Enfoque → Claridad — no está dibujada en ninguna parte de la página.
3. El movimiento compite consigo mismo. Tres elementos se animan solos al mismo tiempo (carrusel del hero, useAutoStep en Mecanismo y en ComoEmpezar), y dos de ellos usan la misma interacción. El resultado se lee como ruido, no como movimiento.

2. Concepto rector: el hilo

Una línea dorada continua atraviesa la landing verticalmente, dibujándose conforme el usuario hace scroll. Entra por el hero, cose sección con sección, se transforma en la ilustración de cada bloque y resuelve en el ≡ del wordmark en el cierre.

No es decoración. Es claridad · dirección · crecimiento dibujado: el hilo es la dirección. Resuelve simultáneamente los tres problemas de arriba — aporta ilustración, aporta movimiento con sentido, y elimina los cortes duros.

Lenguaje gráfico (decidido): line-art geométrico. Trazo fino sin relleno (1.5–3px), derivado del ≡ y del patrón de puntos del manual. Dorado #C4942E sobre azul profundo, azul profundo sobre claro. Sin degradados, sin formas rellenas, sin sombras suaves — ese vocabulario se lee como plantilla y contradice "simple, directo, limpio".

3. Componentes nuevos

Todos son primitivas en components/primitives/, con test co-locado en __tests__/.

3.1 HiloConductor

SVG de altura completa del documento, con pathLength ligado a useScroll de Framer Motion. Se dibuja de arriba hacia abajo conforme baja el usuario.

• Posicionamiento: position: absolute sobre el flujo de la página, no fixed — el hilo pertenece al documento y se desplaza con él; una capa fija se leería como un adorno pegado a la ventana.

• Interfaz: sin props obligatorias. Se monta una sola vez, en app/page.tsx, entre <Header/> y <main>.

• Depende de: framer-motion (useScroll, useTransform), usePrefersReducedMotion.

• Reduced motion: renderiza el trazo completo, estático, sin motion.path.

• Riesgo conocido: motion.path aplica su propio andamiaje de dasharray incluso sin initial/animate, lo que dejó líneas invisibles para reduced-motion en IlustracionInflexion. La rama reducida debe renderizar <path> planos, no motion.path neutralizados. Es el mismo bug ya documentado en ese archivo.

3.2 SecuenciaClaridad — la pieza central

La metáfora del manual, por fin dibujada. Unas 20 líneas cruzadas y desordenadas que convergen progresivamente y se resuelven en el ≡ dorado.

• Interfaz: { variant?: 'completa' | 'hero'; className?: string } (por defecto 'completa').
• Dónde, y por qué en dos lugares: la narrativa se parte en dos actos deliberadamente.
  • Hero → variant="hero": sólo las fases de dispersión y convergencia, sin resolver en el ≡. Plantea la complejidad y deja la tensión abierta. Ocupa el lugar que hoy tiene el Carrusel.
  • FraseAncla → variant="completa": las tres fases, resolviendo en el ≡ dorado justo cuando el copy dice "dejan de crecer por falta de claridad". Es el pago de la tensión abierta en el hero.
• Animación: fases encadenadas por staggerChildren al entrar en viewport — dispersión → convergencia → (sólo en completa) resolución en ≡.
• Nota de marca: el ≡ que produce debe leerse como E, per instrucción de la dueña del 28/jul. Reutiliza el trazado de SimboloTresLineas, no dibuja uno nuevo.

3.3 IlustracionNudo

Líneas enredadas formando un nudo que no se deshace. Dolores es hoy la única sección sin ninguna pieza gráfica, y es la de mayor carga emocional.

• Dónde: Dolores, como elemento lateral o de fondo tenue.
• Interfaz: { className?: string }.

3.4 IlustracionBifurcacion

Dos caminos divergiendo desde un punto único: uno dorado y continuo, otro gris y punteado.

• Dónde: ParaQuien, reforzando el split screen sí/no que ya existe.
• Interfaz: { className?: string }.

3.5 IlustracionConvergencia

Tres trazos que confluyen en uno solo — comunicación, digital y experiencias sirviendo a una sola estrategia.

• Dónde: Disciplinas. Refuerza el lead ya escrito: "No son la promesa — son los medios."
• Interfaz: { className?: string }.

3.6 MarcoRetrato

Marco line-art para el retrato de la estratega.

• Dónde: Estratega, sustituyendo el placeholder de círculo con patrón de puntos.
• Requisito de diseño: debe verse intencional hoy, con el placeholder dentro, y aceptar la foto real de la dueña cuando llegue sin rehacer nada. El hueco de contenido no debe verse como un hueco.
• Interfaz: { children: ReactNode; className?: string }.

3.7 ProgresoLectura

Barra dorada de 2px en el borde inferior del header, ligada a useScroll.

• Dónde: components/layout/Header.tsx.
• Reduced motion: se oculta por completo (es puro feedback de movimiento; estática no comunica nada).

4. Cambios en secciones existentes

4.1 Ritmo de fondos

Hoy Disciplinas → ParaQuien → Estratega son tres secciones blancas seguidas.

Sección	Fondo hoy	Fondo nuevo
Hero	blanco	blanco
FraseAncla	azul profundo	azul profundo
PuntosInflexion	gris claro	gris claro
Dolores	blanco	blanco
Mecanismo	azul + foto	azul + foto
Disciplinas	blanco	blanco
ParaQuien	split blanco/azul	split blanco/azul
Estratega	blanco	gris claro
ComoEmpezar	gris claro	blanco
Cierre	azul profundo	azul profundo

Dos cambios, cero fondos iguales consecutivos.

4.2 Rebalanceo del movimiento

Se quita:

• El Carrusel de dolores en el hero. Rota verbatim las cuatro frases de dolores.quotes, que vuelven a aparecer completas tres secciones más abajo. Duplica contenido, adelanta el golpe emocional y le compite atención al headline. Lo reemplaza SecuenciaClaridad variant="hero" (§3.2) como pieza derecha del hero.
• El useAutoStep de ComoEmpezar. Tener Mecanismo y ComoEmpezar avanzando solos es la misma interacción dos veces en la misma página. Mecanismo la conserva; ComoEmpezar pasa a estado estático con realce por hover/focus.
• El md:opacity-40 sobre pasos no activos (Mecanismo y ComoEmpezar). Hoy dos de cada tres pasos quedan ilegibles hasta que el usuario interactúa. Es un problema de contraste, no de estética. Se sustituye por un realce del paso activo (borde dorado, elevación) dejando los tres legibles.
• Uno de los dos FondoPuntos interactivo del hero. Dos capas siguiendo el cursor a la vez es ruido; queda una.

Se conserva el Carrusel en PuntosInflexion (móvil): ahí sí resuelve un problema real de espacio y replica el patrón de en-ti.com.

Se suma:

• HiloConductor con scroll (§3.1).
• Line-drawing en las cinco ilustraciones nuevas.
• Parallax suave (±20px) en las dos fotos duotono de Mecanismo y ComoEmpezar.
• ProgresoLectura en el header, y compactado del wordmark al bajar.

4.3 Jerarquía tipográfica

Las ocho secciones usan hoy el mismo tratamiento exacto: font-black text-4xl md:text-6xl tracking-tight. Nada distingue una declaración de marca de un encabezado de sección.

Se introducen dos niveles:

• Momento-ancla — FraseAncla, el remate de Dolores, Cierre. Más grande, más aire arriba y abajo, leading más cerrado.
• Sección normal — el resto. Un escalón por debajo, con más peso en el contenido que en el título.

La escala vive en tailwind.config.ts como tokens, no como cadenas de clases repetidas en cada sección.

5. Accesibilidad

• Toda animación nueva pasa por usePrefersReducedMotion() + motionProps(reduced), y las ilustraciones renderizan una rama estática con <path> planos (no motion.path neutralizados) cuando reduced es true.
• Las ilustraciones son decorativas: aria-hidden="true" y focusable="false".
• Eliminar md:opacity-40 mejora el contraste actual; ningún cambio lo empeora.
• Los pasos de Mecanismo siguen siendo role="tab" navegables por teclado; ComoEmpezar deja de necesitar botones al perder el autoplay, y sus pasos vuelven a ser contenido estático.
• El focus-visible dorado global de app/globals.css se mantiene; ningún componente nuevo redefine focus.

6. Rendimiento

• Todas las ilustraciones son SVG inline. Cero peticiones de red, cero imágenes nuevas.
• Se anima únicamente pathLength, opacity y transform — propiedades compuestas, sin layout thrashing.
• HiloConductor usa un solo useScroll a nivel de página, no uno por sección.
• El hero pierde el Carrusel y una capa interactiva de puntos: menos JS ejecutándose en el LCP que hoy.

7. Fuera de alcance

• No se toca el copy de lib/content.ts.
• No se inventan casos ni métricas. Los 2 casos de la dueña siguen pendientes.
• No se agrega escasez al hero. El test negativo de Hero.test.tsx (cupos|cohorte|generación fundadora) sigue vivo.
• No se reordenan las secciones. El orden actual cuenta bien la historia y la dueña lo aprobó el 30/jul.
• No se resuelve la contradicción pendiente entre el manual y la espina del ≡ (documentada en docs/dueña-directrices.md). Eso lo decide la dueña.

8. Huecos de contenido pendientes de la dueña

Ambos se diseñan para verse intencionales hoy y aceptar el material real sin rehacer nada:

Hueco	Estado	Tratamiento
Retrato de la estratega	placeholder	MarcoRetrato (§3.6)
2 casos de claridad estratégica	no entregados	no se maqueta sección fantasma; se añadirá cuando llegue el material

9. Pruebas

Cada primitiva nueva lleva test co-locado en __tests__/, siguiendo el patrón vigente — se verifica contrato y marca, no estilos:

• Renderiza y es aria-hidden.
• Rama de reduced motion produce trazos visibles (regresión directa del bug de motion.path documentado en IlustracionInflexion).
• SecuenciaClaridad resuelve en el símbolo de SimboloTresLineas, no en un trazado propio.

Los tests existentes de secciones deben seguir pasando sin cambios de copy. Los de Hero y ComoEmpezar requieren ajuste estructural por la salida del carrusel y del autoplay — no de copy.

10. Criterios de éxito

1. Un usuario que hace scroll percibe la página como un recorrido continuo, no como diez bloques apilados.
2. La metáfora Complejidad → Enfoque → Claridad del manual es visible, no sólo textual.
3. Hay más movimiento percibido y menos elementos compitiendo que hoy.
4. Con prefers-reduced-motion: reduce la página se ve completa y legible, sin trazos invisibles.
5. pnpm test, pnpm lint y npx tsc --noEmit pasan limpios.