{"version":3,"file":"ThreeD_effect.CH7MPkQ4.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/4oX6zstxpLBVNnQdZdA4/FXhRDYSShXwX25cOeWFR/ThreeD_effect.js"],"sourcesContent":["// © 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};var rotation_factor=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*-rotation_factor//The number is the rotation factor\n;const degreeY=mouseY/elementHeight*-rotation_factor//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\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ThreeD_effect.map"],"mappings":"iRAQG,SAAgB,EAAO,EAAU,CAAC,MAAO,IAAO,CAAC,GAAK,CAAC,EAAY,EAAe,CAACA,EAAS,GAAQ,CAAC,EAAY,EAAe,CAACA,EAAS,GAAS,EAAIC,EAAO,MAAY,EAAgB,GAAO,CAAC,IAAM,EAAQ,EAAI,QAAc,EAAY,EAAQ,wBAA8B,EAAa,EAAY,MAAY,EAAc,EAAY,OAAa,EAAe,EAAa,EAAQ,EAAe,EAAc,EAAQ,EAAO,EAAM,QAAQ,EAAY,EAAE,EAAqB,EAAO,EAAM,QAAQ,EAAY,EAAE,EAAqB,EAAQ,EAAO,EAAa,CAAC,EACljB,EAAQ,EAAO,EAAc,CAAC,EACpC,EAAe,GAAS,EAAe,EAAU,EAAO,MAAmB,CAAC,EAAe,GAAG,EAAe,EAAI,EAAO,EAAG,EAAU,EAAE,GAAc,EAAG,EAAU,EAAE,GAA6F,OAArF,MAAc,CAAC,EAAG,IAAI,CAAC,GAAa,EAAG,IAAI,EAAc,EAAC,CAAC,EAAY,EAAY,EAAsB,EAAK,EAAO,IAAI,CAAC,WAAW,EAAO,MAAM,CAAC,YAAY,SAAS,eAAe,cAAc,MAAM,GAAG,EAAM,QAAQ,OAAO,GAAG,EAAM,SAAS,CAAC,SAAsB,EAAK,EAAO,IAAI,CAAK,MAAI,WAAW,CAAC,MAAM,IAAI,CAAC,YAAY,EAAgB,aAAa,EAAe,WAAW,EAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,EAAG,QAAQ,EAAG,CAAC,SAAsB,EAAM,MAAM,CAAC,MAAM,CAAC,YAAY,SAAS,eAAe,cAAc,MAAM,OAAO,OAAO,OAAO,CAAC,SAAS,CAAc,EAAK,EAAO,IAAI,CAAC,WAAW,EAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,mBAAmB,SAAS,SAAS,WAAW,CAAC,SAAsB,EAAK,EAAU,CAAC,GAAG,EAAM,QAAQ,QAAQ,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,CAAC,EAAE,EAAe,EAAK,EAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,OAAO,EAAE,mBAAmB,SAAS,SAAS,WAAW,CAAC,SAAsB,EAAK,EAAU,CAAC,GAAG,EAAM,QAAQ,OAAO,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAG,CAAE,+BAPluC,EAAO,CAAC,KAAK,SAAS,UAAU,IAAI,QAAQ,GAAG,CAAK,EAAgB"}