@ivanalbizu/astro-webgl-hover 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ivanalbizu/astro-webgl-hover",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "description": "WebGL image hover effects for Astro with displacement transitions using Curtains.js and GSAP",
   "author": "Ivan Albizu",
@@ -39,15 +39,15 @@
     "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",
+  "dependencies": {
     "curtainsjs": "^8.1.6",
     "gsap": "^3.12.7",
     "lil-gui": "^0.19.2"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "astro": "^5.16.9"
   }
 }

package/src/components/WebglHoverImages.astro

@@ -51,8 +51,21 @@ const {
 <slot />
 
 <script>
-  import { initWebglHover } from '../lib/webgl-hover';
+  import { initWebglHover, destroyWebglHover } from '../lib/webgl-hover';
+
+  // Initial load
   initWebglHover();
+
+  // Re-initialize after View Transitions navigation
+  document.addEventListener('astro:page-load', () => {
+    destroyWebglHover();
+    initWebglHover();
+  });
+
+  // Cleanup before navigation
+  document.addEventListener('astro:before-swap', () => {
+    destroyWebglHover();
+  });
 </script>
 
 <style is:global>

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

@@ -19,6 +19,10 @@ export * from './config';
 export * from './performance';
 export * from './utils';
 
+// Store references for cleanup
+let currentInstances: WebglHover[] = [];
+let currentCurtains: any = null;
+
 function getConfigFromDOM(): WebglHoverConfig {
   const configEl = document.getElementById('webgl-hover-config');
 
@@ -250,9 +254,31 @@ function initDebugMode(instances: WebglHover[], config: WebglHoverConfig): void
   });
 }
 
+export function destroyWebglHover(): void {
+  // Destroy all instances
+  currentInstances.forEach((instance) => instance.destroy());
+  currentInstances = [];
+
+  // Dispose Curtains
+  if (currentCurtains) {
+    currentCurtains.dispose();
+    currentCurtains = null;
+  }
+
+  // Remove canvas container
+  const container = document.getElementById('canvas-container');
+  if (container) {
+    container.remove();
+  }
+}
+
 export function initWebglHover(): WebglHover[] {
   const planes = document.querySelectorAll('.whi-plane');
 
+  if (!planes.length) {
+    return [];
+  }
+
   if (shouldUseFallback()) {
     applyFallbackStyles(planes);
     return [];
@@ -261,19 +287,19 @@ export function initWebglHover(): WebglHover[] {
   const config = getConfigFromDOM();
   const container = createCanvasContainer();
 
-  const webGLCurtain = new Curtains({
+  currentCurtains = new Curtains({
     container,
     pixelRatio: Math.min(1.5, window.devicePixelRatio),
   });
 
-  const instances: WebglHover[] = [];
+  currentInstances = [];
 
   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));
+      currentInstances.push(new WebglHover(currentCurtains, planeElement, options));
     }
   });
 
@@ -281,13 +307,13 @@ export function initWebglHover(): WebglHover[] {
   window.addEventListener('resize', () => {
     clearTimeout(resizeTimeout);
     resizeTimeout = setTimeout(() => {
-      instances.forEach((instance) => instance.resize());
+      currentInstances.forEach((instance) => instance.resize());
     }, 150);
   });
 
   if (config.debug) {
-    initDebugMode(instances, config);
+    initDebugMode(currentInstances, config);
   }
 
-  return instances;
+  return currentInstances;
 }