@mizuui/liquid-glass-core 0.1.2 → 0.1.3

package/index.d.ts

@@ -10,6 +10,7 @@ export interface LiquidGlassOptions {
   specular?: number
   resolution?: number
   fallbackBlur?: number
+  shadow?: boolean
 }
 
 export interface LiquidGlassInstance {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mizuui/liquid-glass-core",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Framework-agnostic liquid glass (real backdrop refraction, not frosted blur).",
   "type": "module",
   "license": "MIT",

package/src/filter.js

@@ -56,7 +56,7 @@ export function createGlassFilter(id) {
 
       const image = el('feImage', {
         result: 'map',
-        // preserveAspectRatio: 'none',
+        preserveAspectRatio: 'none',
         x: '0',
         y: '0',
         width: String(map.displayWidth),

package/src/glass.js

@@ -6,25 +6,27 @@ export const defaultOptions = {
   /** Corner radius in px. Keep in sync with any border-radius you set yourself. */
   radius: 30,
   /** Thickness of the refracting bevel in px. */
-  depth: 30,
+  depth: 100,
   /** Maximum backdrop displacement in px. This is the strength of the lensing. */
-  strength: 25,
+  strength: 15,
   /** Falloff curve of the bevel. Higher = the bend is pushed closer to the edge. */
   falloff: 2,
   /** Per-channel offset in px. Gives the prism fringe real glass has. */
   chromaticAberration: 0,
   /** Backdrop blur in px. Leave at 0 — blur is frosted glass, not liquid glass. */
-  blur: 5,
+  blur: 3,
   /** Backdrop saturation multiplier. */
   saturation: 1,
   /** Backdrop brightness multiplier. */
   brightness: 1,
   /** Specular rim intensity, 0 disables it. */
-  specular: 0.5,
+  specular: 0.2,
   /** Max pixel size of the generated displacement map. */
   resolution: 512,
   /** Blur used when the browser cannot run SVG filters in a backdrop-filter. */
   fallbackBlur: 8,
+  /** Whether to show a shadow around the glass pane. */
+  shadow: true,
 }
 
 let uid = 0
@@ -72,6 +74,13 @@ export function createLiquidGlass(element, options = {}) {
     element.style.setProperty('--lg-backdrop', layers.join(' ') || 'none')
     element.style.setProperty('--lg-radius', `${config.radius}px`)
     element.style.setProperty('--lg-specular', String(config.specular))
+
+    element.style.setProperty(
+      '--lg-shadow',
+      config.shadow
+        ? '0 0 40px rgba(8, 7, 16, 0.6)'
+        : 'none',
+    )
   }
 
   function render() {
@@ -132,6 +141,7 @@ export function createLiquidGlass(element, options = {}) {
       element.style.removeProperty('--lg-backdrop')
       element.style.removeProperty('--lg-radius')
       element.style.removeProperty('--lg-specular')
+      element.style.removeProperty('--lg-shadow');
     },
   }
 }

package/src/styles.js

@@ -8,6 +8,7 @@ const CSS = `
   -webkit-backdrop-filter: var(--lg-backdrop, none);
   backdrop-filter: var(--lg-backdrop, none);
   transform: translateZ(0);
+  box-shadow: var(--lg-shadow, none);
 }
 
 .liquid-glass::after {