@ivanalbizu/astro-webgl-hover 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ivan Alabizu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,111 @@
+# astro-webgl-hover
+
+WebGL image hover effects for Astro with displacement transitions using Curtains.js and GSAP.
+
+## Installation
+
+```bash
+npm install astro-webgl-hover curtainsjs gsap
+```
+
+## Usage
+
+```astro
+---
+import { WebglHoverImages, WebglHoverImage } from 'astro-webgl-hover';
+---
+
+<WebglHoverImages>
+  <WebglHoverImage
+    texture0="/image-default.jpg"
+    texture1="/image-hover.jpg"
+    map="/displacements/displacement.jpg"
+  />
+</WebglHoverImages>
+```
+
+## Components
+
+### `<WebglHoverImages>`
+
+Container component that initializes the WebGL context. Wrap all your `<WebglHoverImage>` components inside this.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `durationIn` | `number` | `0.8` | Duration of hover-in animation (seconds) |
+| `durationOut` | `number` | `0.8` | Duration of hover-out animation (seconds) |
+| `easeIn` | `string` | `'power2.out'` | GSAP easing for hover-in |
+| `easeOut` | `string` | `'power2.out'` | GSAP easing for hover-out |
+| `intensity` | `number` | `1` | Displacement intensity |
+| `displacementAngle` | `number` | `0` | Displacement direction (degrees) |
+| `zoom` | `number` | `0` | Zoom amount on hover (0-1) |
+| `imageRotation` | `number` | `0` | Image rotation on hover (degrees) |
+| `noiseSpeed` | `number` | `0.5` | Noise animation speed |
+| `noiseScale` | `number` | `6.0` | Noise texture scale |
+| `rgbShiftIntensity` | `number` | `0` | RGB shift/chromatic aberration intensity |
+| `debug` | `boolean` | `false` | Show debug panel (lil-gui) |
+
+### `<WebglHoverImage>`
+
+Individual image component with hover effect.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `texture0` | `string` | Yes | Default image URL |
+| `texture1` | `string` | Yes | Hover image URL |
+| `map` | `string` | Yes | Displacement map URL |
+
+All props from `<WebglHoverImages>` can also be passed to individual `<WebglHoverImage>` components to override the global settings.
+
+## Displacement Maps
+
+The `map` prop accepts a grayscale image that controls the displacement effect. You can find free displacement maps at:
+
+- [Grayscale displacement textures](https://github.com/robin-dela/hover-effect/tree/master/images)
+- Create your own using Photoshop/GIMP noise filters
+
+## Debug Mode
+
+Enable `debug={true}` on `<WebglHoverImages>` to show a control panel where you can adjust all parameters in real-time.
+
+```astro
+<WebglHoverImages debug={true}>
+  <!-- ... -->
+</WebglHoverImages>
+```
+
+## Advanced Usage
+
+You can also import the library directly for more control:
+
+```typescript
+import { initWebglHover, WebglHover } from 'astro-webgl-hover';
+
+// Initialize manually
+const instances = initWebglHover();
+
+// Control individual instances
+instances[0].setProgress(0.5);
+instances[0].destroy();
+```
+
+## Performance
+
+The library includes several optimizations:
+
+- Fallback for low-performance devices
+- Render loop pauses when not animating
+- Debounced resize handler
+- Optimized mesh segments
+
+## Browser Support
+
+Requires WebGL support. Falls back to static images on unsupported devices.
+
+## License
+
+MIT

package/index.ts

@@ -0,0 +1,16 @@
+/**
+ * astro-webgl-hover
+ *
+ * WebGL image hover effects for Astro using Curtains.js and GSAP
+ */
+
+// Components (for Astro users)
+export { default as WebglHoverImages } from './src/components/WebglHoverImages.astro';
+export { default as WebglHoverImage } from './src/components/WebglHoverImage.astro';
+
+// Library exports (for advanced usage)
+export { WebglHover } from './src/lib/webgl-hover/WebglHover';
+export { initWebglHover } from './src/lib/webgl-hover/index';
+export * from './src/lib/webgl-hover/config';
+export * from './src/lib/webgl-hover/utils';
+export * from './src/lib/webgl-hover/performance';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@ivanalbizu/astro-webgl-hover",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "WebGL image hover effects for Astro with displacement transitions using Curtains.js and GSAP",
+  "author": "Ivan Alabizu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivanalabizu/astro-webgl-hover"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "webgl",
+    "hover",
+    "image",
+    "effect",
+    "displacement",
+    "curtainsjs",
+    "gsap",
+    "animation"
+  ],
+  "exports": {
+    ".": "./index.ts",
+    "./components": {
+      "import": "./src/components/index.ts"
+    }
+  },
+  "files": [
+    "index.ts",
+    "src/components/",
+    "src/lib/",
+    "src/shaders/"
+  ],
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0",
+    "curtainsjs": "^8.0.0",
+    "gsap": "^3.0.0"
+  },
+  "devDependencies": {
+    "astro": "^5.16.9",
+    "curtainsjs": "^8.1.6",
+    "gsap": "^3.12.7",
+    "lil-gui": "^0.19.2"
+  }
+}

package/src/components/WebglHoverImage.astro

