@aslanonur/liquid-glass-vue
Version:
Apple's Liquid Glass effect implementation for Vue 3 + Nuxt 3. A liquid glass component with real-time displacement mapping, chromatic aberration, and glassmorphism effects.
404 lines (403 loc) • 26.7 kB
JavaScript
import { defineComponent as oe, ref as u, computed as m, watch as V, nextTick as v, onMounted as ae, onUnmounted as se, createElementBlock as f, openBlock as z, createElementVNode as a, normalizeStyle as q, normalizeClass as F, unref as E, createStaticVNode as le, renderSlot as ie } from "vue";
const ne = "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=", Ae = "data:image/jpeg;base64,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";
function re() {
return {
displacementMap: ne,
polarDisplacementMap: Ae,
generateId: () => Math.random().toString(36).substr(2, 9),
isFirefox: () => typeof navigator < "u" ? navigator.userAgent.toLowerCase().includes("firefox") : !1
};
}
const ce = ["id"], Ne = ["offset"], ue = ["id"], me = ["href"], Ee = {
in: "EDGE_INTENSITY",
result: "EDGE_MASK"
}, Te = ["tableValues"], de = ["scale"], qe = ["scale"], pe = ["scale"], Ue = ["stdDeviation"], Me = ["data-filter-url", "data-backdrop-filter"], Ce = /* @__PURE__ */ oe({
__name: "LiquidGlass",
props: {
displacementScale: { default: 70 },
blurAmount: { default: 0.0625 },
saturation: { default: 140 },
aberrationIntensity: { default: 2 },
elasticity: { default: 0.15 },
cornerRadius: { default: 999 },
globalMousePos: {},
mouseOffset: {},
mouseContainer: {},
className: { default: "" },
padding: { default: "24px 32px" },
style: { default: () => ({}) },
overLight: { type: Boolean, default: !1 },
mode: { default: "standard" },
onClick: {},
onMouseEnter: {},
onMouseLeave: {},
onMouseDown: {},
onMouseUp: {}
},
setup(B) {
const o = B, { displacementMap: W, polarDisplacementMap: D, generateId: k, isFirefox: Se } = re(), l = u(), x = u(!1), S = u(!1), n = u({ width: 270, height: 69 }), I = u({ x: 100, y: 100 }), R = u({ x: 0, y: 0 }), T = u(0), A = k();
console.log("Generated Filter ID:", A);
const i = m(
() => o.globalMousePos || I.value
);
m(
() => o.mouseOffset || R.value
);
const K = m(() => {
const t = o.overLight ? o.displacementScale * 0.5 : o.displacementScale;
return console.log("Vue Displacement Scale Debug:", {
propsDisplacementScale: o.displacementScale,
// LiquidGlass level (default: 70)
overLight: o.overLight,
effectiveScale: t,
// GlassContainer level
mode: o.mode,
reactComparison: {
liquidGlassDefault: 70,
glassContainerDefault: 25,
currentEffective: t
}
}), t;
}), y = m(() => {
T.value;
const t = typeof window < "u" && navigator.userAgent.toLowerCase().includes("firefox");
console.log("Firefox detection:", {
isFirefoxBrowser: t,
processClient: typeof window < "u",
filterKey: T.value
});
const e = {
position: "absolute",
inset: "0",
backdropFilter: `blur(${(o.overLight ? 12 : 4) + o.blurAmount * 32}px) saturate(${o.saturation}%)`
};
return t || (e.filter = `url(#${A})`), e;
}), O = () => {
if (!i.value.x || !i.value.y || !l.value)
return "scale(1)";
const t = l.value.getBoundingClientRect(), e = t.left + t.width / 2, s = t.top + t.height / 2, r = n.value.width, p = n.value.height, c = i.value.x - e, N = i.value.y - s, U = Math.max(0, Math.abs(c) - r / 2), M = Math.max(0, Math.abs(N) - p / 2), h = Math.sqrt(
U * U + M * M
), Q = 200;
if (h > Q)
return "scale(1)";
const $ = 1 - h / Q, C = Math.sqrt(c * c + N * N);
if (C === 0)
return "scale(1)";
const J = c / C, Z = N / C, g = Math.min(C / 300, 1) * o.elasticity * $, ee = 1 + Math.abs(J) * g * 0.3 - Math.abs(Z) * g * 0.15, te = 1 + Math.abs(Z) * g * 0.3 - Math.abs(J) * g * 0.15;
return `scaleX(${Math.max(0.8, ee)}) scaleY(${Math.max(0.8, te)})`;
}, G = () => {
if (!i.value.x || !i.value.y || !l.value)
return 0;
const t = l.value.getBoundingClientRect(), e = t.left + t.width / 2, s = t.top + t.height / 2, r = n.value.width, p = n.value.height, c = Math.max(
0,
Math.abs(i.value.x - e) - r / 2
), N = Math.max(
0,
Math.abs(i.value.y - s) - p / 2
), U = Math.sqrt(
c * c + N * N
), M = 200;
return U > M ? 0 : 1 - U / M;
}, j = () => {
if (!l.value)
return { x: 0, y: 0 };
const t = G(), e = l.value.getBoundingClientRect(), s = e.left + e.width / 2, r = e.top + e.height / 2;
return {
x: (i.value.x - s) * o.elasticity * 0.1 * t,
y: (i.value.y - r) * o.elasticity * 0.1 * t
};
}, w = m(() => {
const t = j();
return `translate(calc(-50% + ${t.x}px), calc(-50% + ${t.y}px)) ${S.value && o.onClick ? "scale(0.96)" : O()}`;
}), d = m(() => ({
...o.style,
transform: w.value,
transition: "all ease-out 0.2s"
})), Y = m(() => ({
position: d.value.position || "relative",
top: d.value.top || "50%",
left: d.value.left || "50%"
})), b = (t) => {
const e = o.mouseContainer || l.value;
if (!e) return;
const s = e.getBoundingClientRect(), r = s.left + s.width / 2, p = s.top + s.height / 2;
R.value = {
x: (t.clientX - r) / s.width * 100,
y: (t.clientY - p) / s.height * 100
}, I.value = {
x: t.clientX,
y: t.clientY
};
}, L = () => {
if (l.value) {
const t = l.value.getBoundingClientRect();
n.value = { width: t.width, height: t.height };
}
}, H = () => {
x.value = !0;
}, P = () => {
x.value = !1;
}, X = () => {
S.value = !0;
}, _ = () => {
S.value = !1;
};
return V(
[
() => o.displacementScale,
() => o.aberrationIntensity,
() => o.mode
],
() => {
console.log("Props changed, forcing filter refresh..."), T.value++, typeof window < "u" && l.value && v(() => {
var e;
const t = (e = l.value) == null ? void 0 : e.querySelector(".glass__warp");
if (t) {
const s = t.style.filter;
t.style.filter = "none", requestAnimationFrame(() => {
t.style.filter = s, console.log("Filter refreshed:", s);
});
}
});
},
{ immediate: !0 }
), ae(() => {
v(() => {
if (L(), !o.globalMousePos && !o.mouseOffset) {
const e = o.mouseContainer || l.value;
e && e.addEventListener("mousemove", b);
}
window.addEventListener("resize", L);
const t = () => {
if (l.value) {
const e = l.value.querySelector(".glass__warp");
if (e) {
const s = e.style.filter;
e.style.filter = "none", requestAnimationFrame(() => {
e.style.filter = s, T.value++, console.log("Mount filter refresh:", s);
});
}
}
};
setTimeout(t, 50), setTimeout(t, 100), setTimeout(t, 200), setTimeout(t, 500), setTimeout(t, 1e3);
});
}), se(() => {
if (!o.globalMousePos && !o.mouseOffset) {
const t = o.mouseContainer || l.value;
t && t.removeEventListener("mousemove", b);
}
window.removeEventListener("resize", L);
}), V(
() => o.mouseContainer,
(t, e) => {
!o.globalMousePos && !o.mouseOffset && (e && e.removeEventListener("mousemove", b), t && t.addEventListener("mousemove", b));
}
), (t, e) => (z(), f("div", null, [
a("div", {
class: F(`bg-black transition-all duration-150 ease-in-out pointer-events-none ${o.overLight ? "opacity-20" : "opacity-0"}`),
style: q({
...Y.value,
height: n.value.height + "px",
width: "auto",
borderRadius: `${o.cornerRadius}px`,
transform: d.value.transform,
transition: d.value.transition
})
}, null, 6),
a("div", {
ref_key: "glassRef",
ref: l,
class: F(`relative ${o.className} ${S.value ? "active" : ""} ${o.onClick ? "cursor-pointer" : ""}`),
style: q(d.value),
onClick: e[0] || (e[0] = //@ts-ignore
(...s) => o.onClick && o.onClick(...s))
}, [
(z(), f("svg", {
key: `svg-${E(A)}-${T.value}`,
style: q({
position: "absolute",
width: n.value.width + "px",
height: n.value.height + "px"
}),
"aria-hidden": "true"
}, [
a("defs", null, [
a("radialGradient", {
id: `${E(A)}-edge-mask`,
cx: "50%",
cy: "50%",
r: "50%"
}, [
e[1] || (e[1] = a("stop", {
offset: "0%",
"stop-color": "black",
"stop-opacity": "0"
}, null, -1)),
a("stop", {
offset: `${Math.max(30, 80 - o.aberrationIntensity * 2)}%`,
"stop-color": "black",
"stop-opacity": "0"
}, null, 8, Ne),
e[2] || (e[2] = a("stop", {
offset: "100%",
"stop-color": "white",
"stop-opacity": "1"
}, null, -1))
], 8, ce),
a("filter", {
id: E(A),
x: "-35%",
y: "-35%",
width: "170%",
height: "170%",
"color-interpolation-filters": "sRGB"
}, [
a("feImage", {
id: "feimage",
x: "0",
y: "0",
width: "100%",
height: "100%",
result: "DISPLACEMENT_MAP",
href: o.mode === "standard" ? E(W) : E(D),
preserveAspectRatio: "xMidYMid slice"
}, null, 8, me),
e[3] || (e[3] = a("feColorMatrix", {
in: "DISPLACEMENT_MAP",
type: "matrix",
values: `0.3 0.3 0.3 0 0
0.3 0.3 0.3 0 0
0.3 0.3 0.3 0 0
0 0 0 1 0`,
result: "EDGE_INTENSITY"
}, null, -1)),
a("feComponentTransfer", Ee, [
a("feFuncA", {
type: "discrete",
tableValues: `0 ${o.aberrationIntensity * 0.05} 1`
}, null, 8, Te)
]),
e[4] || (e[4] = a("feOffset", {
in: "SourceGraphic",
dx: "0",
dy: "0",
result: "CENTER_ORIGINAL"
}, null, -1)),
a("feDisplacementMap", {
in: "SourceGraphic",
in2: "DISPLACEMENT_MAP",
scale: K.value * -1,
xChannelSelector: "R",
yChannelSelector: "B",
result: "RED_DISPLACED"
}, null, 8, de),
e[5] || (e[5] = a("feColorMatrix", {
in: "RED_DISPLACED",
type: "matrix",
values: `1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0`,
result: "RED_CHANNEL"
}, null, -1)),
a("feDisplacementMap", {
in: "SourceGraphic",
in2: "DISPLACEMENT_MAP",
scale: K.value * (-1 - o.aberrationIntensity * 0.05),
xChannelSelector: "R",
yChannelSelector: "B",
result: "GREEN_DISPLACED"
}, null, 8, qe),
e[6] || (e[6] = a("feColorMatrix", {
in: "GREEN_DISPLACED",
type: "matrix",
values: `0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0`,
result: "GREEN_CHANNEL"
}, null, -1)),
a("feDisplacementMap", {
in: "SourceGraphic",
in2: "DISPLACEMENT_MAP",
scale: K.value * (-1 - o.aberrationIntensity * 0.1),
xChannelSelector: "R",
yChannelSelector: "B",
result: "BLUE_DISPLACED"
}, null, 8, pe),
e[7] || (e[7] = a("feColorMatrix", {
in: "BLUE_DISPLACED",
type: "matrix",
values: `0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 0 1 0`,
result: "BLUE_CHANNEL"
}, null, -1)),
e[8] || (e[8] = a("feBlend", {
in: "GREEN_CHANNEL",
in2: "BLUE_CHANNEL",
mode: "screen",
result: "GB_COMBINED"
}, null, -1)),
e[9] || (e[9] = a("feBlend", {
in: "RED_CHANNEL",
in2: "GB_COMBINED",
mode: "screen",
result: "RGB_COMBINED"
}, null, -1)),
a("feGaussianBlur", {
in: "RGB_COMBINED",
stdDeviation: Math.max(0.1, 0.5 - o.aberrationIntensity * 0.1),
result: "ABERRATED_BLURRED"
}, null, 8, Ue),
e[10] || (e[10] = le('<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, ue)
])
], 4)),
a("div", {
class: "glass",
style: q({
borderRadius: `${o.cornerRadius}px`,
position: "relative",
display: "inline-flex",
alignItems: "center",
gap: "24px",
padding: t.padding,
overflow: "hidden",
transition: "all 0.2s ease-in-out",
boxShadow: o.overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75), 0 4px 20px rgba(0, 0, 0, 0.5)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
}),
onMouseenter: H,
onMouseleave: P,
onMousedown: X,
onMouseup: _
}, [
(z(), f("span", {
key: `warp-${E(A)}-${T.value}`,
class: "glass__warp",
style: q(y.value),
"data-filter-url": `url(#${E(A)})`,
"data-backdrop-filter": y.value.backdropFilter
}, null, 12, Me)),
a("div", {
class: "transition-all duration-150 ease-in-out text-white",
style: q({
position: "relative",
zIndex: 1,
font: "500 20px/1 system-ui",
textShadow: o.overLight ? "0px 2px 12px rgba(0, 0, 0, 0.8)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"
})
}, [
ie(t.$slots, "default")
], 4)
], 36)
], 6)
]));
}
});
export {
Ce as LiquidGlass,
Ce as default,
re as useLiquidGlass
};