{"version":3,"file":"Look3D.CxKOLOBF.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/OiCf4NNLLpuN6FqtIYsk/9i5jMkFo5EhoLXlXTr2l/Look3D.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect,cloneElement}from\"react\";import{motion,useMotionValue,useSpring}from\"framer-motion\";import{SettingsMessage}from\"https://framer.com/m/Utils-QTIc.js@hDBsItohjMEOACix8wDv\";/**\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth any-prefer-auto\n * @framerIntrinsicWidth 600\n * @framerSupportedLayoutHeight any-prefer-auto\n * @framerIntrinsicHeight 300\n */export default function CursorRotation(props){const{style,draggingOptions:{withDragging,withSnapBack,transition},rotationOptions:{withRotationLimitX,withRotationLimitY,maxX,maxY,minX,minY},perspectiveOptions:{withPerspective,perspectiveValue},sensitivity}=props;const children=Array.isArray(props.children)?props.children[0]:props.children;if(!children||children.length===0){return /*#__PURE__*/_jsx(SettingsMessage,{title:\"Set Up the Component\",description:\"Connect a frame to the component.\",containerStyle:{...props.style,width:\"400px\",height:\"200px\",borderRadius:props.borderRadius}});}const[isDragging,setIsDragging]=useState(false);const rotateX=useMotionValue(0);const rotateY=useMotionValue(0);const springConfig=withDragging?transition:{duration:0};const rotateXSpring=useSpring(rotateX,springConfig);const rotateYSpring=useSpring(rotateY,springConfig);const[startingRotation,setStartingRotation]=useState({x:0,y:0});const[startingMousePosition,setStartingMousePosition]=useState({clientX:0,clientY:0});useEffect(()=>{const handleMove=event=>{if(isDragging){event.preventDefault();}const isTouchEvent=event.type.startsWith(\"touch\");const clientX=isTouchEvent?event.touches[0].clientX:event.clientX;const clientY=isTouchEvent?event.touches[0].clientY:event.clientY;const{innerWidth,innerHeight}=window;let rotationX,rotationY;if(withDragging){if(isDragging){const mouseX=clientX-startingMousePosition.clientX;const mouseY=clientY-startingMousePosition.clientY;const rotationFactorX=mouseY/(10/sensitivity);const rotationFactorY=-mouseX/(10/sensitivity);rotationX=startingRotation.x-rotationFactorX;rotationY=startingRotation.y-rotationFactorY;}else if(withSnapBack){rotationX=0;rotationY=0;}else{rotationX=rotateX.get();rotationY=rotateY.get();}}else{const adjustedSensitivity=sensitivity/10;const rotationFactorX=(clientY/innerHeight-.5)*adjustedSensitivity;const rotationFactorY=(clientX/innerWidth-.5)*adjustedSensitivity;rotationX=-rotationFactorX*180;rotationY=rotationFactorY*180;}if(withRotationLimitX){rotationX=Math.max(-minX,Math.min(maxX,rotationX));}if(withRotationLimitY){rotationY=Math.max(-minY,Math.min(maxY,rotationY));}rotateX.set(rotationX);rotateY.set(rotationY);};window.addEventListener(\"mousemove\",handleMove);window.addEventListener(\"touchmove\",handleMove);return()=>{window.removeEventListener(\"mousemove\",handleMove);window.removeEventListener(\"touchmove\",handleMove);};},[isDragging,withDragging,withSnapBack,withRotationLimitX,withRotationLimitY,maxX,maxY,sensitivity]);useEffect(()=>{if(!isDragging&&withDragging&&withSnapBack){rotateX.set(0);rotateY.set(0);}},[isDragging]);const handleOnStart=e=>{const isTouchEvent=e.type.startsWith(\"touch\");const clientX=isTouchEvent?e.touches[0].clientX:e.clientX;const clientY=isTouchEvent?e.touches[0].clientY:e.clientY;setIsDragging(true);setStartingRotation({x:rotateX.get(),y:rotateY.get()});setStartingMousePosition({clientX,clientY});};const handleOnEnd=()=>setIsDragging(false);// Clone the children and apply preserve-3d to them as well\nconst clonedChildren=/*#__PURE__*/cloneElement(children,{style:{...children.props.style,transformStyle:\"preserve-3d\"}});return /*#__PURE__*/_jsx(motion.div,{onPanStart:handleOnStart,onPanEnd:handleOnEnd,onTouchStart:handleOnStart,onTouchEnd:handleOnEnd,style:{...style,rotateX:rotateXSpring,rotateY:rotateYSpring,transformStyle:\"preserve-3d\",transformPerspective:withPerspective?perspectiveValue:undefined,userSelect:\"none\",touchAction:\"none\"},children:clonedChildren});}CursorRotation.displayName=\"3D Look\";addPropertyControls(CursorRotation,{children:{title:\"Element\",type:ControlType.ComponentInstance},sensitivity:{title:\"Sensitivity\",type:ControlType.Number,defaultValue:2,step:1,displayStepper:true,min:1,max:10},draggingOptions:{type:ControlType.Object,title:\"Dragging\",controls:{withDragging:{title:\"Enable\",type:ControlType.Boolean,defaultValue:false},transition:{title:\"Transition\",type:ControlType.Transition,defaultValue:{type:\"spring\",stiffness:600,damping:100},hidden(props){return!props.withDragging;}},withSnapBack:{title:\"Snap Back\",type:ControlType.Boolean,defaultValue:false,hidden(props){return!props.withDragging;}}}},rotationOptions:{type:ControlType.Object,title:\"Rota. Limit\",controls:{withRotationLimitX:{title:\"Limit X\",type:ControlType.Boolean,defaultValue:false},maxX:{title:\"Max X\",type:ControlType.Number,defaultValue:90,step:1,displayStepper:true,min:0,max:undefined,hidden(props){return!props.withRotationLimitX;}},minX:{title:\"Min X\",type:ControlType.Number,defaultValue:90,step:1,displayStepper:true,min:0,max:undefined,hidden(props){return!props.withRotationLimitX;}},withRotationLimitY:{title:\"Limit Y\",type:ControlType.Boolean,defaultValue:false},maxY:{title:\"Max Y\",type:ControlType.Number,defaultValue:90,step:1,displayStepper:true,min:0,max:undefined,hidden(props){return!props.withRotationLimitY;}},minY:{title:\"Min Y\",type:ControlType.Number,defaultValue:90,step:1,displayStepper:true,min:0,max:undefined,hidden(props){return!props.withRotationLimitY;}}}},perspectiveOptions:{type:ControlType.Object,title:\"Perspective\",description:\"Need help with the component? Watch [this video](https://youtu.be/WdMR737ptFs).\\nMore components at [Framer University](https://frameruni.link/cc).\",controls:{withPerspective:{title:\"Enable\",type:ControlType.Boolean,defaultValue:false},perspectiveValue:{title:\"Value\",type:ControlType.Number,defaultValue:1200,step:100,min:500,max:5e3,hidden(props){return!props.withPerspective;}}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CursorRotation\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-auto\",\"framerIntrinsicWidth\":\"600\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-auto\",\"framerIntrinsicHeight\":\"300\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Look3D.map"],"mappings":"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"}