amoryroma/FLUID_APACIGUAR_PLAN.md

Plan para "Apaciguar" el Efecto Fluid sobre Textos

Comportamiento Actual

• El efecto de fluid responde al movimiento del mouse en toda la página (gracias a EventListener en document)
• Cuando el mouse está sobre texto, el efecto es tan intenso que dificulta la lectura
• La dinámica del efecto (color transition, fuerza, etc.) sigue funcionando bien

Objetivo

"Apaciguar" el efecto cuando el mouse está sobre áreas de texto - reducir su impacto visual sin eliminar la interacción.

Opciones viables:

Opción 1: Reducir intensidad basado en elementos (Recomendado)

Enfoque: Detectar cuándo el mouse está sobre elementos de texto/lectura y reducir la intensidad

Implementación:

// En fluid.js, modificar el event listener
document.addEventListener("mousemove", function(e) {
  //Verificar si está sobre elementos que no deben tener efecto fuerte
  const overText = isMouseOverTextElements(e.target);
  
  if (overText) {
    //Modo "apaciguado" - reducir intensidad
    pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 2.0; //Reducido (<10.0)
    pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 2.0;
    
    //Opcional: reducir el color también
    const mutedColor = [colorArr[0]*0.7, colorArr[1]*0.7, colorArr[2]*0.7];
    pointers[0].color = mutedColor;
  } else {
    //Modo normal - comportamiento actual
    pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * 10.0;
    pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * 10.0;
    pointers[0].color = colorArr;
  }
  
  pointers[0].x = e.clientX - canvas.offsetLeft;
  pointers[0].y = e.clientY - canvas.offsetTop;
});

function isMouseOverTextElements(target) {
  //Listar selectores de elementos donde NO queremos efecto fuerte
  const textSelectors = [
    'p', '.hero-content p','h1', '.hero-content h1',
    'h2', 'h3', 'a.sheet-link', '.sheet-link span',
    '.menu-btn', '.eyebrow'
  ];
  
  for (const selector of textSelectors) {
    if (target.closest(selector)) {
      return true;
    }
  }
  return false;
}

Ventajas:

• Automático y contextual
• No cambia la dinámica original en áreas no-textuales
• Conserva completa interacción
• Personalizable qué elementos "apacigar"

---

Opción 2: Transparencia condicional (Alternativa simple)

Enfoque: Reducir opacidad del canvas cuando está sobre texto

Implementación:

/* En styles.css */
p, h1, h2, h3,
.sheet-link span,
.eyebrow {
  position: relative;
}

p::after, h1::after, h2::after, h3::after,
.sheet-link span::after,
.eyebrow::after {
  content: '';
  position: absolute; 
  top: -10px; right: -10px; bottom: -10px; left: -10px;
  z-index: 2;
}

Ventajas:

• Solución CSS-only (no requiere JS)
• Simple implementación

Desventajas:

• No control fino, solo todo o nada
• Puede afectar capas y layout existing

---

Opción 3: Efecto "follow" más suave para texto

Enfoque: Reducir la intensidad (dx/dy multiplier) pero mantener color full

Implementación:

document.addEventListener("mousemove", function(e) {
  const isOverReadableText = /(p|h[1-6]|.eyebrow|.sheet-link)/i.test(e.target.className || e.target.tagName);
  
  const multiplier = isOverReadableText ? 3.0 : 10.0; // Reducido de 10 a 3 sobre texto
  
  pointers[0].dx = (e.clientX - canvas.offsetLeft - pointers[0].x) * multiplier;
  pointers[0].dy = (e.clientY - canvas.offsetTop - pointers[0].y) * multiplier;
  //Restante del código...
});

Ventajas:

• Muy sutil, difícil de notas
• Conserva dinámica del efecto

---

Recomendación Final: Implementar Opción 1 con refinamientos

Cambios específicos:

1. En fluid.js (líneas ~372):

   • Modificar el mousemove handler para detectar elementos de texto
   • Aplicar multiplicador reducido (*2 o *3) y color más tenue en esos casos

2. Lista de selectores para "modo apaciguado":

   ['p', 'h1', 'h2', 'h3', '.hero-content h1', '.eyebrow', 
    'a.sheet-link', '.sheet-link span', '.menu-btn']
   

Beneficios clave:

• 📖 Facilita la lectura al reducir ruido visual sobre texto
• ✨ Conserva el efecto completo en áreas no-textuales (fondo, logos)
• 🎨 Mantiene las transiciones de color entre marcas
• 🚀 Sin cambios en la dinámica del sistema fluid (solo intensidad)

Prueba y ajuste:

• Probar con diferentes multiplicadores (2.0 vs 3.0) para encontrar el balance ideal
• Ajustar selectores CSS según qué elementos necesitan "apaciguamiento"
• Verificar que botones/menu sigan siendo interactivos