El Salto Web en estado líquido "pC VERSIÓN"
WebGL + Pointer Events

“Estado líquido” en tu web

Un shader de fluidos que reacciona a tu cursor o dedo, con soporte móvil por Pointer Events, canvas escalado a devicePixelRatio y fallback para half-float. Visual impactante, rendimiento sólido.

🎨 WebGL 📱 Drag en móvil 🖥️ Retina-ready ⚡ FBOs

Qué hace

  • Simula advección y presión en un canvas WebGL.
  • Convierte tu movimiento en “empujes” (splats) que desplazan el color.
  • Funciona con mouse, touch o stylus (arrastrar en móvil).
  • Se redimensiona sin perder nitidez (DPR aware).
Más info técnica

Usa varios framebuffer objects (velocity, pressure, divergence y dye) y shaders dedicados para cada paso (Jacobi, gradient subtract, advection). El input se normaliza a UV para mantener la escala consistente.

Cómo integrarlo

  1. Incluye el canvas y aplica touch-action: none.
  2. Carga tus shaders (fragment + vertex) en etiquetas <script type="x-shader/x-fragment">.
  3. Inicializa WebGL, crea FBOs y enlaza listeners de pointer*.
  4. En el loop: splat → divergence → pressure (iteraciones) → gradiente → advección → display.
<div class="content">
  <img src="tu-imagen.jpg" alt="Fondo"/>
</div>

<canvas id="fluid-canvas" touch-action="none"></canvas>

<div class="overlay">El Salto Web en estado líquido</div>
u_point / u_point_size PRESSURE_ITERATIONS DYE_RESOLUTION VELOCITY_DISSIPATION

Ajustes rápidos

🎯 Radio del splat12–22 px
🌀 Disipación (dye)0.990–0.997
💨 Disipación (vel)0.85–0.93
🔁 Presión (iters)8–16
🧠 Resolución (sim)96–160

* En móvil baja un poco la resolución de dye si buscas máxima FPS.

Accesibilidad & rendimiento

  • Canvas con aria-label y role="img".
  • Evita “scroll hijacking” con touch-action: none solo en el canvas.
  • Usa devicePixelRatio y recrea FBOs al resize.
  • Fallback half-float para iOS (OES_texture_half_float).

CV Andrés

94
Desarrollo webs que cargan rápido y venden mejor. Logística mental de 7 a 3, WordPress ninja de 3 a 9.
VER RECURSO

🔍 Analiza tu web con Inteligencia Artificial – Gratis y al instante

1.451
¿Tu sitio está optimizado? Descúbrelo en segundos con nuestra herramienta de IA y recibe un informe de UX
VER RECURSO

Domina el Arte del CSS para Transformar tus Proyectos Web

31
VER RECURSO
banner

The quiet shame of vibecoding

154
THANK YOU for the feedback, the ideas and the honesty. Building an AI SaaS in public.
VER RECURSO

Agentes de IA para tu e-commerce

75
Esta app te permite diseñar y probar agentes de IA que atienden a tus clientes
VER RECURSO

Experimento Visual con Three.js, Scroll Interactivo y Partículas

209
Una demo 3D experimental creada con Three.js: partículas dinámicas, efecto glitch cinematográfico, movimiento reactivo y scroll interactivo.
VER RECURSO

ChatKit de OpenAI: Revolucionando la Comunicación Digital

202
VER RECURSO

Agentes de IA con LangChain

227
Agentes de IA con LangChain: arquitectura, seguridad y resultados
VER RECURSO

Efecto de estrellas detrás de tu ratón

364
¿Te fascina el cielo estrellado? 🌌🌠 Explora este proyecto "Star Trails with Options" y personaliza la magia del firmamento. 💫🔧
VER RECURSO
Slider CSS Moderno UI/UX Impactante para Landing Pages

Slider responsivo solo HTML y CSS

409
Slider totalmente personalizado que hemos creado utilizando solo HTML y CSS.
VER RECURSO

NBA LEGENDS

369
Leyendas de la NBA: Quiénes son los GOATs de la Historia
VER RECURSO

Cómo mejorar la experiencia de usuario (UX) con un diseño web profesional

2.067
UI/UX en acción: claves para optimizar tu web y aumentar conversiones
VER RECURSO