@scriptedpixels/liquid-glass-vue 0.0.1 → 0.0.2

package/dist/liquid-glass-vue.css

@@ -0,0 +1,2 @@
+
+/* Add any specific styles for this component here if needed */

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

@@ -0,0 +1,578 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, createElementVNode, createStaticVNode, unref, ref, normalizeClass, createVNode, renderSlot, onMounted, watch, onUnmounted, Fragment, createCommentVNode, withCtx, createBlock, createApp } from "vue";
+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__ */ defineComponent({
+  __name: "GlassFilter",
+  props: {
+    id: {},
+    displacementScale: {},
+    aberrationIntensity: {},
+    width: {},
+    height: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const edgeMaskOffset = computed(() => {
+      return Math.max(30, 80 - props.aberrationIntensity * 2);
+    });
+    const redDisplacementScale = computed(() => {
+      return props.displacementScale * -1;
+    });
+    const greenDisplacementScale = computed(() => {
+      return props.displacementScale * (-1 - props.aberrationIntensity * 0.05);
+    });
+    const blueDisplacementScale = computed(() => {
+      return props.displacementScale * (-1 - props.aberrationIntensity * 0.1);
+    });
+    const gaussianBlurStdDeviation = computed(() => {
+      return Math.max(0.1, 0.5 - props.aberrationIntensity * 0.1);
+    });
+    const feFuncATableValues = computed(() => {
+      return `0 ${props.aberrationIntensity * 0.05} 1`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({ position: "absolute", width: props.width + "px", height: props.height + "px" }),
+        "aria-hidden": "true"
+      }, [
+        createElementVNode("defs", null, [
+          createElementVNode("radialGradient", {
+            id: `${props.id}-edge-mask`,
+            cx: "50%",
+            cy: "50%",
+            r: "50%"
+          }, [
+            _cache[0] || (_cache[0] = createElementVNode("stop", {
+              offset: "0%",
+              "stop-color": "black",
+              "stop-opacity": "0"
+            }, null, -1)),
+            createElementVNode("stop", {
+              offset: `${edgeMaskOffset.value}%`,
+              "stop-color": "black",
+              "stop-opacity": "0"
+            }, null, 8, _hoisted_2),
+            _cache[1] || (_cache[1] = createElementVNode("stop", {
+              offset: "100%",
+              "stop-color": "white",
+              "stop-opacity": "1"
+            }, null, -1))
+          ], 8, _hoisted_1),
+          createElementVNode("filter", {
+            id: props.id,
+            x: "-35%",
+            y: "-35%",
+            width: "170%",
+            height: "170%",
+            "color-interpolation-filters": "sRGB"
+          }, [
+            createElementVNode("feImage", {
+              id: "feimage",
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              result: "DISPLACEMENT_MAP",
+              href: unref(displacementMap),
+              preserveAspectRatio: "xMidYMid slice"
+            }, null, 8, _hoisted_4),
+            _cache[2] || (_cache[2] = 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)),
+            createElementVNode("feComponentTransfer", _hoisted_5, [
+              createElementVNode("feFuncA", {
+                type: "discrete",
+                tableValues: feFuncATableValues.value
+              }, null, 8, _hoisted_6)
+            ]),
+            _cache[3] || (_cache[3] = createElementVNode("feOffset", {
+              in: "SourceGraphic",
+              dx: "0",
+              dy: "0",
+              result: "CENTER_ORIGINAL"
+            }, null, -1)),
+            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] = 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)),
+            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] = 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)),
+            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] = 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] = createElementVNode("feBlend", {
+              in: "GREEN_CHANNEL",
+              in2: "BLUE_CHANNEL",
+              mode: "screen",
+              result: "GB_COMBINED"
+            }, null, -1)),
+            _cache[8] || (_cache[8] = createElementVNode("feBlend", {
+              in: "RED_CHANNEL",
+              in2: "GB_COMBINED",
+              mode: "screen",
+              result: "RGB_COMBINED"
+            }, null, -1)),
+            createElementVNode("feGaussianBlur", {
+              in: "RGB_COMBINED",
+              stdDeviation: gaussianBlurStdDeviation.value,
+              result: "ABERRATED_BLURRED"
+            }, null, 8, _hoisted_10),
+            _cache[9] || (_cache[9] = 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__ */ 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 = computed(() => ({
+      filter: `url(#${filterId})`,
+      backdropFilter: `blur(${(props.overLight ? 20 : 4) + props.blurAmount * 32}px) saturate(${props.saturation}%)`
+    }));
+    const glassContainerRef = ref(null);
+    __expose({ glassContainerRef });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "glassContainerRef",
+        ref: glassContainerRef,
+        class: normalizeClass(`relative ${props.className} ${props.active ? "active" : ""} ${Boolean(props.onClick) ? "cursor-pointer" : ""}`),
+        style: normalizeStyle(props.style),
+        onClick: _cache[4] || (_cache[4] = ($event) => props.onClick && props.onClick())
+      }, [
+        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"]),
+        createElementVNode("div", {
+          class: "glass",
+          style: 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"))
+        }, [
+          createElementVNode("span", {
+            class: "glass__warp",
+            style: normalizeStyle({
+              ...backdropStyle.value,
+              position: "absolute",
+              inset: "0"
+            })
+          }, null, 4),
+          createElementVNode("div", {
+            class: "transition-all duration-150 ease-in-out text-white",
+            style: 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)"
+            })
+          }, [
+            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__ */ 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 = ref(null);
+    const isHovered = ref(false);
+    const isActive = ref(false);
+    const glassSize = ref({ width: 400, height: 400 });
+    const internalGlobalMousePos = ref({ x: 0, y: 0 });
+    const internalMouseOffset = ref({ x: 0, y: 0 });
+    const globalMousePos = computed(() => props.globalMousePos || internalGlobalMousePos.value);
+    const mouseOffset = 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
+      };
+    };
+    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);
+    });
+    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 });
+    onUnmounted(() => {
+    });
+    const calculateFadeInFactor = 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 = 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 = 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 = 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 = computed(() => ({
+      ...props.style,
+      transform: transformStyle.value,
+      transition: "all ease-out 0.2s"
+    }));
+    const positionStyles = 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 openBlock(), createElementBlock(Fragment, null, [
+        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"]),
+        createElementVNode("div", {
+          class: normalizeClass(`bg-black transition-all duration-150 ease-in-out pointer-events-none ${props.overLight ? "opacity-20" : "opacity-0"}`),
+          style: 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),
+        createElementVNode("div", {
+          class: normalizeClass(`bg-black transition-all duration-150 ease-in-out pointer-events-none mix-blend-overlay ${props.overLight ? "opacity-100" : "opacity-0"}`),
+          style: 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),
+        createVNode(GlassContainer, {
+          ref_key: "glassRef",
+          ref: glassRef,
+          class: normalizeClass(props.className),
+          style: 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: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["class", "style", "cornerRadius", "displacementScale", "blurAmount", "saturation", "aberrationIntensity", "glassSize", "padding", "mouseOffset", "active", "overLight"]),
+        createElementVNode("span", {
+          style: 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),
+        createElementVNode("span", {
+          style: 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) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", {
+            style: 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),
+          createElementVNode("div", {
+            style: 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),
+          createElementVNode("div", {
+            style: 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)) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "App",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1);
+    };
+  }
+});
+createApp(_sfc_main).mount("#app");
+//# sourceMappingURL=liquid-glass-vue.es.js.map