{"version":3,"file":"FlipCard.DVrd7c8P.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/qNuXoOysaaa9zblOQYLp/XEeFQ7E7wBD8F0CTep9O/FlipCard.js"],"sourcesContent":["// 3D Flip Card with editable image and shadow in transform\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * 3D Flip Card with editable image and shadow in transform\n *\n * @framerIntrinsicWidth 240\n * @framerIntrinsicHeight 360\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function FlipCard(props){const{image={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Gradient 1 - Blue\"},borderRadius,backImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Gradient 2 - Purple\"},style}=props;const cardRef=useRef(null);const[flipped,setFlipped]=useState(false);const isStatic=useIsStaticRenderer();const[flipDirection,setFlipDirection]=useState(1);// Hold flip a bit longer\nconst flipHoldTimeout=useRef(null);const cardStyle={...style,width:\"100%\",height:\"100%\",background:\"transparent\",borderRadius,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",willChange:\"transform\",// Remove boxShadow\n// Remove flip transition, only keep box-shadow and transform for flip\ntransition:\"transform 0.3s\",position:\"relative\",perspective:\"800px\",overflow:\"visible\",zIndex:0};const innerStyle={width:\"100%\",height:\"100%\",borderRadius,position:\"relative\",transformStyle:\"preserve-3d\",// Make flip animation slower and customizable\ntransition:`transform ${props.flipDuration}s ${props.flipEasing}`,// Only flip, no tilt\ntransform:`rotateY(${flipped?180*flipDirection:0}deg)`};const faceStyle={width:\"100%\",height:\"100%\",position:\"absolute\",top:0,left:0,backfaceVisibility:\"hidden\",borderRadius,overflow:\"hidden\"};const backStyle={...faceStyle,transform:\"rotateY(180deg)\"};return /*#__PURE__*/_jsx(\"div\",{ref:cardRef,style:cardStyle,// Flip on hover instead of click\nonMouseEnter:isStatic?undefined:e=>{if(!cardRef.current)return;const rect=cardRef.current.getBoundingClientRect();const x=e.clientX-rect.left;const fromLeft=x{setFlipDirection(fromLeft?-1:1);setFlipped(true);});// Hold the flip longer\nif(flipHoldTimeout.current)clearTimeout(flipHoldTimeout.current);},onMouseLeave:isStatic?undefined:()=>{if(flipHoldTimeout.current)clearTimeout(flipHoldTimeout.current);flipHoldTimeout.current=typeof window!==\"undefined\"?window.setTimeout(()=>{startTransition(()=>setFlipped(false));},600):null// Hold for 600ms after mouse leave\n;},tabIndex:0,\"aria-label\":\"3D Tilt Card\",children:/*#__PURE__*/_jsxs(\"div\",{style:{...innerStyle,transform:`rotateY(${flipped?180*flipDirection:0}deg)`},children:[/*#__PURE__*/_jsx(\"div\",{style:{...faceStyle,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(\"img\",{src:image?.src||\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:image?.alt||\"Gradient 1 - Blue\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",pointerEvents:\"none\",userSelect:\"none\",display:\"block\"},draggable:false})}),/*#__PURE__*/_jsx(\"div\",{style:{...backStyle,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(\"img\",{src:backImage?.src||\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:backImage?.alt||\"Gradient 2 - Purple\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",pointerEvents:\"none\",userSelect:\"none\",display:\"block\"},draggable:false})})]})});}addPropertyControls(FlipCard,{image:{type:ControlType.ResponsiveImage,title:\"Image\"},backImage:{type:ControlType.ResponsiveImage,title:\"Back Image\"},frontContent:{type:ControlType.Slot,title:\"Front Content\",maxCount:1,hidden:()=>true},backContent:{type:ControlType.Slot,title:\"Back Content\",maxCount:1,hidden:()=>true},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:16,min:0,max:64,step:1},flipDuration:{type:ControlType.Number,title:\"Flip Duration\",defaultValue:.8,min:.1,max:2,step:.05,unit:\"s\"},flipEasing:{type:ControlType.Enum,title:\"Flip Easing\",options:[\"ease\",\"linear\",\"ease-in\",\"ease-out\",\"ease-in-out\",\"cubic-bezier(0.4,0.2,0.2,1)\",\"cubic-bezier(0.22,1,0.36,1)\",\"cubic-bezier(0.65,0,0.35,1)\"],optionTitles:[\"Ease\",\"Linear\",\"Ease In\",\"Ease Out\",\"Ease In Out\",\"Expressive\",\"Snappy\",\"Smooth\"],defaultValue:\"cubic-bezier(0.4,0.2,0.2,1)\",displaySegmentedControl:false}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FlipCard\",\"slots\":[\"frontContent\",\"backContent\"],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"360\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"240\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FlipCard.map"],"mappings":"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"}