{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/nS4BRl5zmCNe9w08ObeO/jGmJyL1Sww5pVFQT1155/Hover.js"],
  "sourcesContent": ["// \u00A9 Framer University. All rights reserved.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{motion,useSpring}from\"framer-motion\";import{useState,useRef,useEffect}from\"react\";// Learn more: https://www.framer.com/docs/guides/overrides/\n//Spring animation parameters\nconst spring={type:\"spring\",stiffness:300,damping:30};/**\n * Based on the code created by Joshua Guo\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export function with3D(Component){return props=>{const[rotateXaxis,setRotateXaxis]=useState(0);const[rotateYaxis,setRotateYaxis]=useState(0);const ref=useRef(null);const handleMouseMove=event=>{const element=ref.current;const elementRect=element.getBoundingClientRect();const elementWidth=elementRect.width;const elementHeight=elementRect.height;const elementCenterX=elementWidth/2;const elementCenterY=elementHeight/2;const mouseX=event.clientY-elementRect.y-elementCenterY;const mouseY=event.clientX-elementRect.x-elementCenterX;const degreeX=mouseX/elementWidth*-20//The number is the rotation factor\n;const degreeY=mouseY/elementHeight*-20//The number is the rotation factor\n;setRotateXaxis(degreeX);setRotateYaxis(degreeY);};const handleMouseEnd=()=>{setRotateXaxis(0);setRotateYaxis(0);};const dx=useSpring(0,spring);const dy=useSpring(0,spring);useEffect(()=>{dx.set(-rotateXaxis);dy.set(rotateYaxis);},[rotateXaxis,rotateYaxis]);return /*#__PURE__*/_jsx(motion.div,{transition:spring,style:{perspective:\"1200px\",transformStyle:\"preserve-3d\",width:`${props.width}`,height:`${props.height}`},children:/*#__PURE__*/_jsx(motion.div,{ref:ref,whileHover:{scale:1.1},onMouseMove:handleMouseMove,onMouseLeave:handleMouseEnd,transition:spring,style:{width:\"100%\",height:\"100%\",rotateX:dx,rotateY:dy},children:/*#__PURE__*/_jsxs(\"div\",{style:{perspective:\"1200px\",transformStyle:\"preserve-3d\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(motion.div,{transition:spring,style:{width:\"100%\",height:\"100%\",backfaceVisibility:\"hidden\",position:\"absolute\"},children:/*#__PURE__*/_jsx(Component,{...props,variant:\"Front\",style:{width:\"100%\",height:\"100%\"}})}),/*#__PURE__*/_jsx(motion.div,{initial:{rotateY:180},transition:spring,style:{width:\"100%\",height:\"100%\",zIndex:0,backfaceVisibility:\"hidden\",position:\"absolute\"},children:/*#__PURE__*/_jsx(Component,{...props,variant:\"Back\",style:{width:\"100%\",height:\"100%\"}})})]})})});};}\nexport const __FramerMetadata__ = {\"exports\":{\"with3D\":{\"type\":\"reactHoc\",\"name\":\"with3D\",\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Hover.map"],
  "mappings": "qHAGA,IAAMA,EAAO,CAAC,KAAK,SAAS,UAAU,IAAI,QAAQ,EAAE,EAK1C,SAASC,EAAOC,EAAU,CAAC,OAAOC,GAAO,CAAC,GAAK,CAACC,EAAYC,CAAc,EAAEC,EAAS,CAAC,EAAO,CAACC,EAAYC,CAAc,EAAEF,EAAS,CAAC,EAAQG,EAAIC,EAAO,IAAI,EAAQC,EAAgBC,GAAO,CAA2B,IAAMC,EAAlBJ,EAAI,QAAkC,sBAAsB,EAAQK,EAAaD,EAAY,MAAYE,EAAcF,EAAY,OAAaG,EAAeF,EAAa,EAAQG,EAAeF,EAAc,EAAQG,EAAON,EAAM,QAAQC,EAAY,EAAEI,EAAqBE,EAAOP,EAAM,QAAQC,EAAY,EAAEG,EAAqBI,EAAQF,EAAOJ,EAAa,IACjjBO,EAAQF,EAAOJ,EAAc,IACnCV,EAAee,CAAO,EAAEZ,EAAea,CAAO,CAAE,EAAQC,EAAe,IAAI,CAACjB,EAAe,CAAC,EAAEG,EAAe,CAAC,CAAE,EAAQe,EAAGC,EAAU,EAAExB,CAAM,EAAQyB,EAAGD,EAAU,EAAExB,CAAM,EAAE,OAAA0B,EAAU,IAAI,CAACH,EAAG,IAAI,CAACnB,CAAW,EAAEqB,EAAG,IAAIlB,CAAW,CAAE,EAAE,CAACH,EAAYG,CAAW,CAAC,EAAsBoB,EAAKC,EAAO,IAAI,CAAC,WAAW5B,EAAO,MAAM,CAAC,YAAY,SAAS,eAAe,cAAc,MAAM,GAAGG,EAAM,QAAQ,OAAO,GAAGA,EAAM,QAAQ,EAAE,SAAsBwB,EAAKC,EAAO,IAAI,CAAC,IAAInB,EAAI,WAAW,CAAC,MAAM,GAAG,EAAE,YAAYE,EAAgB,aAAaW,EAAe,WAAWtB,EAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQuB,EAAG,QAAQE,CAAE,EAAE,SAAsBI,EAAM,MAAM,CAAC,MAAM,CAAC,YAAY,SAAS,eAAe,cAAc,MAAM,OAAO,OAAO,MAAM,EAAE,SAAS,CAAcF,EAAKC,EAAO,IAAI,CAAC,WAAW5B,EAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,mBAAmB,SAAS,SAAS,UAAU,EAAE,SAAsB2B,EAAKzB,EAAU,CAAC,GAAGC,EAAM,QAAQ,QAAQ,MAAM,CAAC,MAAM,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAAewB,EAAKC,EAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,EAAE,WAAW5B,EAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,OAAO,EAAE,mBAAmB,SAAS,SAAS,UAAU,EAAE,SAAsB2B,EAAKzB,EAAU,CAAC,GAAGC,EAAM,QAAQ,OAAO,MAAM,CAAC,MAAM,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAE",
  "names": ["spring", "with3D", "Component", "props", "rotateXaxis", "setRotateXaxis", "ye", "rotateYaxis", "setRotateYaxis", "ref", "pe", "handleMouseMove", "event", "elementRect", "elementWidth", "elementHeight", "elementCenterX", "elementCenterY", "mouseX", "mouseY", "degreeX", "degreeY", "handleMouseEnd", "dx", "useSpring", "dy", "ue", "p", "motion", "u"]
}