iplanwebsites · erbelion · Jun 11, 2025 · Jun 12, 2025 · Jun 12, 2025 · Jun 12, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 .claude
-DEV.md
+DEV.md
+dist/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,5 @@
+node_modules/
+.claude
+DEV.md
+demo/
+dist/demo/
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 A lightweight, customizable solid glass effect library for modern web applications. Create Apple-like glass effects with dynamic distortion, customizable tints, and smooth animations.
 
-![Solid Glass Demo](demo.png)
+![Solid Glass Demo](https://github.com/iplanwebsites/solid-glass/blob/main/demo/demo.png?raw=true)
 
 🚀 **[Live Demo](https://iplanwebsites.github.io/solid-glass/)**
 

diff --git a/demo.png → demo/demo.png b/demo.png → demo/demo.png
diff --git a/dist/react.esm.js b/dist/react.esm.js
diff --git a/dist/react.js b/dist/react.js
diff --git a/dist/solid-glass.esm.js b/dist/solid-glass.esm.js
diff --git a/dist/solid-glass.js b/dist/solid-glass.js
diff --git a/dist/style.css b/dist/style.css
diff --git a/dist/utils-BuTN5SEH.mjs b/dist/utils-BuTN5SEH.mjs
diff --git a/dist/utils-DYbhshKv.js b/dist/utils-DYbhshKv.js
diff --git a/dist/vanilla.esm.js b/dist/vanilla.esm.js
diff --git a/dist/vanilla.js b/dist/vanilla.js
diff --git a/dist/vue.esm.js b/dist/vue.esm.js
diff --git a/dist/vue.js b/dist/vue.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "dev:demo": "vite --mode demo",
     "build": "vite build",
     "build:demo": "vite build --mode demo",
     "preview": "vite preview"

diff --git a/src/core/LiquidGlass.js b/src/core/LiquidGlass.js
@@ -1,4 +1,6 @@
 export class LiquidGlass {
+  static shouldUseAlternativeFallback;
+
   constructor(element, options = {}) {
     this.element = element;
     this.options = {
@@ -26,12 +28,22 @@ export class LiquidGlass {
     };
 
     this.svgId = `glass-distortion-${Math.random().toString(36).substr(2, 9)}`;
+
+    if (LiquidGlass.shouldUseAlternativeFallback === undefined) {
+      LiquidGlass.shouldUseAlternativeFallback = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    }
+
     this.init();
   }
 
   init() {
-    this.element.classList.add('solid-glass');
-    this.createSVGFilter();
+    if (LiquidGlass.shouldUseAlternativeFallback) {
+      this.element.classList.add('solid-glass-alternative');
+    } else {
+      this.element.classList.add('solid-glass');
+      this.createSVGFilter();
+    }
+
     this.updateStyles();
   }
 
@@ -102,7 +114,7 @@ export class LiquidGlass {
   }
 
   destroy() {
-    this.element.classList.remove('solid-glass');
+    this.element.classList.remove('solid-glass', 'solid-glass-alternative');
     const svg = document.getElementById(this.svgId)?.parentElement;
     if (svg) {
       svg.remove();