Capacidad C29 · Nivel 3

Distorsión de imagen al pasar el ratón

Un shader que vive sobre una imagen, no sobre la página. La foto sigue siendo una etiqueta <img> normal con su texto alternativo.

Detalle de un trabajo de colorimetría capilar

Pasa el ratón por encima. En móvil no se activa: el efecto necesita un puntero que apunte.

Por qué “local” es la capacidad

  • El coste se queda en la imagen. Un shader sobre una foto de 640 px cuesta lo que cuesta esa foto. El mismo efecto de fondo a pantalla completa es otra categoría — y es Nivel 4.
  • La imagen no desaparece del HTML. Google la sigue viendo, el lector de pantalla lee su alt, y si el visitante guarda la página se guarda la foto.
  • Se apaga solo donde no aporta. Sin WebGL, en táctil, o con la preferencia de menos movimiento, el canvas ni se crea.
~110 líneas de WebGL, cero dependencias. El catálogo asignaba three.js a esta capacidad. Es la quinta de cinco en la que la dependencia catalogada resultó innecesaria — aquí porque el efecto es una textura y un desplazamiento, no una escena.

Cuánto se desplazan los píxeles cerca del cursor.

Grande abarca media foto; pequeño es una lupa.

Bajo = el efecto persigue con retardo. Alto = pegado al cursor.


      

    

  






  

    
Qué tienes que mirar

    
Cuatro cosas

    
    
      
  1. Pasa el ratón por la foto. Los píxeles se apartan alrededor del cursor y vuelven al salir.
    2. 
      
  2. Mueve los tres controles mientras lo haces y dime los números que te gusten.
    3. 
      
  3. Pincha con el botón derecho en la foto → «Guardar imagen como…». Funciona: sigue siendo una imagen de verdad, no un canvas.
    4. 
      
  4. Sal de la foto y vuelve a entrar. El efecto aparece y desaparece con una transición corta, no de golpe.
    5.