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