{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/kTTmyz1iJ0P3H8EeWIYz/bbnX1g6mYFcdqTD1sXKL/MagicImage.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Magic Image\n * @framerAuthor Raz Rashid (https://twitter.com/ux_raz)\n * @framerIntrinsicWidth 320\n * @framerIntrinsicHeight 320\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */ function MagicImage(props){const[isVisible,setIsVisible]=useState(false);const[position,setPosition]=useState({x:0,y:0});const imageRef=useRef(null);const handleMouseEnter=e=>{const image=imageRef.current;if(image&&!isVisible){const imageWidth=image.width;const imageHeight=image.height;const newX=e.clientX-imageWidth;const newY=e.clientY-imageHeight;setPosition({x:newX,y:newY});image.style.transition=\"opacity 0.15s ease-in-out\";image.style.opacity=0;void image.offsetWidth;console.log(\"handleMouseEnter initial\");setTimeout(()=>{image.style.opacity=1;console.log(\"handleMouseEnter setTimeout 150\");},150);}};const handleMouseMove=e=>{const image=imageRef.current;if(image){const imageWidth=image.width;const imageHeight=image.height;const newX=e.clientX-imageWidth;const newY=e.clientY-imageHeight;setIsVisible(true);setTimeout(()=>{setPosition({x:newX,y:newY});},props.delay);}};const handleMouseLeave=()=>{if(isVisible){imageRef.current.style.transition=\"opacity 0.1s ease-in-out\";imageRef.current.style.opacity=0;console.log(\"handleMouseLeave opacity 0\");setTimeout(()=>{setIsVisible(false);setPosition({x:position.x,y:position.y});console.log(\"handleMouseLeave setPosition\");},250);}};const imageStyle={width:props.autoWidth?\"auto\":`${props.customWidth}${props.widthUnit}`,height:props.autoHeight?\"auto\":`${props.customHeight}${props.heightUnit}`,left:isVisible?`${position.x}px`:\"-100px\",top:isVisible?`${position.y}px`:\"-100px\",objectFit:\"cover\",transition:\"left 0.2s ease-in-out, top 0.2s ease-in-out\",position:\"fixed\",opacity:isVisible?1:0,borderRadius:props.isMixed?`${props.topLeft}px ${props.topRight}px ${props.bottomRight}px ${props.bottomLeft}px`:`${props.bRadius}px`,boxShadow:props.shadow.shadowEnabled?`${props.shadow.x}px ${props.shadow.y}px ${props.shadow.blur}px ${props.shadow.spread}px ${props.shadow.color}`:\"none\",pointerEvents:isVisible?\"auto\":\"none\"};const wrapperStyle={width:\"100%\",height:\"100%\",position:\"absolute\"};return /*#__PURE__*/ _jsx(\"div\",{className:\"component-wrapper\",onMouseEnter:handleMouseEnter,onMouseMove:handleMouseMove,onMouseLeave:handleMouseLeave,style:wrapperStyle,children:/*#__PURE__*/ _jsx(\"img\",{ref:imageRef,src:props.image,alt:props.altTag,style:imageStyle})});}addPropertyControls(MagicImage,{customWidth:{type:ControlType.Number,title:\"Width\",min:1,max:3e3,defaultValue:150,hidden:props=>props.widthUnit===\"auto\"},widthUnit:{type:ControlType.Enum,title:\"Width Unit\",options:[\"px\",\"%\",\"em\",\"auto\"],displaySegmentedControl:true,defaultValue:\"px\"},customHeight:{type:ControlType.Number,title:\"Height\",min:1,max:3e3,defaultValue:150,hidden:props=>props.heightUnit===\"auto\"},heightUnit:{type:ControlType.Enum,title:\"Height Unit\",options:[\"px\",\"%\",\"em\",\"auto\"],displaySegmentedControl:true,defaultValue:\"px\"},image:{type:ControlType.Image,title:\"Image Source\"},altTag:{type:ControlType.String,title:\"Alt Tag\",defaultValue:\"Image Trail by MilkyThemes\"},bRadius:{type:ControlType.FusedNumber,title:\"Radius\",defaultValue:0,toggleKey:\"isMixed\",toggleTitles:[\"All\",\"Individual\"],valueKeys:[\"topLeft\",\"topRight\",\"bottomRight\",\"bottomLeft\"],valueLabels:[\"tl\",\"tr\",\"br\",\"bl\"],min:0},shadow:{type:ControlType.Object,title:\"Shadow\",controls:{shadowEnabled:{type:ControlType.Boolean,title:\"Enable Shadow\",defaultValue:false},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"rgba(0, 0, 0, 0.3)\",hidden:({shadowEnabled})=>!shadowEnabled},x:{type:ControlType.Number,title:\"X\",min:-50,max:50,defaultValue:5,hidden:({shadowEnabled})=>!shadowEnabled},y:{type:ControlType.Number,title:\"Y\",min:-50,max:50,defaultValue:5,hidden:({shadowEnabled})=>!shadowEnabled},blur:{type:ControlType.Number,title:\"Blur\",min:0,max:50,defaultValue:10,hidden:({shadowEnabled})=>!shadowEnabled},spread:{type:ControlType.Number,title:\"Spread\",min:0,max:50,defaultValue:0,hidden:({shadowEnabled})=>!shadowEnabled}}},delay:{type:ControlType.Number,title:\"Follow delay\",min:0,max:300,defaultValue:0}});MagicImage.defaultProps={image:\"https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=240&h=auto&q=60\"};export default MagicImage;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MagicImage\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"*\",\"framerAuthor\":\"Raz Rashid (https://twitter.com/ux_raz)\",\"framerIntrinsicWidth\":\"320\",\"framerIntrinsicHeight\":\"320\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MagicImage.map"],
  "mappings": "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",
  "names": ["MagicImage", "props", "isVisible", "setIsVisible", "ye", "position", "setPosition", "imageRef", "pe", "handleMouseEnter", "e", "image", "imageWidth", "imageHeight", "newX", "newY", "handleMouseMove", "handleMouseLeave", "imageStyle", "p", "addPropertyControls", "ControlType", "shadowEnabled", "MagicImage_default"]
}