@scriptedpixels/liquid-glass-vue 0.0.1 → 0.0.3

package/dist/index.umd.js

@@ -0,0 +1,582 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(require("vue")) : typeof define === "function" && define.amd ? define(["vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.Vue));
+})(this, function(vue) {
+  "use strict";
+  const displacementMap = "data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k=";
+  const _hoisted_1 = ["id"];
+  const _hoisted_2 = ["offset"];
+  const _hoisted_3 = ["id"];
+  const _hoisted_4 = ["href"];
+  const _hoisted_5 = {
+    in: "EDGE_INTENSITY",
+    result: "EDGE_MASK"
+  };
+  const _hoisted_6 = ["tableValues"];
+  const _hoisted_7 = ["scale"];
+  const _hoisted_8 = ["scale"];
+  const _hoisted_9 = ["scale"];
+  const _hoisted_10 = ["stdDeviation"];
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    __name: "GlassFilter",
+    props: {
+      id: {},
+      displacementScale: {},
+      aberrationIntensity: {},
+      width: {},
+      height: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const edgeMaskOffset = vue.computed(() => {
+        return Math.max(30, 80 - props.aberrationIntensity * 2);
+      });
+      const redDisplacementScale = vue.computed(() => {
+        return props.displacementScale * -1;
+      });
+      const greenDisplacementScale = vue.computed(() => {
+        return props.displacementScale * (-1 - props.aberrationIntensity * 0.05);
+      });
+      const blueDisplacementScale = vue.computed(() => {
+        return props.displacementScale * (-1 - props.aberrationIntensity * 0.1);
+      });
+      const gaussianBlurStdDeviation = vue.computed(() => {
+        return Math.max(0.1, 0.5 - props.aberrationIntensity * 0.1);
+      });
+      const feFuncATableValues = vue.computed(() => {
+        return `0 ${props.aberrationIntensity * 0.05} 1`;
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", {
+          style: vue.normalizeStyle({ position: "absolute", width: props.width + "px", height: props.height + "px" }),
+          "aria-hidden": "true"
+        }, [
+          vue.createElementVNode("defs", null, [
+            vue.createElementVNode("radialGradient", {
+              id: `${props.id}-edge-mask`,
+              cx: "50%",
+              cy: "50%",
+              r: "50%"
+            }, [
+              _cache[0] || (_cache[0] = vue.createElementVNode("stop", {
+                offset: "0%",
+                "stop-color": "black",
+                "stop-opacity": "0"
+              }, null, -1)),
+              vue.createElementVNode("stop", {
+                offset: `${edgeMaskOffset.value}%`,
+                "stop-color": "black",
+                "stop-opacity": "0"
+              }, null, 8, _hoisted_2),
+              _cache[1] || (_cache[1] = vue.createElementVNode("stop", {
+                offset: "100%",
+                "stop-color": "white",
+                "stop-opacity": "1"
+              }, null, -1))
+            ], 8, _hoisted_1),
+            vue.createElementVNode("filter", {
+              id: props.id,
+              x: "-35%",
+              y: "-35%",
+              width: "170%",
+              height: "170%",
+              "color-interpolation-filters": "sRGB"
+            }, [
+              vue.createElementVNode("feImage", {
+                id: "feimage",
+                x: "0",
+                y: "0",
+                width: "100%",
+                height: "100%",
+                result: "DISPLACEMENT_MAP",
+                href: vue.unref(displacementMap),
+                preserveAspectRatio: "xMidYMid slice"
+              }, null, 8, _hoisted_4),
+              _cache[2] || (_cache[2] = vue.createElementVNode("feColorMatrix", {
+                in: "DISPLACEMENT_MAP",
+                type: "matrix",
+                values: "0.3 0.3 0.3 0 0\n                 0.3 0.3 0.3 0 0\n                 0.3 0.3 0.3 0 0\n                 0 0 0 1 0",
+                result: "EDGE_INTENSITY"
+              }, null, -1)),
+              vue.createElementVNode("feComponentTransfer", _hoisted_5, [
+                vue.createElementVNode("feFuncA", {
+                  type: "discrete",
+                  tableValues: feFuncATableValues.value
+                }, null, 8, _hoisted_6)
+              ]),
+              _cache[3] || (_cache[3] = vue.createElementVNode("feOffset", {
+                in: "SourceGraphic",
+                dx: "0",
+                dy: "0",
+                result: "CENTER_ORIGINAL"
+              }, null, -1)),
+              vue.createElementVNode("feDisplacementMap", {
+                in: "SourceGraphic",
+                in2: "DISPLACEMENT_MAP",
+                scale: redDisplacementScale.value,
+                xChannelSelector: "R",
+                yChannelSelector: "B",
+                result: "RED_DISPLACED"
+              }, null, 8, _hoisted_7),
+              _cache[4] || (_cache[4] = vue.createElementVNode("feColorMatrix", {
+                in: "RED_DISPLACED",
+                type: "matrix",
+                values: "1 0 0 0 0\n                 0 0 0 0 0\n                 0 0 0 0 0\n                 0 0 0 1 0",
+                result: "RED_CHANNEL"
+              }, null, -1)),
+              vue.createElementVNode("feDisplacementMap", {
+                in: "SourceGraphic",
+                in2: "DISPLACEMENT_MAP",
+                scale: greenDisplacementScale.value,
+                xChannelSelector: "R",
+                yChannelSelector: "B",
+                result: "GREEN_DISPLACED"
+              }, null, 8, _hoisted_8),
+              _cache[5] || (_cache[5] = vue.createElementVNode("feColorMatrix", {
+                in: "GREEN_DISPLACED",
+                type: "matrix",
+                values: "0 0 0 0 0\n                 0 1 0 0 0\n                 0 0 0 0 0\n                 0 0 0 1 0",
+                result: "GREEN_CHANNEL"
+              }, null, -1)),
+              vue.createElementVNode("feDisplacementMap", {
+                in: "SourceGraphic",
+                in2: "DISPLACEMENT_MAP",
+                scale: blueDisplacementScale.value,
+                xChannelSelector: "R",
+                yChannelSelector: "B",
+                result: "BLUE_DISPLACED"
+              }, null, 8, _hoisted_9),
+              _cache[6] || (_cache[6] = vue.createElementVNode("feColorMatrix", {
+                in: "BLUE_DISPLACED",
+                type: "matrix",
+                values: "0 0 0 0 0\n                 0 0 0 0 0\n                 0 0 1 0 0\n                 0 0 0 1 0",
+                result: "BLUE_CHANNEL"
+              }, null, -1)),
+              _cache[7] || (_cache[7] = vue.createElementVNode("feBlend", {
+                in: "GREEN_CHANNEL",
+                in2: "BLUE_CHANNEL",
+                mode: "screen",
+                result: "GB_COMBINED"
+              }, null, -1)),
+              _cache[8] || (_cache[8] = vue.createElementVNode("feBlend", {
+                in: "RED_CHANNEL",
+                in2: "GB_COMBINED",
+                mode: "screen",
+                result: "RGB_COMBINED"
+              }, null, -1)),
+              vue.createElementVNode("feGaussianBlur", {
+                in: "RGB_COMBINED",
+                stdDeviation: gaussianBlurStdDeviation.value,
+                result: "ABERRATED_BLURRED"
+              }, null, 8, _hoisted_10),
+              _cache[9] || (_cache[9] = vue.createStaticVNode('<feComposite in="ABERRATED_BLURRED" in2="EDGE_MASK" operator="in" result="EDGE_ABERRATION"></feComposite><feComponentTransfer in="EDGE_MASK" result="INVERTED_MASK"><feFuncA type="table" tableValues="1 0"></feFuncA></feComponentTransfer><feComposite in="CENTER_ORIGINAL" in2="INVERTED_MASK" operator="in" result="CENTER_CLEAN"></feComposite><feComposite in="EDGE_ABERRATION" in2="CENTER_CLEAN" operator="over"></feComposite>', 4))
+            ], 8, _hoisted_3)
+          ])
+        ], 4);
+      };
+    }
+  });
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    __name: "GlassContainer",
+    props: {
+      className: { default: "" },
+      style: { default: () => ({}) },
+      displacementScale: { default: 25 },
+      blurAmount: { default: 12 },
+      saturation: { default: 180 },
+      aberrationIntensity: { default: 2 },
+      mouseOffset: { default: () => ({ x: 0, y: 0 }) },
+      active: { type: Boolean, default: false },
+      overLight: { type: Boolean, default: false },
+      cornerRadius: { default: 999 },
+      padding: { default: "24px 32px" },
+      glassSize: { default: () => ({ width: 270, height: 69 }) },
+      onClick: {}
+    },
+    emits: ["mouse-enter", "mouse-leave", "mouse-down", "mouse-up", "click"],
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const filterId = `glass-filter-${Math.random().toString(36).substr(2, 9)}`;
+      const backdropStyle = vue.computed(() => ({
+        filter: `url(#${filterId})`,
+        backdropFilter: `blur(${(props.overLight ? 20 : 4) + props.blurAmount * 32}px) saturate(${props.saturation}%)`
+      }));
+      const glassContainerRef = vue.ref(null);
+      __expose({ glassContainerRef });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "glassContainerRef",
+          ref: glassContainerRef,
+          class: vue.normalizeClass(`relative ${props.className} ${props.active ? "active" : ""} ${Boolean(props.onClick) ? "cursor-pointer" : ""}`),
+          style: vue.normalizeStyle(props.style),
+          onClick: _cache[4] || (_cache[4] = ($event) => props.onClick && props.onClick())
+        }, [
+          vue.createVNode(_sfc_main$3, {
+            id: filterId,
+            displacementScale: props.displacementScale,
+            aberrationIntensity: props.aberrationIntensity,
+            width: props.glassSize.width,
+            height: props.glassSize.height
+          }, null, 8, ["displacementScale", "aberrationIntensity", "width", "height"]),
+          vue.createElementVNode("div", {
+            class: "glass",
+            style: vue.normalizeStyle({
+              borderRadius: `${props.cornerRadius}px`,
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "24px",
+              padding: props.padding,
+              overflow: "hidden",
+              transition: "all 0.2s ease-in-out",
+              boxShadow: props.overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
+            }),
+            onMouseenter: _cache[0] || (_cache[0] = ($event) => emit("mouse-enter")),
+            onMouseleave: _cache[1] || (_cache[1] = ($event) => emit("mouse-leave")),
+            onMousedown: _cache[2] || (_cache[2] = ($event) => emit("mouse-down")),
+            onMouseup: _cache[3] || (_cache[3] = ($event) => emit("mouse-up"))
+          }, [
+            vue.createElementVNode("span", {
+              class: "glass__warp",
+              style: vue.normalizeStyle({
+                ...backdropStyle.value,
+                position: "absolute",
+                inset: "0"
+              })
+            }, null, 4),
+            vue.createElementVNode("div", {
+              class: "transition-all duration-150 ease-in-out text-white",
+              style: vue.normalizeStyle({
+                position: "relative",
+                zIndex: 1,
+                font: "500 20px/1 system-ui",
+                textShadow: props.overLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"
+              })
+            }, [
+              vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 4)
+          ], 36)
+        ], 6);
+      };
+    }
+  });
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const GlassContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-689fee6a"]]);
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "LiquidGlass",
+    props: {
+      displacementScale: { default: 70 },
+      blurAmount: { default: 0.0625 },
+      saturation: { default: 140 },
+      aberrationIntensity: { default: 2 },
+      elasticity: { default: 0.15 },
+      cornerRadius: { default: 999 },
+      globalMousePos: { default: void 0 },
+      mouseOffset: { default: void 0 },
+      mouseContainer: { default: null },
+      className: { default: "" },
+      padding: { default: "24px 32px" },
+      style: {},
+      overLight: { type: Boolean, default: false },
+      onClick: { type: Function, default: () => ({}) }
+    },
+    setup(__props) {
+      const props = __props;
+      const glassRef = vue.ref(null);
+      const isHovered = vue.ref(false);
+      const isActive = vue.ref(false);
+      const glassSize = vue.ref({ width: 400, height: 400 });
+      const internalGlobalMousePos = vue.ref({ x: 0, y: 0 });
+      const internalMouseOffset = vue.ref({ x: 0, y: 0 });
+      const globalMousePos = vue.computed(() => props.globalMousePos || internalGlobalMousePos.value);
+      const mouseOffset = vue.computed(() => props.mouseOffset || internalMouseOffset.value);
+      const handleMouseMove = (e) => {
+        var _a;
+        const container = props.mouseContainer || ((_a = glassRef.value) == null ? void 0 : _a.glassContainerRef);
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        internalMouseOffset.value = {
+          x: (e.clientX - centerX) / rect.width * 100,
+          y: (e.clientY - centerY) / rect.height * 100
+        };
+        internalGlobalMousePos.value = {
+          x: e.clientX,
+          y: e.clientY
+        };
+      };
+      vue.onMounted(() => {
+        const updateGlassSize = () => {
+          var _a;
+          if ((_a = glassRef.value) == null ? void 0 : _a.glassContainerRef) {
+            const rect = glassRef.value.glassContainerRef.getBoundingClientRect();
+            glassSize.value = { width: rect.width, height: rect.height };
+          }
+        };
+        updateGlassSize();
+        window.addEventListener("resize", updateGlassSize);
+        return () => window.removeEventListener("resize", updateGlassSize);
+      });
+      vue.watch([() => props.globalMousePos, () => props.mouseOffset, glassRef], ([newGlobalMousePos, newMouseOffset]) => {
+        var _a;
+        if (newGlobalMousePos && newMouseOffset) {
+          return;
+        }
+        const container = props.mouseContainer || ((_a = glassRef.value) == null ? void 0 : _a.glassContainerRef);
+        if (!container) return;
+        container.addEventListener("mousemove", handleMouseMove);
+      }, { immediate: true });
+      vue.onUnmounted(() => {
+      });
+      const calculateFadeInFactor = vue.computed(() => {
+        var _a;
+        if (!globalMousePos.value.x || !globalMousePos.value.y || !((_a = glassRef.value) == null ? void 0 : _a.glassContainerRef)) {
+          return 0;
+        }
+        const rect = glassRef.value.glassContainerRef.getBoundingClientRect();
+        const pillCenterX = rect.left + rect.width / 2;
+        const pillCenterY = rect.top + rect.height / 2;
+        const pillWidth = glassSize.value.width;
+        const pillHeight = glassSize.value.height;
+        const edgeDistanceX = Math.max(0, Math.abs(globalMousePos.value.x - pillCenterX) - pillWidth / 2);
+        const edgeDistanceY = Math.max(0, Math.abs(globalMousePos.value.y - pillCenterY) - pillHeight / 2);
+        const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+        const activationZone = 200;
+        return edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone;
+      });
+      const calculateElasticTranslation = vue.computed(() => {
+        var _a;
+        if (!((_a = glassRef.value) == null ? void 0 : _a.glassContainerRef)) {
+          return { x: 0, y: 0 };
+        }
+        const fadeInFactor = calculateFadeInFactor.value;
+        const rect = glassRef.value.glassContainerRef.getBoundingClientRect();
+        const pillCenterX = rect.left + rect.width / 2;
+        const pillCenterY = rect.top + rect.height / 2;
+        return {
+          x: (globalMousePos.value.x - pillCenterX) * props.elasticity * 0.1 * fadeInFactor,
+          y: (globalMousePos.value.y - pillCenterY) * props.elasticity * 0.1 * fadeInFactor
+        };
+      });
+      const calculateDirectionalScale = vue.computed(() => {
+        var _a;
+        if (!globalMousePos.value.x || !globalMousePos.value.y || !((_a = glassRef.value) == null ? void 0 : _a.glassContainerRef)) {
+          return "scale(1)";
+        }
+        const rect = glassRef.value.glassContainerRef.getBoundingClientRect();
+        const pillCenterX = rect.left + rect.width / 2;
+        const pillCenterY = rect.top + rect.height / 2;
+        const pillWidth = glassSize.value.width;
+        const pillHeight = glassSize.value.height;
+        const deltaX = globalMousePos.value.x - pillCenterX;
+        const deltaY = globalMousePos.value.y - pillCenterY;
+        const edgeDistanceX = Math.max(0, Math.abs(deltaX) - pillWidth / 2);
+        const edgeDistanceY = Math.max(0, Math.abs(deltaY) - pillHeight / 2);
+        const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+        const activationZone = 200;
+        if (edgeDistance > activationZone) {
+          return "scale(1)";
+        }
+        const fadeInFactor = 1 - edgeDistance / activationZone;
+        const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (centerDistance === 0) {
+          return "scale(1)";
+        }
+        const normalizedX = deltaX / centerDistance;
+        const normalizedY = deltaY / centerDistance;
+        const stretchIntensity = Math.min(centerDistance / 300, 1) * props.elasticity * fadeInFactor;
+        const scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * 0.3 - Math.abs(normalizedY) * stretchIntensity * 0.15;
+        const scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * 0.3 - Math.abs(normalizedX) * stretchIntensity * 0.15;
+        return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
+      });
+      const transformStyle = vue.computed(() => {
+        return `translate(calc(-50% + ${calculateElasticTranslation.value.x}px), calc(-50% + ${calculateElasticTranslation.value.y}px)) ${isActive.value && Boolean(props.onClick) ? "scale(0.96)" : calculateDirectionalScale.value}`;
+      });
+      const baseStyle = vue.computed(() => ({
+        ...props.style,
+        transform: transformStyle.value,
+        transition: "all ease-out 0.2s"
+      }));
+      const positionStyles = vue.computed(() => {
+        var _a, _b, _c;
+        return {
+          position: ((_a = props.style) == null ? void 0 : _a.position) || "relative",
+          top: ((_b = props.style) == null ? void 0 : _b.top) || "50%",
+          left: ((_c = props.style) == null ? void 0 : _c.left) || "50%"
+        };
+      });
+      return (_ctx, _cache) => {
+        var _a, _b;
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(_sfc_main$3, {
+            id: `liquid-glass-filter-${((_b = (_a = glassRef.value) == null ? void 0 : _a.glassContainerRef) == null ? void 0 : _b.id) || "default"}`,
+            displacementScale: props.overLight ? props.displacementScale * 0.5 : props.displacementScale,
+            aberrationIntensity: props.aberrationIntensity,
+            width: glassSize.value.width,
+            height: glassSize.value.height
+          }, null, 8, ["id", "displacementScale", "aberrationIntensity", "width", "height"]),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(`bg-black transition-all duration-150 ease-in-out pointer-events-none ${props.overLight ? "opacity-20" : "opacity-0"}`),
+            style: vue.normalizeStyle({
+              ...positionStyles.value,
+              height: glassSize.value.height + "px",
+              width: glassSize.value.width + "px",
+              borderRadius: `${props.cornerRadius}px`,
+              transform: transformStyle.value,
+              transition: baseStyle.value.transition
+            })
+          }, null, 6),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(`bg-black transition-all duration-150 ease-in-out pointer-events-none mix-blend-overlay ${props.overLight ? "opacity-100" : "opacity-0"}`),
+            style: vue.normalizeStyle({
+              ...positionStyles.value,
+              height: glassSize.value.height + "px",
+              width: glassSize.value.width + "px",
+              borderRadius: `${props.cornerRadius}px`,
+              transform: transformStyle.value,
+              transition: baseStyle.value.transition
+            })
+          }, null, 6),
+          vue.createVNode(GlassContainer, {
+            ref_key: "glassRef",
+            ref: glassRef,
+            class: vue.normalizeClass(props.className),
+            style: vue.normalizeStyle(baseStyle.value),
+            cornerRadius: props.cornerRadius,
+            displacementScale: props.overLight ? props.displacementScale * 0.5 : props.displacementScale,
+            blurAmount: props.blurAmount,
+            saturation: props.saturation,
+            aberrationIntensity: props.aberrationIntensity,
+            glassSize: glassSize.value,
+            padding: props.padding,
+            mouseOffset: mouseOffset.value,
+            onMouseEnter: _cache[0] || (_cache[0] = ($event) => isHovered.value = true),
+            onMouseLeave: _cache[1] || (_cache[1] = ($event) => isHovered.value = false),
+            onMouseDown: _cache[2] || (_cache[2] = ($event) => isActive.value = true),
+            onMouseUp: _cache[3] || (_cache[3] = ($event) => isActive.value = false),
+            active: isActive.value,
+            overLight: props.overLight,
+            onClick: _cache[4] || (_cache[4] = ($event) => props.onClick && props.onClick())
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class", "style", "cornerRadius", "displacementScale", "blurAmount", "saturation", "aberrationIntensity", "glassSize", "padding", "mouseOffset", "active", "overLight"]),
+          vue.createElementVNode("span", {
+            style: vue.normalizeStyle({
+              ...positionStyles.value,
+              height: glassSize.value.height + "px",
+              width: glassSize.value.width + "px",
+              borderRadius: `${props.cornerRadius}px`,
+              transform: transformStyle.value,
+              transition: baseStyle.value.transition,
+              pointerEvents: "none",
+              mixBlendMode: "screen",
+              opacity: 0.2,
+              padding: "1.5px",
+              WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              WebkitMaskComposite: "xor",
+              maskComposite: "exclude",
+              boxShadow: "0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)",
+              background: `linear-gradient(
+        ${135 + mouseOffset.value.x * 1.2}deg,
+        rgba(255, 255, 255, 0.0) 0%,
+        rgba(255, 255, 255, ${0.12 + Math.abs(mouseOffset.value.x) * 8e-3}) ${Math.max(10, 33 + mouseOffset.value.y * 0.3)}%,
+        rgba(255, 255, 255, ${0.4 + Math.abs(mouseOffset.value.x) * 0.012}) ${Math.min(90, 66 + mouseOffset.value.y * 0.4)}%,
+        rgba(255, 255, 255, 0.0) 100%
+      )`
+            })
+          }, null, 4),
+          vue.createElementVNode("span", {
+            style: vue.normalizeStyle({
+              ...positionStyles.value,
+              height: glassSize.value.height + "px",
+              width: glassSize.value.width + "px",
+              borderRadius: `${props.cornerRadius}px`,
+              transform: transformStyle.value,
+              transition: baseStyle.value.transition,
+              pointerEvents: "none",
+              mixBlendMode: "overlay",
+              padding: "1.5px",
+              WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              WebkitMaskComposite: "xor",
+              maskComposite: "exclude",
+              boxShadow: "0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)",
+              background: `linear-gradient(
+        ${135 + mouseOffset.value.x * 1.2}deg,
+        rgba(255, 255, 255, 0.0) 0%,
+        rgba(255, 255, 255, ${0.32 + Math.abs(mouseOffset.value.x) * 8e-3}) ${Math.max(10, 33 + mouseOffset.value.y * 0.3)}%,
+        rgba(255, 255, 255, ${0.6 + Math.abs(mouseOffset.value.x) * 0.012}) ${Math.min(90, 66 + mouseOffset.value.y * 0.4)}%,
+        rgba(255, 255, 255, 0.0) 100%
+      )`
+            })
+          }, null, 4),
+          Boolean(props.onClick) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle({
+                ...positionStyles.value,
+                height: glassSize.value.height + "px",
+                width: glassSize.value.width + 1 + "px",
+                borderRadius: `${props.cornerRadius}px`,
+                transform: transformStyle.value,
+                pointerEvents: "none",
+                transition: "all 0.2s ease-out",
+                opacity: isHovered.value || isActive.value ? 0.5 : 0,
+                backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%)",
+                mixBlendMode: "overlay"
+              })
+            }, null, 4),
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle({
+                ...positionStyles.value,
+                height: glassSize.value.height + "px",
+                width: glassSize.value.width + 1 + "px",
+                borderRadius: `${props.cornerRadius}px`,
+                transform: transformStyle.value,
+                pointerEvents: "none",
+                transition: "all 0.2s ease-out",
+                opacity: isActive.value ? 0.5 : 0,
+                backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%)",
+                mixBlendMode: "overlay"
+              })
+            }, null, 4),
+            vue.createElementVNode("div", {
+              style: vue.normalizeStyle({
+                ...baseStyle.value,
+                height: glassSize.value.height + "px",
+                width: glassSize.value.width + 1 + "px",
+                borderRadius: `${props.cornerRadius}px`,
+                position: positionStyles.value.position,
+                top: positionStyles.value.top,
+                left: positionStyles.value.left,
+                pointerEvents: "none",
+                transition: "all 0.2s ease-out",
+                opacity: isHovered.value ? 0.4 : isActive.value ? 0.8 : 0,
+                backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)",
+                mixBlendMode: "overlay"
+              })
+            }, null, 4)
+          ], 64)) : vue.createCommentVNode("", true)
+        ], 64);
+      };
+    }
+  });
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "App",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$1);
+      };
+    }
+  });
+  vue.createApp(_sfc_main).mount("#app");
+});
+//# sourceMappingURL=index.umd.js.map