{
  "version": 3,
  "sources": ["ssg: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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",
  "names": ["addPropertyControls", "LiquidGlass", "ControlType", "props", "DEFAULT_WIDTH", "DEFAULT_HEIGHT", "preset", "config", "containerRef", "pe", "gradientBorderRef", "dimensions", "setDimensions", "ye", "ue", "updateDimensions", "RenderTarget", "width", "height", "resizeObserver", "displacementDataUri", "se", "newwidth", "newheight", "border", "effectiveRadius", "svgContent", "filterId", "ae", "glassMorphismStyle", "gradientBorderStyle", "u", "p"]
}