@@ -0,0 +1,61 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  texture0: string;
+  texture1: string;
+  map: string;
+  durationIn?: number;
+  durationOut?: number;
+  easeIn?: string;
+  easeOut?: string;
+  displacementAngle?: number; // Ángulo del desplazamiento en grados
+  intensity?: number;
+  zoom?: number;
+  imageRotation?: number; // Rotación de la imagen en grados
+  noiseSpeed?: number;
+  noiseScale?: number;
+  rgbShiftIntensity?: number;
+  alt?: string;
+  imgAttributes?: HTMLAttributes<'img'>;
+  width?: number;
+  height?: number;
+  width1?: number;
+  height1?: number;
+}
+
+const { texture0, texture1, map, durationIn, durationOut, easeIn, easeOut, displacementAngle, intensity, zoom, imageRotation, noiseSpeed, noiseScale, rgbShiftIntensity, alt = "", imgAttributes = {}, width = 382, height = 640, width1, height1, ...rest } = Astro.props;
+
+const { loading = "lazy", ...restImgAttributes } = imgAttributes;
+const finalWidth1 = width1 || width;
+const finalHeight1 = height1 || height;
+---
+
+<div class:list={["whi-slide", rest.class]} {...rest} data-width={width} data-height={height} data-width1={finalWidth1} data-height1={finalHeight1} data-duration-in={durationIn} data-duration-out={durationOut} data-ease-in={easeIn} data-ease-out={easeOut} data-displacement-angle={displacementAngle} data-intensity={intensity} data-zoom={zoom} data-image-rotation={imageRotation} data-noise-speed={noiseSpeed} data-noise-scale={noiseScale} data-rgb-shift-intensity={rgbShiftIntensity}>
+  <div class="whi-plane">
+    <img data-sampler="texture0" src={texture0} alt={alt} loading={loading} width={width} height={height} {...restImgAttributes} crossorigin="anonymous" />
+    <img data-sampler="texture1" src={texture1} aria-hidden="true" alt="" loading={loading} crossorigin="anonymous" />
+    <img data-sampler="map" src={map} aria-hidden="true" alt="" loading={loading} crossorigin="anonymous" />
+  </div>
+  <slot />
+</div>
+
+<style lang="scss" define:vars={{ width, height }}>
+  .whi-plane {
+    aspect-ratio: var(--width) / var(--height);
+    position: relative;
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      pointer-events: none;
+    }
+    img[data-sampler="texture0"] {
+      opacity: 1;
+      transition: opacity 0.5s ease-out;
+    }
+  }
+</style>

package/src/components/WebglHoverImages.astro

@@ -0,0 +1,68 @@
+---
+interface Props {
+  durationIn?: number;
+  durationOut?: number;
+  easeIn?: string;
+  easeOut?: string;
+  displacementAngle?: number;
+  intensity?: number;
+  zoom?: number;
+  imageRotation?: number;
+  noiseSpeed?: number;
+  noiseScale?: number;
+  rgbShiftIntensity?: number;
+  debug?: boolean;
+}
+
+const {
+  durationIn = 0.8,
+  durationOut = 0.8,
+  easeIn = 'power2.out',
+  easeOut = 'power2.out',
+  displacementAngle = 0,
+  intensity = 1,
+  zoom = 0,
+  imageRotation = 0,
+  noiseSpeed = 0.5,
+  noiseScale = 6.0,
+  rgbShiftIntensity = 0,
+  debug = false,
+} = Astro.props;
+---
+
+<div
+  id="webgl-hover-config"
+  data-debug={String(debug)}
+  data-duration-in={durationIn}
+  data-duration-out={durationOut}
+  data-ease-in={easeIn}
+  data-ease-out={easeOut}
+  data-displacement-angle={displacementAngle}
+  data-intensity={intensity}
+  data-zoom={zoom}
+  data-image-rotation={imageRotation}
+  data-noise-speed={noiseSpeed}
+  data-noise-scale={noiseScale}
+  data-rgb-shift-intensity={rgbShiftIntensity}
+  style="display: none;"
+>
+</div>
+
+<slot />
+
+<script>
+  import { initWebglHover } from '@/lib/webgl-hover';
+  initWebglHover();
+</script>
+
+<style is:global>
+  #canvas-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    pointer-events: none;
+    z-index: -1;
+  }
+</style>

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as WebglHoverImages } from './WebglHoverImages.astro';
+export { default as WebglHoverImage } from './WebglHoverImage.astro';

package/src/lib/webgl-hover/WebglHover.ts

