cambios en fluid

2026-08-27 19:31:22 -03:00
parent fa04541059
commit d9ad72128a
3 changed files with 243 additions and 7 deletions
@@ -0,0 +1,143 @@
+# 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:
+```javascript
+// 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:
+```css
+/* 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:
+```javascript
+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":
+   ```javascript
+   ['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