simple-liquid-glass
Version:
A React component for creating liquid glass morphism effects with customizable distortion and blur
3 lines (2 loc) • 16.6 kB
JavaScript
import e,{useRef as r,useState as t,useEffect as n,useMemo as a,useId as i}from"react";function o(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}function l(e,r,t){return(r=function(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(){return s=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},s.apply(null,arguments)}function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach(function(r){l(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function d(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,a,i,o,l=[],s=!0,c=!1;try{if(i=(t=t.call(e)).next,0===r);else for(;!(s=(n=i.call(t)).done)&&(l.push(n.value),l.length!==r);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw a}}return l}}(e,r)||function(e,r){if(e){if("string"==typeof e)return o(e,r);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?o(e,r):void 0}}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var f=["children","mode","scale","radius","border","lightness","displace","alpha","blur","dispersion","saturation","aberrationIntensity","frost","borderColor","glassColor","background","autoTextColor","textOnDark","textOnLight","forceTextColor","className","style","quality","autodetectquality","iosMinBlur","iosBlurMode","mobileFallback","effectMode"],p={low:5,standard:3,high:2.5,extreme:2},v={low:32,standard:24,high:16,extreme:8},g=new Map;function h(e){if(!e)return!1;var r=e.trim(),t=/^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(\d*\.?\d+)\s*\)$/i.exec(r);if(t){var n=parseFloat(t[1]);return n>0&&n<1}var a=/^hsla\(.*?,\s*(\d*\.?\d+)\s*\)$/i.exec(r);if(a){var i=parseFloat(a[1]);return i>0&&i<1}var o=/^hsl\(.*?\/\s*(\d*\.?\d+)\s*\)$/i.exec(r);if(o){var l=parseFloat(o[1]);return l>0&&l<1}var s=/^#([0-9a-f]{4})$/i.exec(r);if(s){var c=s[1].slice(3,4),u=parseInt(c+c,16)/255;return u>0&&u<1}var d=/^#([0-9a-f]{8})$/i.exec(r);if(d){var f=d[1].slice(6,8),p=parseInt(f,16)/255;return p>0&&p<1}return!1}function b(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.3,t=e.trim(),n=/^#([0-9a-f]{3})$/i.exec(t);if(n){var a=parseInt(n[1][0]+n[1][0],16),i=parseInt(n[1][1]+n[1][1],16),o=parseInt(n[1][2]+n[1][2],16);return"rgba(".concat(a,", ").concat(i,", ").concat(o,", ").concat(r,")")}var l=/^#([0-9a-f]{6})$/i.exec(t);if(l){var s=parseInt(l[1].slice(0,2),16),c=parseInt(l[1].slice(2,4),16),u=parseInt(l[1].slice(4,6),16);return"rgba(".concat(s,", ").concat(c,", ").concat(u,", ").concat(r,")")}var d=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(t);if(d){var f=parseInt(d[1],10),p=parseInt(d[2],10),v=parseInt(d[3],10);return"rgba(".concat(f,", ").concat(p,", ").concat(v,", ").concat(r,")")}var g=/^hsl\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*([^)]+)\s*\)$/i.exec(t);if(g){var h=g[1].trim(),b=g[2].trim(),m=g[3].trim();return"hsla(".concat(h,", ").concat(b,", ").concat(m,", ").concat(r,")")}return t}function m(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.3;if(e)return h(e)?e:e.includes("gradient")?function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.3,t=/^(linear-gradient|radial-gradient|conic-gradient|repeating-linear-gradient|repeating-radial-gradient|repeating-conic-gradient)\s*\(/i.exec(e);if(!t)return e;for(var n=t[1],a=e.substring(n.length+1,e.length-1),i=[],o="",l=0,s=0;s<a.length;s++){var c=a[s];if("("===c)l++;else if(")"===c)l--;else if(","===c&&0===l){i.push(o.trim()),o="";continue}o+=c}i.push(o.trim());var u=i.map(function(e){var t=/(#[0-9a-f]{3,6}|rgb\([^)]+\)|hsl\([^)]+\)|rgba\([^)]+\)|hsla\([^)]+\))/i.exec(e);if(t){var n=t[1],a=b(n,r);return e.replace(n,a)}return e});return"".concat(n,"(").concat(u.join(", "),")")}(e,r):e.includes("url(")?e:b(e,r)}var y={scale:160,radius:50,border:.05,lightness:53,displace:5,alpha:.9,blur:0,dispersion:50,saturation:140,aberrationIntensity:0,frost:.1,borderColor:"rgba(120, 120, 120, 0.7)"};function x(o){var l,c,b=o.children,x=o.mode,w=void 0===x?"preset":x,I=o.scale,M=void 0===I?160:I,E=o.radius,O=void 0===E?50:E,C=o.border,S=void 0===C?.05:C,k=o.lightness,P=void 0===k?53:k,j=o.displace,q=void 0===j?5:j,B=o.alpha,G=void 0===B?.9:B,$=o.blur,D=void 0===$?0:$,A=o.dispersion,F=void 0===A?50:A,R=o.saturation,N=void 0===R?140:R,L=o.aberrationIntensity,T=void 0===L?0:L,z=o.frost,W=void 0===z?.1:z,J=o.borderColor,U=void 0===J?"rgba(120, 120, 120, 0.7)":J,_=o.glassColor,H=void 0===_?"rgba(255, 255, 255, 0.4)":_,K=o.background,Q=o.autoTextColor,V=void 0!==Q&&Q,X=o.textOnDark,Y=void 0===X?"#ffffff":X,Z=o.textOnLight,ee=void 0===Z?"#111111":Z,re=o.forceTextColor,te=void 0!==re&&re,ne=o.className,ae=void 0===ne?"":ne,ie=o.style,oe=void 0===ie?{}:ie,le=o.quality,se=o.autodetectquality,ce=void 0!==se&&se,ue=o.iosMinBlur,de=void 0===ue?7:ue,fe=o.iosBlurMode,pe=void 0===fe?"auto":fe,ve=o.mobileFallback,ge=o.effectMode,he=void 0===ge?"auto":ge,be=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==r.indexOf(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],-1===r.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(o,f);c="preset"===w?u(u({},y),{},{scale:M,radius:O,border:S,lightness:P,displace:q,alpha:G,blur:D,dispersion:F,saturation:N,aberrationIntensity:T,frost:W,borderColor:U,mode:"preset",blend:"difference",x:"R",y:"B"}):{mode:w,scale:M,radius:O,border:S,lightness:P,displace:q,alpha:G,blur:D,dispersion:F,saturation:N,aberrationIntensity:T,frost:W,borderColor:U,blend:"difference",x:"R",y:"B"};var me=r(null),ye=d(t({width:400,height:200}),2),xe=ye[0],we=ye[1],Ie=d(t(ee),2),Me=Ie[0],Ee=Ie[1],Oe=r(null);Oe.current||(Oe.current="lg-text-".concat(Math.random().toString(36).slice(2,9)));var Ce=null!=le,Se="low",ke=d(t(Ce?le:Se),2),Pe=ke[0],je=ke[1];function qe(e){var r,t=e.trim();if(r=/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(\d*\.?\d+))?\s*\)$/i.exec(t))return{r:parseInt(r[1],10),g:parseInt(r[2],10),b:parseInt(r[3],10),a:void 0!==r[4]?parseFloat(r[4]):1};if(r=/^#([0-9a-f]{3})$/i.exec(t)){var n=r[1];return{r:parseInt(n[0]+n[0],16),g:parseInt(n[1]+n[1],16),b:parseInt(n[2]+n[2],16),a:1}}if(r=/^#([0-9a-f]{4})$/i.exec(t)){var a=r[1];return{r:parseInt(a[0]+a[0],16),g:parseInt(a[1]+a[1],16),b:parseInt(a[2]+a[2],16),a:parseInt(a[3]+a[3],16)/255}}if(r=/^#([0-9a-f]{6})$/i.exec(t)){var i=r[1];return{r:parseInt(i.slice(0,2),16),g:parseInt(i.slice(2,4),16),b:parseInt(i.slice(4,6),16),a:1}}if(r=/^#([0-9a-f]{8})$/i.exec(t)){var o=r[1];return{r:parseInt(o.slice(0,2),16),g:parseInt(o.slice(2,4),16),b:parseInt(o.slice(4,6),16),a:parseInt(o.slice(6,8),16)/255}}return null}n(function(){if(Ce)je(le);else if(ce)if("undefined"!=typeof window&&"undefined"!=typeof navigator)if("function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches)je("low");else{var e="simpleLiquidGlass_quality_v1";try{var r=sessionStorage.getItem(e);if(r){var t=JSON.parse(r);if(t&&t.q&&"number"==typeof t.t&&Date.now()-t.t<864e5)return void je(t.q)}}catch(e){}for(var n=navigator.hardwareConcurrency||4,a=navigator.deviceMemory||4,i=navigator.userAgent||"",o=/Mobi|Android|iPhone|iPad|iPod/i.test(i),l=0,s=performance.now();performance.now()-s<50;)for(var c=0;c<200;c++){Math.sin(c+l)*Math.cos(1.3*c+l)+Math.sqrt(c+1)>1e9&&(l-=1),l+=1}var u=l/Math.max(1,performance.now()-s),d=Se;je(d=n<=2||a<=1||u<8e3?"low":n<=4||a<=2||u<16e3||o?"standard":n>=8&&a>=6&&u>=32e3&&!o?"extreme":"high");try{sessionStorage.setItem(e,JSON.stringify({q:d,t:Date.now()}))}catch(e){}}else je(Se);else je(Se)},[le,ce]),n(function(){if(me.current){var e=function(){if(me.current){var e=me.current.getBoundingClientRect(),r=e.width,t=e.height;0!==r&&0!==t&&we({width:r,height:t})}};e();var r=new ResizeObserver(e);return r.observe(me.current),function(){return r.disconnect()}}},[]),n(function(){var e,r;if(V){var t=function(){var e,r,t=null!==(e=null===(r=me.current)||void 0===r?void 0:r.parentElement)&&void 0!==e?e:null;if(t){var n=function(e){for(var r=e;r;){var t=getComputedStyle(r).backgroundColor,n=t?qe(t):null;if(n&&n.a>0)return n;r=r.parentElement}var a=getComputedStyle(document.body).backgroundColor;return a?qe(a):null}(t);if(n){var a,i,o=(a={r:n.r,g:n.g,b:n.b},.2126*(i=[a.r,a.g,a.b].map(function(e){return e/255}).map(function(e){return e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4)}))[0]+.7152*i[1]+.0722*i[2]<.5);Ee(o?Y:ee)}else Ee(ee)}};t();var n=function(){return t()};window.addEventListener("resize",n),window.addEventListener("scroll",n,!0);for(var a=[],i=[],o=null!==(e=null===(r=me.current)||void 0===r?void 0:r.parentElement)&&void 0!==e?e:null;o;)i.push(o),o=o.parentElement;i.push(document.body);for(var l=0,s=i;l<s.length;l++){var c=s[l];if(c){var u=new MutationObserver(t);u.observe(c,{attributes:!0,attributeFilter:["class","style"]}),a.push(u)}}return function(){window.removeEventListener("resize",n),window.removeEventListener("scroll",n,!0),a.forEach(function(e){return e.disconnect()})}}},[V,Y,ee]);var Be=Math.min(c.radius,xe.width/2,xe.height/2),Ge=a(function(){var e=xe.width,r=xe.height,t=p[Pe]||3,n=v[Pe]||16,a=e/t,i=r/t,o=Math.max(8,Math.round(a/n)*n),l=Math.max(8,Math.round(i/n)*n),s=Math.min(o,l)*(.5*c.border),u=Math.min(c.radius,e/2,r/2)/(p[Pe]||3),d="q:".concat(Pe,"|w:").concat(o,"|h:").concat(l,"|r:").concat(c.radius,"|b:").concat(c.border,"|l:").concat(c.lightness,"|a:").concat(c.alpha,"|d:").concat(c.displace),f=g.get(d);if(f)return f;var h='\n <svg viewBox="0 0 '.concat(o," ").concat(l,'" xmlns="http://www.w3.org/2000/svg">\n <defs>\n <linearGradient id="red" x1="100%" y1="0%" x2="0%" y2="0%">\n <stop offset="0%" stop-color="#0000"/>\n <stop offset="100%" stop-color="red"/>\n </linearGradient>\n <linearGradient id="blue" x1="0%" y1="0%" x2="0%" y2="100%">\n <stop offset="0%" stop-color="#0000"/>\n <stop offset="100%" stop-color="blue"/>\n </linearGradient>\n </defs>\n <rect x="0" y="0" width="').concat(o,'" height="').concat(l,'" fill="black"/>\n <rect x="0" y="0" width="').concat(o,'" height="').concat(l,'" rx="').concat(u,'" fill="url(#red)" />\n <rect x="0" y="0" width="').concat(o,'" height="').concat(l,'" rx="').concat(u,'" fill="url(#blue)" style="mix-blend-mode: ').concat(c.blend,'" />\n <rect x="').concat(s,'" y="').concat(s,'" width="').concat(o-2*s,'" height="').concat(l-2*s,'" rx="').concat(u,'" fill="hsl(0 0% ').concat(c.lightness,"% / ").concat(c.alpha,')" style="filter:blur(').concat(c.displace,'px)" />\n </svg>\n '),b=encodeURIComponent(h),m="data:image/svg+xml,".concat(b);return g.set(d,m),m},[xe,c,Pe]),$e=i(),De="liquid-glass-filter-".concat($e),Ae=K?"transparent":H&&h(H)?H:"hsl(0 0% 100% / ".concat(c.frost,")");H&&!h(H)&&console.warn("[LiquidGlass] `glassColor` must be semi-transparent (alpha between 0 and 1). Falling back to frost-based color.");var Fe=function(){if("undefined"==typeof navigator||"undefined"==typeof window)return!1;var e=navigator.userAgent||"",r=navigator.vendor||"",t=/Android/i.test(e),n=/(iPad|iPhone|iPod)/i.test(e),a=/Macintosh/i.test(e)&&navigator.maxTouchPoints>1,i=/Apple/i.test(r),o=void 0!==window.webkit,l=/Mobile/i.test(e);return!t&&(n||a)&&i&&o&&l}(),Re=function(){if("undefined"==typeof navigator)return!1;var e=navigator.userAgent||"";return/Mobi|Android|iPhone|iPad|iPod/i.test(e)}(),Ne=Fe&&"auto"===pe?Math.max(D,de):D,Le=!("off"===he||"blur"===he||("svg"===he?Fe&&"auto"===pe:"css-only"===ve||("svg"===ve?Fe&&"auto"===pe:Fe&&"auto"===pe||Re))),Te=function(){if("off"===he)return 0;var e="low"===Pe||Re||"blur"===he?Math.min(Ne,2):Ne;return Math.max(0,e)}(),ze=Le?"saturate(".concat(c.saturation,"%) url(#").concat(De,")"):Te>0?"blur(".concat(Te,"px) saturate(").concat(c.saturation,"%)"):"saturate(".concat(c.saturation,"%)"),We="low"===Pe?Math.min(c.blur,2):c.blur,Je={width:"100%",height:"100%",borderRadius:Be,position:"absolute",zIndex:1,background:Ae,backdropFilter:ze,WebkitBackdropFilter:ze,overflow:"hidden",willChange:"backdrop-filter, filter"},Ue={position:"absolute",inset:0,borderRadius:Be,zIndex:2,pointerEvents:"none",background:"linear-gradient(315deg, ".concat(c.borderColor," 0%, rgba(120, 120, 120, 0) 30%, rgba(120, 120, 120, 0) 70%, ").concat(c.borderColor," 100%) border-box"),mask:"linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)",maskComposite:"exclude",WebkitMask:"linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)",WebkitMaskComposite:"xor",border:"1px solid transparent"},_e=u({width:"100%",height:"100%",position:"relative",borderRadius:Be,background:m(K)},oe);return e.createElement("div",s({ref:me,className:ae,style:_e},be),e.createElement("div",{style:Je},Le&&"off"!==he&&e.createElement("svg",{className:"liquid-glass-filter",style:{width:"100%",height:"100%",pointerEvents:"none",position:"absolute",inset:0},xmlns:"http://www.w3.org/2000/svg"},e.createElement("defs",null,e.createElement("filter",{id:De,colorInterpolationFilters:"sRGB"},e.createElement("feImage",{href:Ge,x:"0",y:"0",width:"100%",height:"100%",result:"map"}),"low"===Pe?e.createElement(e.Fragment,null,e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:c.scale,xChannelSelector:c.x,yChannelSelector:c.y,result:"output"}),e.createElement("feGaussianBlur",{in:"output",stdDeviation:We})):e.createElement(e.Fragment,null,e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:c.scale+c.dispersion*c.aberrationIntensity,xChannelSelector:c.x,yChannelSelector:c.y,result:"dispRed"}),e.createElement("feColorMatrix",{in:"dispRed",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"}),e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:c.scale,xChannelSelector:c.x,yChannelSelector:c.y,result:"dispGreen"}),e.createElement("feColorMatrix",{in:"dispGreen",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"}),e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:c.scale-c.dispersion*c.aberrationIntensity,xChannelSelector:c.x,yChannelSelector:c.y,result:"dispBlue"}),e.createElement("feColorMatrix",{in:"dispBlue",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"}),e.createElement("feBlend",{in:"red",in2:"green",mode:"screen",result:"rg"}),e.createElement("feBlend",{in:"rg",in2:"blue",mode:"screen",result:"output"}),e.createElement("feGaussianBlur",{in:"output",stdDeviation:We})))))),e.createElement("div",{className:"liquid-glass-border",style:Ue}),b&&e.createElement("div",{style:{position:"relative",zIndex:3,width:"100%",height:"100%",color:V?Me:void 0,transition:"color 300ms ease"},className:te&&null!==(l=Oe.current)&&void 0!==l?l:void 0},te&&V&&e.createElement("style",null,"\n .".concat(Oe.current,", .").concat(Oe.current," * { transition: color 300ms ease; }\n .").concat(Oe.current," { color: ").concat(Me," !important; }\n .").concat(Oe.current," * { color: ").concat(Me," !important; }\n ")),b))}x.displayName="LiquidGlass";export{x as LiquidGlass,x as default};
//# sourceMappingURL=index.esm.js.map