@scriptedpixels/liquid-glass-vue 0.0.2 → 0.0.4

package/dist/liquid-glass-vue.umd.js

@@ -1,582 +0,0 @@
-(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=liquid-glass-vue.umd.js.map