{"version":3,"file":"LiquidGlass_Prod.CZwp3EdC.mjs","names":["useRef","useState","useMemo","useId"],"sources":["https:/framerusercontent.com/modules/YV3ZelwoeNMPQlJSW14i/5b2lq4MppWIbAwvoUmfh/LiquidGlass_Prod.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useMemo,useEffect,useRef,useState,useId}from\"react\";import{ControlType,addPropertyControls,RenderTarget}from\"framer\";// ------------------------------------------------------------ //\n// PROPERTY CONTROLS\n// ------------------------------------------------------------ //\naddPropertyControls(LiquidGlass,{settings:{type:ControlType.Object,controls:{mode:{type:ControlType.Enum,options:[\"preset\",\"custom\"],optionTitles:[\"Preset\",\"Custom\"],displaySegmentedControl:true,defaultValue:\"preset\"},scale:{type:ControlType.Number,min:-360,max:360,step:1,defaultValue:160,hidden:props=>props.mode===\"preset\"},radius:{type:ControlType.Number,min:0,max:500,step:1,defaultValue:50},border:{type:ControlType.Number,min:0,max:.5,step:.01,defaultValue:.05,hidden:props=>props.mode===\"preset\"},lightness:{type:ControlType.Number,min:0,max:100,step:1,defaultValue:53,hidden:props=>props.mode===\"preset\"},displace:{title:\"Blur\",type:ControlType.Number,min:0,max:10,step:.01,defaultValue:.38,hidden:props=>props.mode===\"preset\"},alpha:{type:ControlType.Number,min:0,max:1,step:.01,defaultValue:.9,hidden:props=>props.mode===\"preset\"},blur:{title:\"Displace\",type:ControlType.Number,min:0,max:100,step:1,defaultValue:5,hidden:props=>props.mode===\"preset\"},dispersion:{type:ControlType.Number,min:0,max:100,step:1,defaultValue:50,hidden:props=>props.mode===\"preset\"},frost:{type:ControlType.Number,min:0,max:1,step:.01,defaultValue:.1,hidden:props=>props.mode===\"preset\"},borderColor:{title:\"Border\",type:ControlType.Color,defaultValue:\"rgba(120, 120, 120, 0.7)\"}},description:\"More components at [Framer University](https://frameruni.link/cc).\"}});// Default dimensions for initial render\nconst DEFAULT_WIDTH=400;const DEFAULT_HEIGHT=200;const preset={scale:160,radius:50,border:.05,lightness:53,displace:.38,alpha:.9,blur:5,dispersion:50,frost:.1,borderColor:\"rgba(120, 120, 120, 0.7)\"};// ------------------------------------------------------------ //\n// MAIN COMPONENT\n// ------------------------------------------------------------ //\n/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 348\n * @framerIntrinsicHeight 100\n * @framerDisableUnlink\n */export default function LiquidGlass(props){let config=props.settings;// if preset, use preset values\nif(props.settings.mode===\"preset\"){config={...preset,mode:\"preset\",blend:\"difference\",x:\"R\",y:\"B\",radius:props.settings.radius};}else{config={...config,blend:\"difference\",x:\"R\",y:\"B\"};}const containerRef=useRef(null);const gradientBorderRef=useRef(null);const[dimensions,setDimensions]=useState({width:DEFAULT_WIDTH,height:DEFAULT_HEIGHT});// Update dimensions when the container size changes\nuseEffect(()=>{if(!containerRef.current)return;const updateDimensions=()=>{if(!containerRef.current)return;// Check if we're on Framer canvas\nconst isCanvas=RenderTarget.current()===RenderTarget.canvas;if(isCanvas){// On canvas, use offsetWidth/offsetHeight which are scale-independent\nconst width=containerRef.current.offsetWidth;const height=containerRef.current.offsetHeight;if(width===0||height===0)return;setDimensions({width,height});return;}// In preview/production, use getBoundingClientRect\nconst{width,height}=containerRef.current.getBoundingClientRect();if(width===0||height===0)return;setDimensions({width,height});};// Initial measurement\nupdateDimensions();// Create ResizeObserver to watch for size changes\nconst resizeObserver=new ResizeObserver(updateDimensions);resizeObserver.observe(containerRef.current);return()=>resizeObserver.disconnect();},[]);// Generate displacement map SVG as data URI\nconst displacementDataUri=useMemo(()=>{const{width,height}=dimensions;// for the best looking effect, we need to half of the width and height\nconst newwidth=width/2;const newheight=height/2;const border=Math.min(newwidth,newheight)*(config.border*.5);// Ensure radius doesn't exceed container constraints for consistent CSS/SVG behavior\nconst effectiveRadius=Math.min(config.radius,width/2,height/2);const svgContent=`\n      <svg viewBox=\"0 0 ${newwidth} ${newheight}\" 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=\"${newwidth}\" height=\"${newheight}\" fill=\"black\"/>\n        <rect x=\"0\" y=\"0\" width=\"${newwidth}\" height=\"${newheight}\" rx=\"${effectiveRadius}\" fill=\"url(#red)\" />\n        <rect x=\"0\" y=\"0\" width=\"${newwidth}\" height=\"${newheight}\" rx=\"${effectiveRadius}\" fill=\"url(#blue)\" style=\"mix-blend-mode: ${config.blend}\" />\n        <rect x=\"${border}\" y=\"${border}\" width=\"${newwidth-border*2}\" height=\"${newheight-border*2}\" rx=\"${effectiveRadius}\" fill=\"hsl(0 0% ${config.lightness}% / ${config.alpha})\" style=\"filter:blur(${config.blur}px)\" />\n      </svg>\n    `;const encoded=encodeURIComponent(svgContent);return`data:image/svg+xml,${encoded}`;},[dimensions,config]);// Generate a unique ID for the SVG filter so that multiple component\n// instances can coexist without ID collisions.\nconst uniqueFilterId=useId();const filterId=`liquid-glass-filter-${uniqueFilterId}`;const glassMorphismStyle={width:\"100%\",height:\"100%\",borderRadius:config.radius,position:\"absolute\",zIndex:1,background:`hsl(0 0% 100% / ${config.frost})`,backdropFilter:`url(#${filterId})`};// Gradient border styles based on the codepen technique\nconst gradientBorderStyle={position:\"absolute\",inset:0,borderRadius:config.radius,zIndex:2,pointerEvents:\"none\",background:`linear-gradient(315deg, ${config.borderColor} 0%, rgba(120, 120, 120, 0) 30%, rgba(120, 120, 120, 0) 70%, ${config.borderColor} 100%) border-box`,mask:\"linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)\",maskComposite:\"exclude\",border:`1px solid transparent`};return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\"},children:[/*#__PURE__*/_jsx(\"div\",{style:glassMorphismStyle,children:/*#__PURE__*/_jsx(\"svg\",{className:\"filter\",style:{width:\"100%\",height:\"100%\",pointerEvents:\"none\",position:\"absolute\",inset:0},xmlns:\"http://www.w3.org/2000/svg\",children:/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsxs(\"filter\",{id:filterId,colorInterpolationFilters:\"sRGB\",children:[/*#__PURE__*/_jsx(\"feImage\",{href:displacementDataUri,x:\"0\",y:\"0\",width:\"100%\",height:\"100%\",result:\"map\"}),/*#__PURE__*/_jsx(\"feDisplacementMap\",{in:\"SourceGraphic\",in2:\"map\",id:\"redchannel\",scale:config.scale+config.dispersion,xChannelSelector:config.x,yChannelSelector:config.y,result:\"dispRed\"}),/*#__PURE__*/_jsx(\"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\"}),/*#__PURE__*/_jsx(\"feDisplacementMap\",{in:\"SourceGraphic\",in2:\"map\",id:\"greenchannel\",scale:config.scale+config.dispersion,xChannelSelector:config.x,yChannelSelector:config.y,result:\"dispGreen\"}),/*#__PURE__*/_jsx(\"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\"}),/*#__PURE__*/_jsx(\"feDisplacementMap\",{in:\"SourceGraphic\",in2:\"map\",id:\"bluechannel\",scale:config.scale+config.dispersion,xChannelSelector:config.x,yChannelSelector:config.y,result:\"dispBlue\"}),/*#__PURE__*/_jsx(\"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\"}),/*#__PURE__*/_jsx(\"feBlend\",{in:\"red\",in2:\"green\",mode:\"screen\",result:\"rg\"}),/*#__PURE__*/_jsx(\"feBlend\",{in:\"rg\",in2:\"blue\",mode:\"screen\",result:\"output\"}),/*#__PURE__*/_jsx(\"feGaussianBlur\",{in:\"output\",stdDeviation:config.displace})]})})})}),/*#__PURE__*/_jsx(\"div\",{ref:gradientBorderRef,id:\"gradient-border\",style:gradientBorderStyle})]});}LiquidGlass.displayName=\"Liquid Glass\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LiquidGlass\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"\",\"framerIntrinsicWidth\":\"348\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"100\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LiquidGlass_Prod.map"],"mappings":"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"}