{"version":3,"file":"Interactive3DCard.DPR2beqm.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/UghHLGsSQ5jMfzno5eyI/WZP40ZWd4smvZNSbIu85/Interactive3DCard.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useEffect,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function Interactive3DCard({recipient,imageUrl,textBody,sender}){const cardRef=useRef(null);const containerRef=useRef(null);const[isHovered,setIsHovered]=useState(false);const fallbackUrl=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL0XZAgKJChNMis5DgHuo8pnswEZLPyLyoVg&s\";useEffect(()=>{const card=cardRef.current;const container=containerRef.current;if(!card||!container)return;const handleMouseMove=e=>{const rect=card.getBoundingClientRect();const centerX=rect.left+rect.width/3;const centerY=rect.top+rect.height/3;const mouseX=e.clientX-centerX;const mouseY=e.clientY-centerY;const rotateX=mouseY/rect.height*-10;const rotateY=mouseX/rect.width*10;container.style.transform=`rotateX(${rotateX}deg) rotateY(${rotateY}deg)${isHovered?` scale3d(1.05,1.05,1.05)`:\"\"}`;};const handleEnter=()=>setIsHovered(true);const handleLeave=()=>{setIsHovered(false);container.style.transform=\"\";};card.addEventListener(\"mousemove\",handleMouseMove);card.addEventListener(\"mouseenter\",handleEnter);card.addEventListener(\"mouseleave\",handleLeave);return()=>{card.removeEventListener(\"mousemove\",handleMouseMove);card.removeEventListener(\"mouseenter\",handleEnter);card.removeEventListener(\"mouseleave\",handleLeave);};},[isHovered]);return /*#__PURE__*/_jsx(\"div\",{children:/*#__PURE__*/_jsx(\"div\",{ref:cardRef,style:{width:480,height:300,borderRadius:12,transformStyle:\"preserve-3d\",perspective:1500,cursor:\"pointer\",userSelect:\"none\",marginBottom:15},children:/*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",borderRadius:12,transition:\"all .2s ease-out\",transformStyle:\"preserve-3d\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:\"5% 5%\",borderRadius:12,background:\"rgba(0,0,0,.2)\",filter:\"blur(30px)\",transition:\"all .2s ease-out\",boxShadow:isHovered?\"0 68px 150px rgba(14,21,47,.4),0 24px 60px rgba(14,21,47,.4)\":\"0 12px 45px rgba(14,21,47,.6)\"}}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",borderRadius:12,overflow:\"hidden\",transformStyle:\"preserve-3d\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,backgroundImage:`url(${fallbackUrl})`,backgroundSize:\"cover\",backgroundPosition:\"center\",borderRadius:12,transition:\"all .1s ease-out\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"5%\",right:\"40%\",bottom:\"83%\",left:\"40%\",backgroundImage:`url(${imageUrl})`,backgroundSize:\"contain\",backgroundRepeat:\"no-repeat\",backgroundPosition:\"top\",transition:\"all .1s ease-out\"}}),/*#__PURE__*/_jsx(\"svg\",{viewBox:\"0 0 535 313\"// keep the original viewBox\n,width:\"90%\"// stretch to full card width\n,height:\"90%\"// stretch to full card height\n,style:{position:\"absolute\",/* —‑‑ Center & size —‑‑ */width:\"90%\",left:\"50%\",/*     … then pull back half its own width → perfectly centred   */height:\"auto\",/* —‑‑ Extras —‑‑ */top:\"50%\",transform:\"translate(-50%,-50%) translateZ(45px)\",pointerEvents:\"none\",zIndex:3},children:/*#__PURE__*/_jsx(\"path\",{// d=\"M200 0.5H1V312H534V0.5H324.5\"\nd:\"M204 1H1V312.5H534V1H331\",stroke:\"black\",fill:\"transparent\",strokeWidth:1.5,strokeLinejoin:\"round\"})}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",/* — size & centre — */width:\"75%\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%) translateZ(75px)\",/* — flex centring inside wrapper — */display:\"flex\",alignItems:\"center\",justifyContent:\"center\",pointerEvents:\"none\",zIndex:4},children:/*#__PURE__*/_jsxs(\"span\",{style:{fontFamily:\"'Caveat', 'Segoe Print', 'Bradley Hand', cursive\",fontSize:15,fontWeight:100,color:\"#444444\",textAlign:\"left\",lineHeight:1.25},children:[\"Dear \",recipient,\",\",/*#__PURE__*/_jsx(\"br\",{}),/*#__PURE__*/_jsx(\"br\",{}),textBody,/*#__PURE__*/_jsx(\"br\",{}),/*#__PURE__*/_jsx(\"br\",{}),\"With appreciation,\",/*#__PURE__*/_jsx(\"br\",{}),sender]})})]}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,borderRadius:12,background:\"linear-gradient(135deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%)\",pointerEvents:\"none\",mixBlendMode:\"overlay\"}})]})})});}/* ── Property controls ─────────── */addPropertyControls(Interactive3DCard,{imageUrl:{type:ControlType.String,title:\"Image\"},recipient:{type:ControlType.String,title:\"Note Recipient\",placeholder:\"John\",inputType:\"textarea\"},textBody:{type:ControlType.String,title:\"Note Body\",placeholder:\"Thank you for the passion and dedication you bring to our team.\",inputType:\"textarea\"},sender:{type:ControlType.String,title:\"Note Sender\",placeholder:\"Donald Miller\",inputType:\"textarea\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Interactive3DCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Interactive3DCard.map"],"mappings":"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"}