{"version":3,"file":"ZoomFrame.DDlusBsL.mjs","names":[],"sources":["https:/framerusercontent.com/modules/iowo7Ec3yLpyjkTGXHO2/GpUS3UXP8bWdUkg8opC6/ZoomFrame.js"],"sourcesContent":["// Image Zoom on Hover with Cursor Tracking\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useState,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Image Zoom on Hover\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ZoomFrame(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},zoom,borderRadius,style}=props;const containerRef=useRef(null);const[hovered,setHovered]=useState(false);const[coords,setCoords]=useState({x:50,y:50});const isStatic=useIsStaticRenderer();const handleMouseMove=useCallback(e=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const x=(e.clientX-rect.left)/rect.width*100;const y=(e.clientY-rect.top)/rect.height*100;startTransition(()=>setCoords({x,y}));},[]);const handleMouseEnter=useCallback(()=>{startTransition(()=>setHovered(true));},[]);const handleMouseLeave=useCallback(()=>{startTransition(()=>setHovered(false));},[]);const scale=hovered&&!isStatic?Math.max(zoom,1):1;const transformOrigin=`${coords.x}% ${coords.y}%`;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:\"100%\",overflow:\"hidden\",borderRadius,position:\"relative\",cursor:hovered&&!isStatic?\"zoom-in\":\"pointer\",background:\"#eee\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},onMouseMove:isStatic?undefined:handleMouseMove,onMouseEnter:isStatic?undefined:handleMouseEnter,onMouseLeave:isStatic?undefined:handleMouseLeave,tabIndex:0,\"aria-label\":image.alt,role:\"img\",children:/*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",borderRadius,transition:\"transform 0.45s cubic-bezier(.4,1.2,.4,1)\",willChange:\"transform\",transform:`scale(${scale})`,transformOrigin,pointerEvents:\"none\",userSelect:\"none\",display:\"block\"},draggable:false})});}addPropertyControls(ZoomFrame,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},zoom:{type:ControlType.Number,title:\"Zoom\",defaultValue:1.15,min:1,max:4,step:.05,displayStepper:true},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:64,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ZoomFrame\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"300\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ZoomFrame.map"],"mappings":"kTASG,SAAwB,EAAU,EAAM,CAAC,GAAK,CAAC,QAAM,CAAC,IAAI,sEAAsE,IAAI,mBAAoB,EAAC,OAAK,eAAa,QAAM,CAAC,EAAY,EAAa,EAAO,KAAK,CAAM,CAAC,EAAQ,EAAW,CAAC,GAAS,EAAM,CAAM,CAAC,EAAO,EAAU,CAAC,EAAS,CAAC,EAAE,GAAG,EAAE,EAAG,EAAC,CAAO,EAAS,GAAqB,CAAO,EAAgB,EAAY,GAAG,CAAC,IAAI,EAAa,QAAQ,OAAO,IAAM,EAAK,EAAa,QAAQ,uBAAuB,CAAO,GAAG,EAAE,QAAQ,EAAK,MAAM,EAAK,MAAM,IAAU,GAAG,EAAE,QAAQ,EAAK,KAAK,EAAK,OAAO,IAAI,EAAgB,IAAI,EAAU,CAAC,IAAE,GAAE,EAAC,CAAC,AAAE,EAAC,CAAE,EAAC,CAAO,EAAiB,EAAY,IAAI,CAAC,EAAgB,IAAI,GAAW,EAAK,CAAC,AAAE,EAAC,CAAE,EAAC,CAAO,EAAiB,EAAY,IAAI,CAAC,EAAgB,IAAI,GAAW,EAAM,CAAC,AAAE,EAAC,CAAE,EAAC,CAAO,EAAM,IAAU,EAAS,KAAK,IAAI,EAAK,EAAE,CAAC,EAAQ,KAAmB,EAAO,EAAE,IAAI,EAAO,EAAE,GAAG,MAAoB,GAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,GAAG,EAAM,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,eAAa,SAAS,WAAW,OAAO,IAAU,EAAS,UAAU,UAAU,WAAW,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,QAAS,EAAC,YAAY,MAAA,GAAmB,EAAgB,aAAa,MAAA,GAAmB,EAAiB,aAAa,MAAA,GAAmB,EAAiB,SAAS,EAAE,aAAa,EAAM,IAAI,KAAK,MAAM,SAAsB,EAAK,MAAM,CAAC,IAAI,EAAM,IAAI,IAAI,EAAM,IAAI,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,eAAa,WAAW,4CAA4C,WAAW,YAAY,WAAW,QAAQ,EAAM,GAAG,kBAAgB,cAAc,OAAO,WAAW,OAAO,QAAQ,OAAQ,EAAC,WAAU,CAAM,EAAC,AAAC,EAAC,AAAE,cAAA,AARxnD,GAA2C,IAA+D,IAAwE,CAQs8C,EAAoB,EAAU,CAAC,MAAM,CAAC,KAAK,EAAY,gBAAgB,MAAM,OAAQ,EAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,KAAK,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,gBAAe,CAAK,EAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,CAAE,CAAC,EAAC"}