Estado líquido Web GL PC VERSIÓN

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

Incluye el canvas y aplica touch-action: none.
Carga tus shaders (fragment + vertex) en etiquetas <script type="x-shader/x-fragment">.
Inicializa WebGL, crea FBOs y enlaza listeners de pointer*.
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).

El Futuro del SEO: Cómo la IA Transformará las Estrategias en 2025

ChatKit de OpenAI: Revolucionando la Comunicación Digital

Agentes de IA con LangChain

Agentes de IA con LangChain: arquitectura, seguridad y resultados

Efecto de estrellas detrás de tu ratón

211

¿Te fascina el cielo estrellado? 🌌🌠 Explora este proyecto "Star Trails with Options" y personaliza la magia del firmamento. 💫🔧

Slider responsivo solo HTML y CSS

225

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

NBA LEGENDS

129

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

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

1.926

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

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

449

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

Creando un Efecto de Rastro de Imágenes en tu Sitio Web

454

En este tutorial, te guiaré a través del código HTML y JavaScript para implementar este efecto sorprendente en tu propio

Desafío Neon Runner

819

Juega a Neon Runner, un videojuego desarrollado con HTML, CSS y JavaScript gracias a la inteligencia artificial generativa.

CSS 3D wave animation

357

Aprende a crear un carrusel 3D con efecto de profundidad usando solo HTML y CSS. Incluye guía paso a paso,

Sobre Migraciones Web, Redireccionamiento y Visualización de la Propagación de DNS

1.217

🌐 Las migraciones web son un paso crucial en la evolución de un sitio web.