{
  "version": 3,
  "sources": ["ssg: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": "0FACkL,IAAMA,EAAa,CAAC,IAAI,sEAAsE,IAAI,mBAAmB,EAQrR,SAARC,EAA0BC,EAAM,CAAC,GAAK,CAAC,MAAAC,EAAMH,EAAa,YAAAI,EAAY,WAAAC,EAAW,aAAAC,EAAa,aAAAC,EAAa,WAAAC,EAAW,MAAAC,CAAK,EAAEP,EAAYQ,EAAQC,EAAO,IAAI,EAAO,CAACC,EAAKC,CAAO,EAAEC,EAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAO,CAACC,EAAQC,CAAU,EAAEF,EAAS,EAAK,EAAQG,EAASC,EAAoB,EAAQC,EAAgBC,EAAYC,GAAG,CAAC,GAAG,CAACX,EAAQ,QAAQ,OAAO,IAAMY,EAAKZ,EAAQ,QAAQ,sBAAsB,EAAQa,EAAEF,EAAE,QAAQC,EAAK,KAAWE,EAAEH,EAAE,QAAQC,EAAK,IAAUG,GAAIF,EAAED,EAAK,MAAM,IAAI,EAAQI,GAAIF,EAAEF,EAAK,OAAO,IAAI,EACngBK,EAAgB,IAAId,EAAQ,CAAC,EAAEa,EAAG,GAAG,EAAE,CAACD,EAAG,EAAE,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC,EAAQG,EAAiBR,EAAY,IAAI,CAACO,EAAgB,IAAId,EAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAEc,EAAgB,IAAIX,EAAW,EAAK,CAAC,CAAE,EAAE,CAAC,CAAC,EAAQa,EAAiBT,EAAY,IAAI,CAACO,EAAgB,IAAIX,EAAW,EAAI,CAAC,CAAE,EAAE,CAAC,CAAC,EAChQc,EAAO,GAAG1B,CAAW,QAAQ,EAAEQ,EAAK,EAAE,GAAG,MAAMP,CAAU,MAAMC,CAAY,KAAK,OAAoByB,EAAK,MAAM,CAAC,IAAIrB,EAAQ,MAAM,CAAC,GAAGD,EAAM,MAAM,OAAO,OAAO,OAAO,YAAY,IAAI,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,WAAW,cAAc,aAAAF,EAAa,SAAS,SAAS,EAAE,SAAsBwB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,aAAAxB,EAAa,WAAAC,EAAW,UAAUsB,EAAO,UAAUb,EAAS,OAAO,WAAWL,EAAK,CAAC,gBAAgBA,EAAK,CAAC,OAAO,WAAWK,EAAS,OAAOF,EAAQ,wFAAwF,sFAAsF,WAAW,wBAAwB,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,SAAS,SAAS,OAAO,SAAS,EAAE,YAAYE,EAAS,OAAUE,EAAgB,aAAaF,EAAS,OAAUW,EAAiB,aAAaX,EAAS,OAAUY,EAAiB,SAAS,EAAE,aAAa,eAAe,SAAsBE,EAAK,MAAM,CAAC,IAAI5B,EAAM,IAAI,IAAIA,EAAM,IAAI,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,aAAAI,EAAa,cAAc,OAAO,WAAW,MAAM,EAAE,UAAU,EAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAACyB,EAAoB/B,EAAS,CAAC,MAAM,CAAC,KAAKgC,EAAY,gBAAgB,MAAM,OAAO,EAAE,WAAW,CAAC,KAAKA,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,YAAY,CAAC,KAAKA,EAAY,MAAM,MAAM,eAAe,aAAa,kBAAkB,EAAE,WAAW,CAAC,KAAKA,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,EAAE,aAAa,CAAC,KAAKA,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,EAAE,aAAa,CAAC,KAAKA,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC",
  "names": ["defaultImage", "TiltCard", "props", "image", "shadowColor", "shadowBlur", "shadowSpread", "borderRadius", "background", "style", "cardRef", "pe", "tilt", "setTilt", "ye", "hovered", "setHovered", "isStatic", "useIsStaticRenderer", "handleMouseMove", "te", "e", "rect", "x", "y", "px", "py", "Z", "handleMouseLeave", "handleMouseEnter", "shadow", "p", "addPropertyControls", "ControlType"]
}