{"version":3,"file":"ReflexCard.bX_7gjWC.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/IglOCT1v2A0AFatmtfxW/rG6yvTGdzmd9MX3URQv0/ReflexCard.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useEffect,useCallback,useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";const defaultImages=[{src:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Card 1\"},alt:\"Card 1\"},{src:{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Card 2\"},alt:\"Card 2\"}];const defaultCardImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Card Image\"};const overlayUrl=\"https://images.unsplash.com/photo-1615715874901-ad6a07ec5c88?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTQ0MjE2ODd8&ixlib=rb-4.1.0&q=85\";function clamp(val,min,max){return Math.max(min,Math.min(max,val));}/**\n * Interactive 3D Cards with Conic Mask Overlay\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */function ReflexCard(props){const{image=defaultCardImage,overlayImage=overlayUrl,style,highlightImage,highlightOpacity=1}=props;const containerRef=useRef(null);const[dimensions,setDimensions]=useState({width:0,height:0});useEffect(()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();setDimensions({width:rect.width,height:rect.height});},[]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{display:\"flex\",justifyContent:\"center\",alignItems:\"center\",width:\"100%\",height:\"100%\",...style,position:\"relative\"},children:[/*#__PURE__*/_jsx(\"svg\",{width:\"0\",height:\"0\",style:{position:\"absolute\"},\"aria-hidden\":true,children:/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsx(\"filter\",{id:\"filterEdges\",children:/*#__PURE__*/_jsx(\"feConvolveMatrix\",{kernelMatrix:\"0 1 0 1 -4 1 0 1 0\",order:\"3 3\",bias:\"0\",divisor:\"1\",preserveAlpha:\"true\"})})})}),/*#__PURE__*/_jsx(Card3D,{img:image,overlayImage:overlayImage,aspectRatio:props.aspectRatio,borderRadius:props.borderRadius,overlayOpacity:props.overlayOpacity,highlightImage:highlightImage,highlightOpacity:highlightOpacity})]});}function Card3D({img,overlayImage,aspectRatio=\"9/12\",borderRadius=16,overlayOpacity=1,highlightImage,highlightOpacity=1}){const cardRef=useRef(null);const[xy,setXY]=useState({x:0,y:0});const[hover,setHover]=useState(false);const handleMouseMove=useCallback(e=>{const rect=cardRef.current.getBoundingClientRect();const offsetX=e.clientX-rect.left;const offsetY=e.clientY-rect.top;const centerX=offsetX-rect.width/2;const centerY=offsetY-rect.height/2;const posX=Math.round(-1*centerX*.1);const posY=Math.round(centerY*.1);startTransition(()=>setXY({x:clamp(posY,-20,20),y:clamp(posX,-20,20)}));},[]);const handleMouseLeave=useCallback(()=>{startTransition(()=>setXY({x:0,y:0}));setHover(false);},[]);const handleMouseEnter=useCallback(()=>{setHover(true);},[]);const atan=-Math.atan2(xy.x,xy.y);const imgSrc=img.src||img;const imgAlt=img.alt||\"\";return /*#__PURE__*/_jsx(\"div\",{className:\"card\",ref:cardRef,style:{width:\"100%\",height:\"100%\",perspective:1200,transformStyle:\"preserve-3d\",position:\"relative\"},onMouseEnter:handleMouseEnter,onMouseMove:handleMouseMove,onMouseLeave:handleMouseLeave,tabIndex:0,\"aria-label\":\"3D Card\",children:/*#__PURE__*/_jsxs(\"figure\",{style:{position:\"relative\",height:\"100%\",borderRadius:borderRadius,overflow:\"hidden\",willChange:\"transform\",transition:hover?\"--x 0s, --y 0s\":\"--x 400ms ease, --y 400ms ease\",transform:`rotateX(${xy.x}deg) rotateY(${xy.y}deg)`},children:[/*#__PURE__*/_jsx(\"img\",{src:imgSrc,alt:imgAlt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{pointerEvents:\"none\",content:\"''\",position:\"absolute\",inset:0,background:`url(${overlayImage?.src||overlayImage}) center / cover`,maskImage:`conic-gradient(from ${atan}rad, #0000, #fffa, #0000, #fffa, #0000)`,WebkitMaskImage:`conic-gradient(from ${atan}rad, #0000, #fffa, #0000, #fffa, #0000)`,backdropFilter:\"url(#filterEdges)\",opacity:hover?overlayOpacity:0,mixBlendMode:\"plus-lighter\",transition:\"opacity 200ms\"}}),highlightImage&&/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{pointerEvents:\"none\",content:\"''\",position:\"absolute\",inset:0,background:`url(${highlightImage?.src||highlightImage}) center / cover`,opacity:hover?highlightOpacity:0,mixBlendMode:\"screen\",transition:\"opacity 200ms\"}})]})});}addPropertyControls(ReflexCard,{image:{type:ControlType.ResponsiveImage,title:\"Card Image\",description:\"Upload an image for the card.\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",description:\"Corner radius for cards.\",defaultValue:16,min:0,max:64,step:1,unit:\"px\"},overlayOpacity:{type:ControlType.Number,title:\"Overlay Opacity\",description:\"Opacity of the conic mask overlay.\",defaultValue:1,min:0,max:1,step:.01},overlayImage:{type:ControlType.ResponsiveImage,title:\"Overlay Image\",description:\"Image used for the conic mask overlay.\"}});export default ReflexCard;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ReflexCard\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ReflexCard.map"],"mappings":"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"}