{"version":3,"file":"TiltCard.B5PLWO-5.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/daeIh7c9vsmEYcbj6iWN/73ER957IjDenFRWUAtd2/TiltCard.js"],"sourcesContent":["// 3D tilt card with editable image, tilts on cursor, shadow included in transform\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useState,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const defaultImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"};/**\n * 3D Tilt Card with Editable Image\n *\n * @framerIntrinsicWidth 320\n * @framerIntrinsicHeight 200\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function TiltCard(props){const{image=defaultImage,shadowColor,shadowBlur,shadowSpread,borderRadius,background,style}=props;const cardRef=useRef(null);const[tilt,setTilt]=useState({x:0,y:0});const[hovered,setHovered]=useState(false);const isStatic=useIsStaticRenderer();const handleMouseMove=useCallback(e=>{if(!cardRef.current)return;const rect=cardRef.current.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;const px=(x/rect.width-.5)*2;const py=(y/rect.height-.5)*2;// Max tilt 18deg\nstartTransition(()=>setTilt({x:py*18,y:-px*18}));},[]);const handleMouseLeave=useCallback(()=>{startTransition(()=>setTilt({x:0,y:0}));startTransition(()=>setHovered(false));},[]);const handleMouseEnter=useCallback(()=>{startTransition(()=>setHovered(true));},[]);// Shadow moves with transform\nconst shadow=`${shadowColor} 0px ${8+tilt.x*1.5}px ${shadowBlur}px ${shadowSpread}px`;return /*#__PURE__*/_jsx(\"div\",{ref:cardRef,style:{...style,width:\"100%\",height:\"100%\",perspective:900,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:\"transparent\",borderRadius,overflow:\"visible\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",borderRadius,background,boxShadow:shadow,transform:isStatic?\"none\":`rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,transition:isStatic?\"none\":hovered?\"transform 0.18s cubic-bezier(.22,1,.36,1), box-shadow 0.18s cubic-bezier(.22,1,.36,1)\":\"transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s cubic-bezier(.22,1,.36,1)\",willChange:\"transform, box-shadow\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"hidden\",cursor:\"pointer\"},onMouseMove:isStatic?undefined:handleMouseMove,onMouseLeave:isStatic?undefined:handleMouseLeave,onMouseEnter:isStatic?undefined:handleMouseEnter,tabIndex:0,\"aria-label\":\"3D tilt card\",children:/*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",borderRadius,pointerEvents:\"none\",userSelect:\"none\"},draggable:false})})});}addPropertyControls(TiltCard,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},shadowColor:{type:ControlType.Color,title:\"Shadow Color\",defaultValue:\"rgba(0,0,0,0.18)\"},shadowBlur:{type:ControlType.Number,title:\"Shadow Blur\",defaultValue:32,min:0,max:64,step:1},shadowSpread:{type:ControlType.Number,title:\"Shadow Spread\",defaultValue:0,min:-16,max:32,step:1},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:18,min:0,max:48,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TiltCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"320\",\"framerIntrinsicHeight\":\"200\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TiltCard.map"],"mappings":"kMASG,SAAwB,EAAS,EAAM,CAAC,GAAK,CAAC,QAAM,EAAa,cAAY,aAAW,eAAa,eAAa,aAAW,SAAO,EAAY,EAAQA,EAAO,KAAK,CAAM,CAAC,EAAK,GAASC,EAAS,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAM,CAAC,EAAQ,GAAYA,EAAS,GAAM,CAAO,EAAS,GAAqB,CAAO,EAAgBC,EAAY,GAAG,CAAC,GAAG,CAAC,EAAQ,QAAQ,OAAO,IAAM,EAAK,EAAQ,QAAQ,uBAAuB,CAAO,EAAE,EAAE,QAAQ,EAAK,KAAW,EAAE,EAAE,QAAQ,EAAK,IAAU,GAAI,EAAE,EAAK,MAAM,IAAI,EAAQ,GAAI,EAAE,EAAK,OAAO,IAAI,EACngB,MAAoB,EAAQ,CAAC,EAAE,EAAG,GAAG,EAAE,CAAC,EAAG,GAAG,CAAC,CAAC,EAAG,EAAE,CAAC,CAAO,EAAiBA,MAAgB,CAAC,MAAoB,EAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,MAAoB,EAAW,GAAM,CAAC,EAAG,EAAE,CAAC,CAAO,EAAiBA,MAAgB,CAAC,MAAoB,EAAW,GAAK,CAAC,EAAG,EAAE,CAAC,CACjQ,EAAO,GAAG,EAAY,OAAO,EAAE,EAAK,EAAE,IAAI,KAAK,EAAW,KAAK,EAAa,IAAI,OAAoB,EAAK,MAAM,CAAC,IAAI,EAAQ,MAAM,CAAC,GAAG,EAAM,MAAM,OAAO,OAAO,OAAO,YAAY,IAAI,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,WAAW,cAAc,eAAa,SAAS,UAAU,CAAC,SAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,eAAa,aAAW,UAAU,EAAO,UAAU,EAAS,OAAO,WAAW,EAAK,EAAE,eAAe,EAAK,EAAE,MAAM,WAAW,EAAS,OAAO,EAAQ,wFAAwF,sFAAsF,WAAW,wBAAwB,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,SAAS,SAAS,OAAO,UAAU,CAAC,YAAY,EAAS,IAAA,GAAU,EAAgB,aAAa,EAAS,IAAA,GAAU,EAAiB,aAAa,EAAS,IAAA,GAAU,EAAiB,SAAS,EAAE,aAAa,eAAe,SAAsB,EAAK,MAAM,CAAC,IAAI,EAAM,IAAI,IAAI,EAAM,IAAI,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,eAAa,cAAc,OAAO,WAAW,OAAO,CAAC,UAAU,GAAM,CAAC,CAAC,CAAC,CAAC,CAAC,oBAVnoC,IAA+D,IAAwE,CAAM,EAAa,CAAC,IAAI,sEAAsE,IAAI,oBAAoB,CAUw4B,EAAoB,EAAS,CAAC,MAAM,CAAC,KAAK,EAAY,gBAAgB,MAAM,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,mBAAmB,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,IAAI,IAAI,GAAG,KAAK,EAAE,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC"}