@@ -0,0 +1,233 @@
+/**
+ * Clase principal para manejar efectos WebGL hover con Curtains.js
+ */
+
+import { Plane } from 'curtainsjs';
+import gsap from 'gsap';
+import type { WebglHoverOptions } from './config';
+import { degreesToRadians, calculateDisplacementVector } from './utils';
+import vertexShader from '@/shaders/vertex.glsl?raw';
+import fragmentShader from '@/shaders/fragment.glsl?raw';
+
+export class WebglHover {
+  private webGLCurtain: any;
+  private planeElement: HTMLElement;
+  private plane: any;
+  private params: any;
+
+  private durationIn: number;
+  private durationOut: number;
+  private easeIn: string;
+  private easeOut: string;
+  private zoom: number;
+  private imageRotation: number;
+  private noiseSpeed: number;
+  private noiseScale: number;
+  private rgbShiftIntensity: number;
+  private intensity: number;
+  private displacementAngle: number;
+
+  private hoverEnabled: boolean = true;
+  private isAnimating: boolean = false;
+
+  private boundHandleMouseEnter: () => void;
+  private boundHandleMouseOut: () => void;
+
+  constructor(curtains: any, planeElement: HTMLElement, options: WebglHoverOptions) {
+    this.webGLCurtain = curtains;
+    this.planeElement = planeElement;
+
+    // Bind handlers para poder hacer cleanup
+    this.boundHandleMouseEnter = this.handleMouseEnter.bind(this);
+    this.boundHandleMouseOut = this.handleMouseOut.bind(this);
+
+    this.durationIn = options.durationIn;
+    this.durationOut = options.durationOut;
+    this.easeIn = options.easeIn;
+    this.easeOut = options.easeOut;
+    this.zoom = options.zoom;
+    this.imageRotation = degreesToRadians(options.imageRotation);
+    this.noiseSpeed = options.noiseSpeed;
+    this.noiseScale = options.noiseScale;
+    this.rgbShiftIntensity = options.rgbShiftIntensity;
+    this.intensity = options.intensity;
+    this.displacementAngle = options.displacementAngle;
+
+    const displacement = calculateDisplacementVector(options.intensity, options.displacementAngle);
+
+    this.params = {
+      vertexShader,
+      fragmentShader,
+      widthSegments: 20,
+      heightSegments: 20,
+      uniforms: {
+        time: { name: 'uTime', type: '1f', value: 0 },
+        mousepos: { name: 'uMouse', type: '2f', value: [0, 0] },
+        resolution: { name: 'uReso', type: '2f', value: [innerWidth, innerHeight] },
+        progress: { name: 'uProgress', type: '1f', value: 0 },
+        displacement: { name: 'uDisplacement', type: '2f', value: displacement },
+        zoom: { name: 'uZoom', type: '1f', value: 1 },
+        rotation: { name: 'uRotation', type: '1f', value: 0 },
+        noiseSpeed: { name: 'uNoiseSpeed', type: '1f', value: this.noiseSpeed },
+        noiseScale: { name: 'uNoiseScale', type: '1f', value: this.noiseScale },
+        rgbShift: { name: 'uRgbShift', type: '1f', value: 0 },
+        tex1Scale: { name: 'uTex1Scale', type: '2f', value: options.tex1Scale },
+      },
+    };
+
+    this.initPlane();
+  }
+
+  private initPlane(): void {
+    this.plane = new Plane(this.webGLCurtain, this.planeElement, this.params);
+
+    if (this.plane) {
+      this.plane.onReady(() => {
+        this.startRenderLoop();
+        this.bindEvents();
+        this.hideOriginalImage();
+      });
+    }
+  }
+
+  private startRenderLoop(): void {
+    this.plane.onRender(() => {
+      if (this.isAnimating) {
+        this.plane.uniforms.time.value += 0.01;
+      }
+    });
+  }
+
+  private hideOriginalImage(): void {
+    const img = this.planeElement.querySelector('img[data-sampler="texture0"]') as HTMLElement;
+    if (img) {
+      img.style.opacity = '0';
+    }
+  }
+
+  private bindEvents(): void {
+    this.planeElement.addEventListener('mouseenter', this.boundHandleMouseEnter);
+    this.planeElement.addEventListener('mouseout', this.boundHandleMouseOut);
+  }
+
+  private unbindEvents(): void {
+    this.planeElement.removeEventListener('mouseenter', this.boundHandleMouseEnter);
+    this.planeElement.removeEventListener('mouseout', this.boundHandleMouseOut);
+  }
+
+  private handleMouseEnter(): void {
+    if (!this.hoverEnabled) return;
+
+    this.isAnimating = true;
+
+    const commonIn = {
+      duration: this.durationIn,
+      ease: this.easeIn,
+      overwrite: true,
+    };
+
+    gsap.to(this.plane.uniforms.progress, { ...commonIn, value: 1 });
+    gsap.to(this.plane.uniforms.zoom, { ...commonIn, value: 1 + this.zoom });
+    gsap.to(this.plane.uniforms.rotation, { ...commonIn, value: this.imageRotation });
+    gsap.to(this.plane.uniforms.rgbShift, { ...commonIn, value: this.rgbShiftIntensity });
+  }
+
+  private handleMouseOut(): void {
+    if (!this.hoverEnabled) return;
+
+    const commonOut = {
+      duration: this.durationOut,
+      ease: this.easeOut,
+      overwrite: true,
+      onComplete: () => {
+        this.isAnimating = false;
+      },
+    };
+
+    gsap.to(this.plane.uniforms.progress, { ...commonOut, value: 0 });
+    gsap.to(this.plane.uniforms.zoom, { ...commonOut, value: 1 });
+    gsap.to(this.plane.uniforms.rotation, { ...commonOut, value: 0 });
+    gsap.to(this.plane.uniforms.rgbShift, { ...commonOut, value: 0 });
+  }
+
+  public resize(): void {
+    if (this.plane) {
+      this.plane.uniforms.resolution.value = [window.innerWidth, window.innerHeight];
+    }
+  }
+
+  public setProgress(progress: number): void {
+    if (!this.plane) return;
+
+    this.isAnimating = progress > 0;
+
+    this.plane.uniforms.progress.value = progress;
+    this.plane.uniforms.zoom.value = 1 + this.zoom * progress;
+    this.plane.uniforms.rotation.value = this.imageRotation * progress;
+    this.plane.uniforms.rgbShift.value = this.rgbShiftIntensity * progress;
+  }
+
+  public setHoverEnabled(enabled: boolean): void {
+    this.hoverEnabled = enabled;
+  }
+
+  public destroy(): void {
+    this.unbindEvents();
+    if (this.plane) {
+      this.plane.remove();
+      this.plane = null;
+    }
+  }
+
+  public setDebugHighlight(enabled: boolean): void {
+    if (enabled) {
+      this.planeElement.style.outline = '3px solid #00ff00';
+      this.planeElement.style.outlineOffset = '-3px';
+    } else {
+      this.planeElement.style.outline = '';
+      this.planeElement.style.outlineOffset = '';
+    }
+  }
+
+  public getConfig(): Partial<WebglHoverOptions> {
+    return {
+      durationIn: this.durationIn,
+      durationOut: this.durationOut,
+      easeIn: this.easeIn,
+      easeOut: this.easeOut,
+      zoom: this.zoom,
+      imageRotation: this.imageRotation * (180 / Math.PI), // radians to degrees
+      noiseSpeed: this.noiseSpeed,
+      noiseScale: this.noiseScale,
+      rgbShiftIntensity: this.rgbShiftIntensity,
+      intensity: this.intensity,
+      displacementAngle: this.displacementAngle,
+    };
+  }
+
+  public updateConfig(config: Partial<WebglHoverOptions>): void {
+    if (config.durationIn !== undefined) this.durationIn = config.durationIn;
+    if (config.durationOut !== undefined) this.durationOut = config.durationOut;
+    if (config.easeIn !== undefined) this.easeIn = config.easeIn;
+    if (config.easeOut !== undefined) this.easeOut = config.easeOut;
+    if (config.zoom !== undefined) this.zoom = config.zoom;
+    if (config.imageRotation !== undefined) this.imageRotation = degreesToRadians(config.imageRotation);
+    if (config.rgbShiftIntensity !== undefined) this.rgbShiftIntensity = config.rgbShiftIntensity;
+    if (config.intensity !== undefined) this.intensity = config.intensity;
+    if (config.displacementAngle !== undefined) this.displacementAngle = config.displacementAngle;
+
+    if (this.plane) {
+      if (config.noiseSpeed !== undefined) {
+        this.noiseSpeed = config.noiseSpeed;
+        this.plane.uniforms.noiseSpeed.value = this.noiseSpeed;
+      }
+      if (config.noiseScale !== undefined) {
+        this.noiseScale = config.noiseScale;
+        this.plane.uniforms.noiseScale.value = this.noiseScale;
+      }
+
+      const displacement = calculateDisplacementVector(this.intensity, this.displacementAngle);
+      this.plane.uniforms.displacement.value = displacement;
+    }
+  }
+}

