{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/tugFMfOpnvgroE4Bzcqi/kj8DEh5pNnBUKHytO8wK/AnimTitle.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useCallback,useEffect,useLayoutEffect,useRef,useState}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";// Welcome to Code in Framer\n// Get Started: https://www.framer.com/docs/guides/\n/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/docs/guides/auto-sizing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */ const isBrowser=typeof window!==\"undefined\";export default function AnimTitle(props){const{title,image,color,fontSize,hoverColor,disabled,disabledColor,itemHeight,lineHeight,borderTop,showImageOnDisable,style,tag}=props;const[active,setActive]=useState(false);const[cursor,setCursor]=useState(\"auto\");const[normalColor,setColor]=useState(color);const rowStyle={height:itemHeight,width:\"100%\",display:\"grid\",gridAutoFlow:\"column\",flexFlow:\"row wrap\",justifyContent:\"space-between\",paddingLeft:0,paddingTop:20,paddingBottom:15,paddingRight:20,cursor:cursor,pointerEvents:\"all\",borderTop:borderTop,zIndex:2};const titleRef=useRef();const useMousePosition=()=>{const[mousePosition,setMousePosition]=useState({x:0,y:0});useEffect(()=>{if(!isBrowser)return;const updateMousePosition=event=>{setMousePosition({x:event.clientX,y:event.clientY});};window.addEventListener(\"mousemove\",updateMousePosition);return()=>isBrowser?window.removeEventListener(\"mousemove\",updateMousePosition):null;},[]);return mousePosition;};const getDimensionObject=node=>{const rect=node.getBoundingClientRect();return{width:rect.width,height:rect.height};};const useSize=()=>{const[dimensions,setDimensions]=useState({});const[node,setNode]=useState(null);const ref=useCallback(node=>{setNode(node);},[]);useLayoutEffect(()=>{if(node){const measure=()=>setDimensions(getDimensionObject(node));measure();}},[node]);return[ref,dimensions];};const{x,y}=useMousePosition();const textStyle={fontSize:fontSize,fontFamily:\"Circular Air Pro Light\",lineHeight:lineHeight+\"px\",fontWeight:\"400\",color:normalColor,zIndex:2};const mouseOver=()=>{if(disabled==false){setColor(hoverColor);setCursor(\"pointer\");setActive(true);}if(showImageOnDisable){setColor(disabledColor);setCursor(\"pointer\");setActive(true);}//setCursor(\"url(\" + props.img + \"), auto\")\n};const mouseOut=()=>{if(disabled==false){setColor(color);setCursor(\"auto\");setActive(false);}else{setColor(disabledColor);}if(showImageOnDisable){setCursor(\"auto\");setActive(false);}};function Media({url,active,x,y}){const[ref,{width,height}]=useSize();var class_name=active?\"is-active\":\"no-active\";return /*#__PURE__*/ _jsx(\"img\",{ref:ref,className:class_name,src:url,alt:\"\",style:{transform:`translate3d(${x-width/2}px, ${y-height/2}px, 0px)`}});}const getColor=()=>{if(disabled){return disabledColor;}else{return normalColor;}};return /*#__PURE__*/ _jsxs(motion.div,{ref:titleRef,style:{...style,...containerStyle},children:[/*#__PURE__*/ _jsx(\"style\",{children:projectMediaCSS}),/*#__PURE__*/ _jsxs(\"div\",{style:rowStyle,onMouseEnter:mouseOver,onMouseLeave:mouseOut,children:[tag===\"h1\"&&/*#__PURE__*/ _jsx(\"h1\",{style:{...textStyle,color:getColor(),marginTop:0},children:title}),tag===\"h2\"&&/*#__PURE__*/ _jsx(\"h2\",{style:{...textStyle,color:getColor(),marginTop:0},children:title}),tag===\"h3\"&&/*#__PURE__*/ _jsx(\"h3\",{style:{...textStyle,color:getColor(),marginTop:0},children:title}),tag===\"h4\"&&/*#__PURE__*/ _jsx(\"h4\",{style:{...textStyle,color:getColor(),marginTop:0},children:title}),tag===\"h5\"&&/*#__PURE__*/ _jsx(\"h5\",{style:{...textStyle,color:getColor(),marginTop:0},children:title})]}),/*#__PURE__*/ _jsx(\"div\",{className:\"project-media\",children:/*#__PURE__*/ _jsx(Media,{url:image,active:active,x:active?x:0,y:active?y:0})})]});};AnimTitle.defaultProps={title:\"test\",image:\"\"};addPropertyControls(AnimTitle,{title:{title:\"Title\",type:ControlType.String,defaultValue:\"test\"},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"#ffffff\"},hoverColor:{title:\"Hover Color\",type:ControlType.Color,defaultValue:\"#E08AD1\"},fontSize:{title:\"Font Size\",type:ControlType.Number,defaultValue:30},lineHeight:{title:\"Line Height\",type:ControlType.Number,defaultValue:40},borderTop:{title:\"Top border\",type:ControlType.String,defaultValue:\"2px solid #fff\"},disabled:{title:\"Disabled\",type:ControlType.Boolean,defaultValue:false},disabledColor:{title:\"Disabled Color\",type:ControlType.Color,defaultValue:\"#767676\"},showImageOnDisable:{title:\"Disabled Image\",type:ControlType.Boolean,defaultValue:false},itemHeight:{title:\"Height\",type:ControlType.Number,defaultValue:60},image:{title:\"Image URL\",type:ControlType.String,defaultValue:\"https://qsxfdqhsuyovskknxkaj.supabase.co/storage/v1/object/public/imagefetch/sample.png\"},tag:{title:\"Tag\",type:ControlType.Enum,options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\"],defaultValue:\"h1\"}});const containerStyle={display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"visible\",position:\"relative\",pointerEvents:\"all\",minWidth:300};const projectMediaCSS=`\n    .project-title {\n    transition: opacity 0.35s cubic-bezier(0.77, 0, 0.175, 1);\n    font-size: 80px;\n    color: white;\n    font-weight: 400;\n    }\n\n    .project-media {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n    }\n\n    .project-media img{\n        opacity: 0;\n        position: absolute;\n        width: auto;\n        height: auto;\n        max-height: 40%;\n        max-width: 50%;\n        object-fit: contain;\n        pointer-events: none;\n        \n    }\n\n    .project-media img.is-active {\n        opacity: 1;\n    }\n\n   \n`;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AnimTitle\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AnimTitle.map"],
  "mappings": "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",
  "names": ["isBrowser", "window", "AnimTitle", "props", "title", "image", "color", "fontSize", "hoverColor", "disabled", "disabledColor", "itemHeight", "lineHeight", "borderTop", "showImageOnDisable", "style", "tag", "active", "setActive", "ye", "cursor", "setCursor", "normalColor", "setColor", "rowStyle", "titleRef", "pe", "useMousePosition", "mousePosition", "setMousePosition", "ue", "updateMousePosition", "event", "getDimensionObject", "node", "rect", "useSize", "dimensions", "setDimensions", "setNode", "ref", "te", "fe", "x", "y", "textStyle", "mouseOver", "mouseOut", "Media", "url", "width", "height", "class_name", "p", "getColor", "u", "motion", "containerStyle", "projectMediaCSS", "addPropertyControls", "ControlType"]
}