tanuki-ui/dist/lib/themes/LiquidGlassFilter.cjs

HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react");function F({id:u="liquid-glass-filter",scale:z=1.2,animationDuration:L="0.3s"}){const M=j.useRef(null),D=(t,a,v="circle")=>{const c=M.current;if(!c)return"";c.width=t,c.height=a;const m=c.getContext("2d");if(!m)return"";const g=m.createImageData(t,a),d=g.data,q=t/2,b=a/2,h=Math.min(q,b);for(let s=0;s<a;s++)for(let n=0;n<t;n++){const f=(s*t+n)*4;let r,i,x;if(v==="circle"){const o=n-q,l=s-b;if(Math.sqrt(o*o+l*l)<=h){const p=o/h,y=l/h,G=Math.sqrt(Math.max(0,1-p*p-y*y));r=p,i=y,x=G}else r=0,i=0,x=1}else{const o=Math.min(n,s,t-n-1,a-s-1),l=Math.min(o/20,1);r=(n/t-.5)*l,i=(s/a-.5)*l,x=Math.sqrt(Math.max(0,1-r*r-i*i))}d[f]=Math.floor((r+1)*127.5),d[f+1]=Math.floor((i+1)*127.5),d[f+2]=Math.floor(x*255),d[f+3]=255}return m.putImageData(g,0,0),c.toDataURL()};return j.useEffect(()=>{D(256,256,"circle")},[]),e.jsxs(e.Fragment,{children:[e.jsx("canvas",{ref:M,style:{display:"none"},width:256,height:256}),e.jsx("svg",{style:{position:"absolute",width:0,height:0,pointerEvents:"none"},"aria-hidden":"true",children:e.jsx("defs",{children:e.jsxs("filter",{id:u,x:"0%",y:"0%",width:"100%",height:"100%",children:[e.jsx("feTurbulence",{type:"fractalNoise",baseFrequency:"0.008 0.008",numOctaves:"2",seed:"92",result:"noise"}),e.jsx("feGaussianBlur",{in:"noise",stdDeviation:"2",result:"blurred"}),e.jsx("feDisplacementMap",{in:"SourceGraphic",in2:"blurred",scale:"77",xChannelSelector:"R",yChannelSelector:"G"})]})})})]})}function R(u="liquid-glass-filter"){return{style:{backdropFilter:`url(#${u}) blur(20px)`,WebkitBackdropFilter:`url(#${u}) blur(20px)`},className:"liquid-glass-element"}}exports.LiquidGlassFilter=F;exports.useLiquidGlass=R;