package/src/lib/webgl-hover/config.ts

@@ -0,0 +1,48 @@
+/**
+ * Configuración e interfaces para WebGL Hover
+ */
+
+export interface WebglHoverOptions {
+  durationIn: number;
+  durationOut: number;
+  easeIn: string;
+  easeOut: string;
+  intensity: number;
+  displacementAngle: number;
+  zoom: number;
+  imageRotation: number;
+  noiseSpeed: number;
+  noiseScale: number;
+  rgbShiftIntensity: number;
+  tex1Scale: [number, number];
+}
+
+export interface WebglHoverConfig {
+  durationIn: number;
+  durationOut: number;
+  easeIn: string;
+  easeOut: string;
+  displacementAngle: number;
+  intensity: number;
+  zoom: number;
+  imageRotation: number;
+  noiseSpeed: number;
+  noiseScale: number;
+  rgbShiftIntensity: number;
+  debug: boolean;
+}
+
+export const DEFAULT_CONFIG: WebglHoverConfig = {
+  durationIn: 0.8,
+  durationOut: 0.8,
+  easeIn: 'power2.out',
+  easeOut: 'power2.out',
+  displacementAngle: 0,
+  intensity: 1,
+  zoom: 0.1,
+  imageRotation: 0,
+  noiseSpeed: 0.5,
+  noiseScale: 6.0,
+  rgbShiftIntensity: 0,
+  debug: false,
+};

package/src/lib/webgl-hover/index.ts

@@ -0,0 +1,293 @@
+/**
+ * WebGL Hover - Punto de entrada principal
+ *
+ * Inicializa efectos WebGL hover con Curtains.js y GSAP
+ */
+
+import { Curtains } from 'curtainsjs';
+import { WebglHover } from './WebglHover';
+import { DEFAULT_CONFIG, type WebglHoverConfig, type WebglHoverOptions } from './config';
+import { shouldUseFallback, applyFallbackStyles } from './performance';
+import {
+  getAttributeAsFloat,
+  getAttributeAsString,
+  calculateTextureScale,
+} from './utils';
+
+export { WebglHover } from './WebglHover';
+export * from './config';
+export * from './performance';
+export * from './utils';
+
+function getConfigFromDOM(): WebglHoverConfig {
+  const configEl = document.getElementById('webgl-hover-config');
+
+  if (!configEl) {
+    return DEFAULT_CONFIG;
+  }
+
+  return {
+    durationIn: parseFloat(configEl.dataset.durationIn || String(DEFAULT_CONFIG.durationIn)),
+    durationOut: parseFloat(configEl.dataset.durationOut || String(DEFAULT_CONFIG.durationOut)),
+    easeIn: configEl.dataset.easeIn || DEFAULT_CONFIG.easeIn,
+    easeOut: configEl.dataset.easeOut || DEFAULT_CONFIG.easeOut,
+    intensity: parseFloat(configEl.dataset.intensity || String(DEFAULT_CONFIG.intensity)),
+    displacementAngle: parseFloat(configEl.dataset.displacementAngle || String(DEFAULT_CONFIG.displacementAngle)),
+    zoom: parseFloat(configEl.dataset.zoom || String(DEFAULT_CONFIG.zoom)),
+    imageRotation: parseFloat(configEl.dataset.imageRotation || String(DEFAULT_CONFIG.imageRotation)),
+    noiseSpeed: parseFloat(configEl.dataset.noiseSpeed || String(DEFAULT_CONFIG.noiseSpeed)),
+    noiseScale: parseFloat(configEl.dataset.noiseScale || String(DEFAULT_CONFIG.noiseScale)),
+    rgbShiftIntensity: parseFloat(configEl.dataset.rgbShiftIntensity || String(DEFAULT_CONFIG.rgbShiftIntensity)),
+    debug: configEl.dataset.debug === 'true',
+  };
+}
+
+function getOptionsFromSlide(slide: Element, defaults: WebglHoverConfig): WebglHoverOptions {
+  const planeWidth = getAttributeAsFloat(slide, 'data-width', 1);
+  const planeHeight = getAttributeAsFloat(slide, 'data-height', 1);
+  const tex1Width = getAttributeAsFloat(slide, 'data-width1', planeWidth);
+  const tex1Height = getAttributeAsFloat(slide, 'data-height1', planeHeight);
+
+  const tex1Scale = calculateTextureScale(planeWidth, planeHeight, tex1Width, tex1Height);
+
+  return {
+    durationIn: getAttributeAsFloat(slide, 'data-duration-in', defaults.durationIn),
+    durationOut: getAttributeAsFloat(slide, 'data-duration-out', defaults.durationOut),
+    easeIn: getAttributeAsString(slide, 'data-ease-in', defaults.easeIn),
+    easeOut: getAttributeAsString(slide, 'data-ease-out', defaults.easeOut),
+    intensity: getAttributeAsFloat(slide, 'data-intensity', defaults.intensity),
+    displacementAngle: getAttributeAsFloat(slide, 'data-displacement-angle', defaults.displacementAngle),
+    zoom: getAttributeAsFloat(slide, 'data-zoom', defaults.zoom),
+    imageRotation: getAttributeAsFloat(slide, 'data-image-rotation', defaults.imageRotation),
+    noiseSpeed: getAttributeAsFloat(slide, 'data-noise-speed', defaults.noiseSpeed),
+    noiseScale: getAttributeAsFloat(slide, 'data-noise-scale', defaults.noiseScale),
+    rgbShiftIntensity: getAttributeAsFloat(slide, 'data-rgb-shift-intensity', defaults.rgbShiftIntensity),
+    tex1Scale,
+  };
+}
+
+function createCanvasContainer(): HTMLElement {
+  let container = document.getElementById('canvas-container');
+
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'canvas-container';
+    document.body.appendChild(container);
+  }
+
+  return container;
+}
+
+function initDebugMode(instances: WebglHover[], config: WebglHoverConfig): void {
+  import('lil-gui').then(({ default: GUI }) => {
+    const gui = new GUI({ title: 'WebGL Hover Debug' });
+
+    // Selector de instancia (sin opción "All")
+    const targetOptions: Record<string, number> = {};
+    instances.forEach((_, i) => {
+      targetOptions[`Image ${i + 1}`] = i;
+    });
+
+    const selectorConfig = { target: 0 };
+
+    const getTargetInstance = (): WebglHover => {
+      return instances[selectorConfig.target];
+    };
+
+    // Cargar config inicial de la primera imagen
+    const initialConfig = instances[0].getConfig();
+    const debugConfig = {
+      intensity: initialConfig.intensity ?? config.intensity,
+      displacementAngle: initialConfig.displacementAngle ?? config.displacementAngle,
+      zoom: initialConfig.zoom ?? config.zoom,
+      imageRotation: initialConfig.imageRotation ?? config.imageRotation,
+      noiseSpeed: initialConfig.noiseSpeed ?? config.noiseSpeed,
+      noiseScale: initialConfig.noiseScale ?? config.noiseScale,
+      rgbShiftIntensity: initialConfig.rgbShiftIntensity ?? config.rgbShiftIntensity,
+      durationIn: initialConfig.durationIn ?? config.durationIn,
+      durationOut: initialConfig.durationOut ?? config.durationOut,
+      easeIn: initialConfig.easeIn ?? config.easeIn,
+      easeOut: initialConfig.easeOut ?? config.easeOut,
+    };
+
+    const timelineConfig = {
+      progress: 0,
+      manualControl: false,
+    };
+
+    // Controllers para actualizar valores al cambiar de imagen
+    const controllers: any[] = [];
+    // Controllers de animación (se deshabilitan en manual mode)
+    const animControllers: any[] = [];
+
+    const loadConfigFromInstance = (index: number) => {
+      const instanceConfig = instances[index].getConfig();
+      debugConfig.intensity = instanceConfig.intensity ?? debugConfig.intensity;
+      debugConfig.displacementAngle = instanceConfig.displacementAngle ?? debugConfig.displacementAngle;
+      debugConfig.zoom = instanceConfig.zoom ?? debugConfig.zoom;
+      debugConfig.imageRotation = instanceConfig.imageRotation ?? debugConfig.imageRotation;
+      debugConfig.noiseSpeed = instanceConfig.noiseSpeed ?? debugConfig.noiseSpeed;
+      debugConfig.noiseScale = instanceConfig.noiseScale ?? debugConfig.noiseScale;
+      debugConfig.rgbShiftIntensity = instanceConfig.rgbShiftIntensity ?? debugConfig.rgbShiftIntensity;
+      debugConfig.durationIn = instanceConfig.durationIn ?? debugConfig.durationIn;
+      debugConfig.durationOut = instanceConfig.durationOut ?? debugConfig.durationOut;
+      debugConfig.easeIn = instanceConfig.easeIn ?? debugConfig.easeIn;
+      debugConfig.easeOut = instanceConfig.easeOut ?? debugConfig.easeOut;
+
+      // Actualizar todos los controllers
+      controllers.forEach((c) => c.updateDisplay());
+    };
+
+    // Highlight inicial en la primera imagen
+    instances[0].setDebugHighlight(true);
+
+    gui.add(selectorConfig, 'target', targetOptions).name('Target').onChange((index: number) => {
+      // Quitar highlight de todas y poner en la seleccionada
+      instances.forEach((inst, i) => inst.setDebugHighlight(i === index));
+
+      loadConfigFromInstance(index);
+      // Reset timeline progress al cambiar
+      timelineConfig.progress = 0;
+      controllers.forEach((c) => c.updateDisplay());
+    });
+
+    const updateTargetInstance = () => {
+      getTargetInstance().updateConfig(debugConfig);
+    };
+
+    const setTargetProgress = (value: number) => {
+      getTargetInstance().setProgress(value);
+    };
+
+    const setTargetHoverEnabled = (enabled: boolean) => {
+      getTargetInstance().setHoverEnabled(enabled);
+    };
+
+    // Timeline folder
+    const folderTimeline = gui.addFolder('Timeline');
+    controllers.push(
+      folderTimeline
+        .add(timelineConfig, 'progress', 0, 1, 0.01)
+        .name('Progress')
+        .onChange((value: number) => {
+          if (timelineConfig.manualControl) {
+            setTargetProgress(value);
+          }
+        })
+    );
+
+    controllers.push(
+      folderTimeline.add(timelineConfig, 'manualControl').name('Manual Control').onChange((enabled: boolean) => {
+        setTargetHoverEnabled(!enabled);
+        if (enabled) {
+          setTargetProgress(timelineConfig.progress);
+        } else {
+          // Volver a estado de reposo al desactivar
+          setTargetProgress(0);
+          timelineConfig.progress = 0;
+          controllers.forEach((c) => c.updateDisplay());
+        }
+        // Deshabilitar/habilitar controles de animación
+        animControllers.forEach((c) => c.enable(!enabled));
+      })
+    );
+
+    folderTimeline.open();
+
+    // Parameters folder
+    const folderParams = gui.addFolder('Parameters');
+    controllers.push(folderParams.add(debugConfig, 'intensity', 0, 2).name('Intensity').onChange(updateTargetInstance));
+    controllers.push(folderParams.add(debugConfig, 'displacementAngle', 0, 360).name('Disp. Angle').onChange(updateTargetInstance));
+    controllers.push(folderParams.add(debugConfig, 'zoom', 0, 0.5).name('Zoom').onChange(updateTargetInstance));
+    controllers.push(folderParams.add(debugConfig, 'imageRotation', -45, 45).name('Rotation (deg)').onChange(updateTargetInstance));
+    controllers.push(folderParams.add(debugConfig, 'noiseSpeed', 0, 2).name('Noise Speed').onChange(updateTargetInstance));
+    controllers.push(folderParams.add(debugConfig, 'noiseScale', 0, 20).name('Noise Scale').onChange(updateTargetInstance));
+    controllers.push(folderParams.add(debugConfig, 'rgbShiftIntensity', 0, 1).name('RGB Shift').onChange(updateTargetInstance));
+
+    // Animation folder (se deshabilitan en manual mode)
+    const folderAnim = gui.addFolder('Animation');
+    const durationInCtrl = folderAnim.add(debugConfig, 'durationIn', 0.1, 3).name('Duration In').onChange(updateTargetInstance);
+    const durationOutCtrl = folderAnim.add(debugConfig, 'durationOut', 0.1, 3).name('Duration Out').onChange(updateTargetInstance);
+    controllers.push(durationInCtrl, durationOutCtrl);
+    animControllers.push(durationInCtrl, durationOutCtrl);
+
+    const easingOptions = [
+      'none',
+      'power1.in',
+      'power1.out',
+      'power1.inOut',
+      'power2.in',
+      'power2.out',
+      'power2.inOut',
+      'power3.in',
+      'power3.out',
+      'power3.inOut',
+      'power4.in',
+      'power4.out',
+      'power4.inOut',
+      'back.in(1.7)',
+      'back.out(1.7)',
+      'back.inOut(1.7)',
+      'elastic.out(1, 0.3)',
+      'elastic.out(1, 0.5)',
+      'elastic.inOut(1, 0.3)',
+      'bounce.out',
+      'bounce.inOut',
+      'circ.in',
+      'circ.out',
+      'circ.inOut',
+      'expo.in',
+      'expo.out',
+      'expo.inOut',
+    ];
+
+    const easeInCtrl = folderAnim.add(debugConfig, 'easeIn', easingOptions).name('Ease In').onChange(updateTargetInstance);
+    const easeOutCtrl = folderAnim.add(debugConfig, 'easeOut', easingOptions).name('Ease Out').onChange(updateTargetInstance);
+    controllers.push(easeInCtrl, easeOutCtrl);
+    animControllers.push(easeInCtrl, easeOutCtrl);
+
+    folderParams.open();
+  });
+}
+
+export function initWebglHover(): WebglHover[] {
+  const planes = document.querySelectorAll('.whi-plane');
+
+  if (shouldUseFallback()) {
+    applyFallbackStyles(planes);
+    return [];
+  }
+
+  const config = getConfigFromDOM();
+  const container = createCanvasContainer();
+
+  const webGLCurtain = new Curtains({
+    container,
+    pixelRatio: Math.min(1.5, window.devicePixelRatio),
+  });
+
+  const instances: WebglHover[] = [];
+
+  document.querySelectorAll('.whi-slide').forEach((slide) => {
+    const planeElement = slide.querySelector('.whi-plane') as HTMLElement;
+
+    if (planeElement) {
+      const options = getOptionsFromSlide(slide, config);
+      instances.push(new WebglHover(webGLCurtain, planeElement, options));
+    }
+  });
+
+  let resizeTimeout: ReturnType<typeof setTimeout>;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      instances.forEach((instance) => instance.resize());
+    }, 150);
+  });
+
+  if (config.debug) {
+    initDebugMode(instances, config);
+  }
+
+  return instances;
+}

package/src/lib/webgl-hover/performance.ts

@@ -0,0 +1,57 @@
+/**
+ * Detección de rendimiento y fallbacks para WebGL Hover
+ */
+
+interface NavigatorWithExtensions extends Navigator {
+  connection?: {
+    saveData?: boolean;
+  };
+  deviceMemory?: number;
+}
+
+export function isLowPerformance(): boolean {
+  const nav = navigator as NavigatorWithExtensions;
+
+  // 1. Detectar modo "Ahorro de datos" del navegador/SO
+  if (nav.connection?.saveData) {
+    return true;
+  }
+
+  // 2. Heurística de Hardware
+  // deviceMemory (RAM en GB) - Solo Chrome/Edge. Valores: 0.25, 0.5, 1, 2, 4, 8...
+  const memory = nav.deviceMemory;
+  // hardwareConcurrency (Núcleos CPU)
+  const cores = navigator.hardwareConcurrency;
+
+  // Si tiene menos de 4GB de RAM o 2 o menos núcleos, asumimos gama baja.
+  return (memory !== undefined && memory < 4) || (cores !== undefined && cores <= 2);
+}
+
+export function prefersReducedMotion(): boolean {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+export function shouldUseFallback(): boolean {
+  return prefersReducedMotion() || isLowPerformance();
+}
+
+export function applyFallbackStyles(planes: NodeListOf<Element>): void {
+  planes.forEach((plane) => {
+    const planeEl = plane as HTMLElement;
+    planeEl.style.position = 'relative';
+
+    const img = planeEl.querySelector('img[data-sampler="texture0"]') as HTMLImageElement;
+    if (img) {
+      Object.assign(img.style, {
+        display: 'block',
+        opacity: '1',
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+      });
+    }
+  });
+}

package/src/lib/webgl-hover/utils.ts

@@ -0,0 +1,53 @@
+/**
+ * Funciones utilitarias para WebGL Hover
+ */
+
+export function getAttributeAsFloat(
+  element: Element,
+  attribute: string,
+  defaultValue: number
+): number {
+  const value = element.getAttribute(attribute);
+  return value !== null ? parseFloat(value) : defaultValue;
+}
+
+export function getAttributeAsString(
+  element: Element,
+  attribute: string,
+  defaultValue: string
+): string {
+  return element.getAttribute(attribute) || defaultValue;
+}
+
+export function degreesToRadians(degrees: number): number {
+  return degrees * (Math.PI / 180);
+}
+
+export function calculateDisplacementVector(
+  intensity: number,
+  angleInDegrees: number
+): [number, number] {
+  const angleRad = degreesToRadians(angleInDegrees);
+  return [intensity * Math.cos(angleRad), intensity * Math.sin(angleRad)];
+}
+
+export function calculateTextureScale(
+  planeWidth: number,
+  planeHeight: number,
+  textureWidth: number,
+  textureHeight: number
+): [number, number] {
+  const planeRatio = planeWidth / planeHeight;
+  const textureRatio = textureWidth / textureHeight;
+
+  let scaleX = 1.0;
+  let scaleY = 1.0;
+
+  if (planeRatio > textureRatio) {
+    scaleX = planeRatio / textureRatio;
+  } else {
+    scaleY = textureRatio / planeRatio;
+  }
+
+  return [scaleX, scaleY];
+}

package/src/shaders/fragment.glsl

@@ -0,0 +1,145 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define PI2 6.28318530718
+#define PI 3.14159265359
+#define S(a,b,n) smoothstep(a,b,n)
+
+uniform float uTime;
+uniform float uProgress;
+uniform vec2 uReso;
+uniform vec2 uMouse;
+uniform vec2 uDisplacement;
+uniform float uZoom;
+uniform float uRotation;
+uniform float uNoiseSpeed;
+uniform float uNoiseScale;
+uniform float uRgbShift;
+uniform vec2 uTex1Scale;
+
+// get our varyings
+varying vec3 vVertexPosition;
+varying vec2 vTextureCoord0;
+varying vec2 vTextureCoord1;
+varying vec2 vTextureCoordMap;
+
+// the uniform we declared inside our javascript
+
+// our texture sampler (default name, to use a different name please refer to the documentation)
+uniform sampler2D texture0;
+uniform sampler2D texture1;
+uniform sampler2D map;
+
+//
+// Description : Array and textureless GLSL 2D simplex noise function.
+//      Author : Ian McEwan, Ashima Arts.
+//  Maintainer : stegu
+//     Lastmod : 20110822 (ijm)
+//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
+//               Distributed under the MIT License. See LICENSE file.
+//               https://github.com/ashima/webgl-noise
+//               https://github.com/stegu/webgl-noise
+//
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
+
+float snoise(vec2 v){
+    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+    vec2 i = floor(v + dot(v, C.yy));
+    vec2 x0 = v - i + dot(i, C.xx);
+    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+    vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+    i = mod289(i);
+    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+    m = m * m;
+    m = m * m;
+    vec3 x = 2.0 * fract(p * C.www) - 1.0;
+    vec3 h = abs(x) - 0.5;
+    vec3 ox = floor(x + 0.5);
+    vec3 a0 = x - ox;
+    m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+    vec3 g;
+    g.x = a0.x * x0.x + h.x * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+    return 130.0 * dot(m, g);
+}
+
+// http://www.flong.com/texts/code/shapers_exp/
+float exponentialEasing (float x, float a){
+
+  float epsilon = 0.00001;
+  float min_param_a = 0.0 + epsilon;
+  float max_param_a = 1.0 - epsilon;
+  a = max(min_param_a, min(max_param_a, a));
+
+  if (a < 0.5){
+    // emphasis
+    a = 2.0 * a;
+    float y = pow(x, a);
+    return y;
+  } else {
+    // de-emphasis
+    a = 2.0 * (a-0.5);
+    float y = pow(x, 1.0 / (1.-a));
+    return y;
+  }
+}
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+  vec4 color = vec4(0.0);
+  vec2 off1 = vec2(1.411764705882353) * direction;
+  vec2 off2 = vec2(3.2941176470588234) * direction;
+  vec2 off3 = vec2(5.176470588235294) * direction;
+  color += texture2D(image, uv) * 0.1964825501511404;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344;
+  color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732;
+  color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732;
+  color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057;
+  color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057;
+  return color;
+}
+
+void main(){
+  vec2 uv0 = vTextureCoord0;
+  vec2 uv1 = vTextureCoord1;
+
+  vec2 center = vec2(0.5);
+  uv0 = (uv0 - center) * (1.0 / uZoom) * rotate(uRotation) + center; // texture0 uses the plane's aspect ratio
+  uv1 = (uv1 - center) * uTex1Scale * (1.0 / uZoom) * rotate(uRotation) + center; // texture1 is corrected
+
+  float progress0 = uProgress;
+  float progress1 = 1. - uProgress;
+
+  vec4 map = blur13(map, vTextureCoordMap, uReso, vec2(2.)) + 0.5;
+
+  float noise = snoise(vTextureCoordMap * uNoiseScale + vec2(uTime * uNoiseSpeed));
+  vec2 organicDisplacement = uDisplacement * (1.0 + noise * 0.5);
+
+  uv0 += progress0 * map.r * organicDisplacement;
+  uv1 -= progress1 * map.r * organicDisplacement;
+
+  vec2 shift = uDisplacement * uRgbShift * 0.01;
+
+  vec4 c0 = texture2D(texture0, uv0);
+  float r0 = texture2D(texture0, uv0 + shift).r;
+  float b0 = texture2D(texture0, uv0 - shift).b;
+  vec4 color = vec4(r0, c0.g, b0, c0.a);
+
+  vec4 c1 = texture2D(texture1, uv1);
+  float r1 = texture2D(texture1, uv1 + shift).r;
+  float b1 = texture2D(texture1, uv1 - shift).b;
+  vec4 color1 = vec4(r1, c1.g, b1, c1.a);
+
+  gl_FragColor = mix(color, color1, progress0 );          
+}

package/src/shaders/vertex.glsl

@@ -0,0 +1,33 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+// those are the mandatory attributes that the lib sets
+attribute vec3 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+// those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+
+uniform mat4 texture0Matrix;
+uniform mat4 texture1Matrix;
+uniform mat4 mapMatrix;
+
+// if you want to pass your vertex and texture coords to the fragment shader
+varying vec3 vVertexPosition;
+varying vec2 vTextureCoord0;
+varying vec2 vTextureCoord1;
+varying vec2 vTextureCoordMap;
+
+void main() {
+  vec3 vertexPosition = aVertexPosition;
+
+  gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);
+
+  // set the varyings
+  vTextureCoord0 = (texture0Matrix * vec4(aTextureCoord, 0., 1.)).xy;
+  vTextureCoord1 = (texture1Matrix * vec4(aTextureCoord, 0., 1.)).xy;
+  vTextureCoordMap = (mapMatrix * vec4(aTextureCoord, 0., 1.)).xy;
+  vVertexPosition = vertexPosition;
+}