{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/QxoYb5f6DAQe5mYDbWRk/u6dKd5DKifOiwbXYPNJB/Befor_After_Slider.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{Frame,useMotionValue,useTransform,motion,animate,addPropertyControls,ControlType}from\"framer\";/**\n * BEFORE AFTER SLIDER\n * Fully responsive with default size\n *\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 500\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */function BeforeAfterSlider(props){return /*#__PURE__*/_jsx(Frame,{width:\"100%\",height:\"100%\",background:\"transparent\",style:{position:\"relative\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(SliderContent,{...props})});}function SliderContent({beforeImage=\"\",afterImage=\"\",initialSliderPosition=.11,isVertical=false,borderRadius=12}){const containerRef=React.useRef(null);const position=useMotionValue(0);const[fontSize,setFontSize]=React.useState(\"16px\")// State for font size\n;const[logoSize,setLogoSize]=React.useState(\"120px\")// State for logo size\n;React.useEffect(()=>{const updateSizes=entries=>{for(let entry of entries){if(entry.target){const{width,height}=entry.contentRect;const baseSize=Math.min(width,height)// Use the smaller dimension\n;// Update font size (clamped between 14px and 18px)\nconst calculatedFontSize=baseSize*.04// 4% of the smaller dimension\n;setFontSize(`${Math.min(Math.max(calculatedFontSize,14),18)}px`);// Update logo size (clamped between 32px and 120px)\nconst calculatedLogoSize=baseSize*.2// 20% of the smaller dimension\n;setLogoSize(`${Math.min(Math.max(calculatedLogoSize,32),120)}px`);}}};const observer=new ResizeObserver(updateSizes);if(containerRef.current){observer.observe(containerRef.current);}return()=>{if(containerRef.current){observer.unobserve(containerRef.current);}};},[]);React.useEffect(()=>{if(containerRef.current){const containerSize=isVertical?containerRef.current.offsetHeight:containerRef.current.offsetWidth;position.set(containerSize*initialSliderPosition);}},[initialSliderPosition,isVertical]);const clipPath=useTransform(position,val=>isVertical?`inset(${val}px 0 0 0)`:`inset(0 0 0 ${val}px)`);const beforeTagOpacity=useTransform(position,val=>{if(!containerRef.current)return 0;const size=isVertical?containerRef.current.offsetHeight:containerRef.current.offsetWidth;return val/size>.1?1:0;});const afterTagOpacity=useTransform(position,val=>{if(!containerRef.current)return 0;const size=isVertical?containerRef.current.offsetHeight:containerRef.current.offsetWidth;return val/size<.9?1:0;});const handleContainerClick=event=>{if(containerRef.current){const bounds=containerRef.current.getBoundingClientRect();const clickPosition=isVertical?event.clientY-bounds.top:event.clientX-bounds.left;animate(position,clickPosition,{type:\"spring\",stiffness:200,damping:25});}};if(!beforeImage&&!afterImage){return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#F0F6FF\",position:\"relative\",overflow:\"hidden\",borderRadius:`${borderRadius}px`},children:[/*#__PURE__*/_jsx(\"img\",{src:\"https://raw.githubusercontent.com/Muhammadrashed29/mrframerlogo/refs/heads/main/MRFRAMER.svg\",alt:\"MRFramer Logo\",style:{width:logoSize,height:\"auto\",marginBottom:\"16px\"}}),/*#__PURE__*/_jsx(\"p\",{style:{color:\"#000000\",fontSize:fontSize,fontWeight:\"500\",margin:\"0\",textAlign:\"center\"},children:\"Upload 2 Images to Continue\"})]});}if(!beforeImage||!afterImage){const image=beforeImage||afterImage;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",borderRadius:`${borderRadius}px`},children:/*#__PURE__*/_jsx(\"div\",{style:{backgroundImage:`url(${image})`,backgroundSize:\"cover\",backgroundPosition:\"center\",position:\"absolute\",width:\"100%\",height:\"100%\"}})});}return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",borderRadius:`${borderRadius}px`},onClick:handleContainerClick,children:[/*#__PURE__*/_jsx(\"div\",{style:{backgroundImage:`url(${beforeImage})`,backgroundSize:\"cover\",backgroundPosition:\"center\",position:\"absolute\",width:\"100%\",height:\"100%\"}}),/*#__PURE__*/_jsx(motion.div,{style:{backgroundImage:`url(${afterImage})`,backgroundSize:\"cover\",backgroundPosition:\"center\",position:\"absolute\",width:\"100%\",height:\"100%\",clipPath:clipPath}}),/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",top:isVertical?\"20px\":\"unset\",bottom:isVertical?\"unset\":\"20px\",left:\"20px\",background:\"rgba(0, 0, 0, 0.6)\",color:\"#fff\",padding:\"5px 10px\",borderRadius:\"5px\",fontSize:\"12px\",fontWeight:\"bold\",textTransform:\"uppercase\",opacity:beforeTagOpacity,transition:\"opacity 0.3s ease\"},children:\"AFTER\"}),/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",bottom:\"20px\",right:\"20px\",background:\"rgba(0, 0, 0, 0.6)\",color:\"#fff\",padding:\"5px 10px\",borderRadius:\"5px\",fontSize:\"12px\",fontWeight:\"bold\",textTransform:\"uppercase\",opacity:afterTagOpacity,transition:\"opacity 0.3s ease\"},children:\"BEFORE\"}),/*#__PURE__*/_jsx(SliderHandle,{position:position,containerRef:containerRef,isVertical:isVertical})]});}function SliderHandle({position,containerRef,isVertical}){const handleSize=40;const lineThickness=4;return /*#__PURE__*/_jsx(motion.div,{drag:isVertical?\"y\":\"x\",dragConstraints:containerRef,dragElastic:0,style:{[isVertical?\"y\":\"x\"]:position,position:\"absolute\",top:isVertical?`${-lineThickness/2}px`:\"0\",bottom:isVertical?`${-lineThickness/2}px`:\"0\",left:isVertical?\"0\":`${-lineThickness/2}px`,right:isVertical?\"0\":`${-lineThickness/2}px`,width:isVertical?\"100%\":`${lineThickness}px`,height:isVertical?`${lineThickness}px`:\"100%\",background:\"rgba(255, 255, 255, 0.4)\",cursor:isVertical?\"ns-resize\":\"ew-resize\"},transition:{type:\"spring\",stiffness:200,damping:25},children:/*#__PURE__*/_jsx(\"div\",{style:{width:`${handleSize}px`,height:`${handleSize}px`,borderRadius:\"50%\",background:\"rgba(0, 0, 0, 0.6)\",backdropFilter:\"blur(10px)\",WebkitBackdropFilter:\"blur(10px)\",position:\"absolute\",top:\"50%\",left:\"50%\",transform:`translate(-50%, -50%) rotate(${isVertical?\"0deg\":\"90deg\"})`,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",justifyContent:\"space-between\",alignItems:\"center\",height:\"60%\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:0,height:0,borderLeft:\"6px solid transparent\",borderRight:\"6px solid transparent\",borderBottom:\"8px solid #FFF\"}}),/*#__PURE__*/_jsx(\"div\",{style:{width:0,height:0,borderLeft:\"6px solid transparent\",borderRight:\"6px solid transparent\",borderTop:\"8px solid #FFF\"}})]})})});}addPropertyControls(BeforeAfterSlider,{beforeImage:{type:ControlType.Image,title:\"After Image\"},afterImage:{type:ControlType.Image,title:\"Before Image\"},initialSliderPosition:{type:ControlType.Number,title:\"Initial Position\",defaultValue:.11,min:0,max:1,step:.01},isVertical:{type:ControlType.Boolean,title:\"Vertical Slider\",defaultValue:false},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:0,min:0,description:\"[Mr. Framer](https://mrframer.com), Get Free High Quality Framer Resources.\"}});BeforeAfterSlider.displayName=\"Before After Slider\";export default BeforeAfterSlider;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BeforeAfterSlider\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"*\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"500\",\"framerIntrinsicWidth\":\"600\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Befor_After_Slider.map"],
  "mappings": "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",
  "names": ["BeforeAfterSlider", "props", "p", "Frame", "SliderContent", "beforeImage", "afterImage", "initialSliderPosition", "isVertical", "borderRadius", "containerRef", "pe", "position", "useMotionValue", "fontSize", "setFontSize", "ye", "logoSize", "setLogoSize", "ue", "updateSizes", "entries", "entry", "width", "height", "baseSize", "calculatedFontSize", "calculatedLogoSize", "observer", "containerSize", "clipPath", "useTransform", "val", "beforeTagOpacity", "size", "afterTagOpacity", "handleContainerClick", "event", "bounds", "clickPosition", "animate2", "image", "motion", "SliderHandle", "addPropertyControls", "ControlType", "Befor_After_Slider_default"]
}