“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>Ajustes rápidos
🎯 Radio del splat
12–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-labelyrole="img". - Evita “scroll hijacking” con
touch-action: nonesolo en el canvas. - Usa devicePixelRatio y recrea FBOs al resize.
- Fallback half-float para iOS (
OES_texture_half_float).
Esta app te permite diseñar y probar agentes de IA que atienden a tus clientes
Agentes de IA para tu e-commerce
Un experimento visual con HTML y CSS inspirado en televisores CRT, señales analógicas, glitch y estética retro para presentar recursos,
ElSaltoWeb News
MCP Builder IA es una APK Android para generar conectores MCP orientados a negocio. Permite crear proyectos Node.js, definir tools,
MCP Builder IA: APK Android para generar conectores MCP con inteligencia artificial
Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan