@ivanalbizu/astro-webgl-hover 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ivanalbizu/astro-webgl-hover",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "description": "WebGL image hover effects for Astro with displacement transitions using Curtains.js and GSAP",
   "author": "Ivan Alabizu",

package/src/components/WebglHoverImage.astro

@@ -40,22 +40,22 @@ const finalHeight1 = height1 || height;
   <slot />
 </div>
 
-<style lang="scss" define:vars={{ width, height }}>
+<style 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;
-    }
+  }
+  .whi-plane img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .whi-plane imgdata-sampler="texture0"] {
+    opacity: 1;
+    transition: opacity 0.5s ease-out;
   }
 </style>

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

@@ -1,5 +1,5 @@
 /**
- * Clase principal para manejar efectos WebGL hover con Curtains.js
+ * Main class for handling WebGL hover effects with Curtains.js
  */
 
 import { Plane } from 'curtainsjs';
@@ -37,7 +37,7 @@ export class WebglHover {
     this.webGLCurtain = curtains;
     this.planeElement = planeElement;
 
-    // Bind handlers para poder hacer cleanup
+    // Bind handlers for proper cleanup on destroy
     this.boundHandleMouseEnter = this.handleMouseEnter.bind(this);
     this.boundHandleMouseOut = this.handleMouseOut.bind(this);
 
@@ -53,6 +53,7 @@ export class WebglHover {
     this.intensity = options.intensity;
     this.displacementAngle = options.displacementAngle;
 
+    // Convert intensity + angle to displacement vector [x, y]
     const displacement = calculateDisplacementVector(options.intensity, options.displacementAngle);
 
     this.params = {
@@ -90,6 +91,7 @@ export class WebglHover {
     }
   }
 
+  // Only update time uniform when animating (performance optimization)
   private startRenderLoop(): void {
     this.plane.onRender(() => {
       if (this.isAnimating) {
@@ -156,6 +158,7 @@ export class WebglHover {
     }
   }
 
+  // Manual progress control (used by debug panel timeline)
   public setProgress(progress: number): void {
     if (!this.plane) return;
 

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

@@ -1,5 +1,5 @@
 /**
- * Configuración e interfaces para WebGL Hover
+ * Configuration and interfaces for WebGL Hover
  */
 
 export interface WebglHoverOptions {

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

@@ -1,7 +1,7 @@
 /**
- * WebGL Hover - Punto de entrada principal
+ * WebGL Hover - Main Entry Point
  *
- * Inicializa efectos WebGL hover con Curtains.js y GSAP
+ * Initializes WebGL hover effects with Curtains.js and GSAP
  */
 
 import { Curtains } from 'curtainsjs';
@@ -82,7 +82,7 @@ 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")
+    // Instance selector (no "All" option)
     const targetOptions: Record<string, number> = {};
     instances.forEach((_, i) => {
       targetOptions[`Image ${i + 1}`] = i;
@@ -94,7 +94,7 @@ function initDebugMode(instances: WebglHover[], config: WebglHoverConfig): void
       return instances[selectorConfig.target];
     };
 
-    // Cargar config inicial de la primera imagen
+    // Load initial config from the first image
     const initialConfig = instances[0].getConfig();
     const debugConfig = {
       intensity: initialConfig.intensity ?? config.intensity,
@@ -115,9 +115,9 @@ function initDebugMode(instances: WebglHover[], config: WebglHoverConfig): void
       manualControl: false,
     };
 
-    // Controllers para actualizar valores al cambiar de imagen
+    // Controllers to update values when switching images
     const controllers: any[] = [];
-    // Controllers de animación (se deshabilitan en manual mode)
+    // Animation controllers (disabled in manual mode)
     const animControllers: any[] = [];
 
     const loadConfigFromInstance = (index: number) => {
@@ -134,19 +134,19 @@ function initDebugMode(instances: WebglHover[], config: WebglHoverConfig): void
       debugConfig.easeIn = instanceConfig.easeIn ?? debugConfig.easeIn;
       debugConfig.easeOut = instanceConfig.easeOut ?? debugConfig.easeOut;
 
-      // Actualizar todos los controllers
+      // Update all controllers
       controllers.forEach((c) => c.updateDisplay());
     };
 
-    // Highlight inicial en la primera imagen
+    // Initial highlight on the first image
     instances[0].setDebugHighlight(true);
 
     gui.add(selectorConfig, 'target', targetOptions).name('Target').onChange((index: number) => {
-      // Quitar highlight de todas y poner en la seleccionada
+      // Remove highlight from all and apply to selected
       instances.forEach((inst, i) => inst.setDebugHighlight(i === index));
 
       loadConfigFromInstance(index);
-      // Reset timeline progress al cambiar
+      // Reset timeline progress on change
       timelineConfig.progress = 0;
       controllers.forEach((c) => c.updateDisplay());
     });
@@ -182,12 +182,12 @@ function initDebugMode(instances: WebglHover[], config: WebglHoverConfig): void
         if (enabled) {
           setTargetProgress(timelineConfig.progress);
         } else {
-          // Volver a estado de reposo al desactivar
+          // Return to idle state when disabled
           setTargetProgress(0);
           timelineConfig.progress = 0;
           controllers.forEach((c) => c.updateDisplay());
         }
-        // Deshabilitar/habilitar controles de animación
+        // Disable/enable animation controllers
         animControllers.forEach((c) => c.enable(!enabled));
       })
     );
@@ -204,7 +204,7 @@ function initDebugMode(instances: WebglHover[], config: WebglHoverConfig): void
     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)
+    // Animation folder (disabled in 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);

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

@@ -1,5 +1,5 @@
 /**
- * Detección de rendimiento y fallbacks para WebGL Hover
+ * Performance detection and fallbacks for WebGL Hover
  */
 
 interface NavigatorWithExtensions extends Navigator {
@@ -12,18 +12,18 @@ interface NavigatorWithExtensions extends Navigator {
 export function isLowPerformance(): boolean {
   const nav = navigator as NavigatorWithExtensions;
 
-  // 1. Detectar modo "Ahorro de datos" del navegador/SO
+  // 1. Detect "Data Saver" mode from Browser/OS
   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...
+  // 2. Hardware Heuristics
+  // deviceMemory (RAM in GB) - Chrome/Edge only. Values: 0.25, 0.5, 1, 2, 4, 8...
   const memory = nav.deviceMemory;
-  // hardwareConcurrency (Núcleos CPU)
+  // hardwareConcurrency (CPU Cores)
   const cores = navigator.hardwareConcurrency;
 
-  // Si tiene menos de 4GB de RAM o 2 o menos núcleos, asumimos gama baja.
+  // If less than 4GB RAM or 2 or fewer cores, assume low-end.
   return (memory !== undefined && memory < 4) || (cores !== undefined && cores <= 2);
 }
 

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

@@ -1,5 +1,5 @@
 /**
- * Funciones utilitarias para WebGL Hover
+ * Utility functions for WebGL Hover
  */
 
 export function getAttributeAsFloat(