{"version":3,"file":"MagicImage.DbFFDdJr.mjs","names":["useRef","useState","useRef"],"sources":["https:/framerusercontent.com/modules/h8ioHyt4BUxuvVCE1Q10/aTM6mEMGlM19JjX8exDe/AvoidLayoutJumping_Prod.js","https:/framerusercontent.com/modules/kTTmyz1iJ0P3H8EeWIYz/bbnX1g6mYFcdqTD1sXKL/MagicImage.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useEffect,useRef}from\"react\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n *\n * @framerDisableUnlink\n */export default function AvoidLayoutJumping({direction,style}){const isCanvas=RenderTarget.current()===RenderTarget.canvas;const ref=useRef(null);const rafId=useRef();const vertical=direction===\"vertical\"||direction===\"both\";const horizontal=direction===\"horizontal\"||direction===\"both\";useEffect(()=>{if(isCanvas)return;const parent=ref.current?.parentElement?.parentElement;if(!parent)return;const container=parent.parentElement;if(!container)return;const updateSize=()=>{const rect=parent.getBoundingClientRect();if(horizontal){container.style.width=`${rect.width}px`;}if(vertical){container.style.height=`${rect.height}px`;}rafId.current=requestAnimationFrame(updateSize);};// Start the RAF loop\nrafId.current=requestAnimationFrame(updateSize);return()=>{if(rafId.current){cancelAnimationFrame(rafId.current);}if(container){if(horizontal){container.style.width=\"\";}if(vertical){container.style.height=\"\";}}};},[direction]);return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:{...style}});}AvoidLayoutJumping.displayName=\"Layout Jump Preventer\";addPropertyControls(AvoidLayoutJumping,{direction:{type:ControlType.Enum,defaultValue:\"vertical\",options:[\"vertical\",\"horizontal\",\"both\"],optionTitles:[\"Vertical\",\"Horizontal\",\"Both\"],displaySegmentedControl:true,segmentedControlDirection:\"vertical\",// @ts-ignore\noptionIcons:[\"direction-vertical\",\"direction-horizontal\",\"direction-all\"],description:\"More components at [Framer University](https://frameruni.link/cc).\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AvoidLayoutJumping\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AvoidLayoutJumping_Prod.map","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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"}