@scriptedpixels/liquid-glass-vue 0.0.3 → 0.0.4

package/dist/index.es.js

@@ -1,578 +0,0 @@
-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=index.es.js.map