Estado líquido Web GL PC VERSIÓN - Elsaltoweb

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).

Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan

156

Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan

Explora las Razas en el Juego Lineage 2: Un Análisis Detallado

94

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

1.890

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

Domina el Arte del CSS para Transformar tus Proyectos Web

119

CV Andrés

149

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

The quiet shame of vibecoding

254

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

Agentes de IA para tu e-commerce

133

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

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

292

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

ChatKit de OpenAI: Revolucionando la Comunicación Digital

270

Agentes de IA con LangChain

280

Agentes de IA con LangChain: arquitectura, seguridad y resultados

Efecto de estrellas detrás de tu ratón

414

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

Slider responsivo solo HTML y CSS

477

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