{"version":3,"file":"magtext.ComttVam.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/FCYp8FRx320SWq9QcLcn/qpET2t2Z0ryTCtBpcD2G/magtext.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{motion,useMotionTemplate,useSpring,useTransform,useMotionValue,useMotionValueEvent,transform}from\"framer-motion\";import{useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerDisableUnlink\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */ export default function MagText(props){const mouseX=useMotionValue(0);return /*#__PURE__*/ _jsx(\"div\",{style:{position:\"relative\",cursor:\"default\",whiteSpace:\"pre\",fontFamily:props.font.fontFamily,color:props.color,fontSize:props.font.fontSize,fontWeight:props.font.fontWeight,letterSpacing:props.font.letterSpacing,lineHeight:props.font.lineHeight},onMouseLeave:()=>{mouseX.set(Infinity);},onMouseMove:e=>{mouseX.set(e.clientX);},children:props.text.split(\"\").map((c,idx)=>/*#__PURE__*/ _jsx(Character,{c:c,mouseX:mouseX},idx))});};function Character({c,mouseX}){const ref=useRef(null);const scaleRange=[1,1.2];const scaleX=useSpring(1,{stiffness:350,damping:40});const w=useTransform(scaleX,scaleRange,[0,.07]);const padding=useTransform(scaleX,scaleRange,[0,.05]);const scaleY=useTransform(scaleX,scaleRange,[1,.95]);useMotionValueEvent(mouseX,\"change\",mx=>{if(ref.current){const{left,width}=ref.current.getBoundingClientRect();const characterCenter=left+width/2;const distance=Math.abs(characterCenter-mx);scaleX.set(transform(distance,[70,0],scaleRange));}});return /*#__PURE__*/ _jsx(motion.span,{ref:ref,style:{display:\"inline-block\",scaleX:scaleX,scaleY:scaleY,WebkitTextStrokeColor:\"currentColor\",WebkitTextStrokeWidth:useMotionTemplate`${w}em`,paddingInline:useMotionTemplate`${padding}em`},children:c});}MagText.displayName=\"MagText\";MagText.defaultProps={text:\"Colorless green ideas sleep furiously\",color:\"black\"};addPropertyControls(MagText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Colorless green ideas sleep furiously\",displayTextArea:true},font:{title:\"Font\",type:\"font\",controls:\"extended\"},color:{type:ControlType.Color,defaultValue:\"#000\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"MagText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"* @framerSupportedLayoutWidth auto\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./magtext.map"],"mappings":"scAOI,SAAwB,EAAQ,EAAM,CAAC,IAAM,EAAO,EAAe,EAAE,CAAC,OAAqB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,OAAO,UAAU,WAAW,MAAM,WAAW,EAAM,KAAK,WAAW,MAAM,EAAM,MAAM,SAAS,EAAM,KAAK,SAAS,WAAW,EAAM,KAAK,WAAW,cAAc,EAAM,KAAK,cAAc,WAAW,EAAM,KAAK,WAAW,CAAC,iBAAiB,CAAC,EAAO,IAAI,IAAS,EAAG,YAAY,GAAG,CAAC,EAAO,IAAI,EAAE,QAAQ,EAAG,SAAS,EAAM,KAAK,MAAM,GAAG,CAAC,KAAK,EAAE,IAAoB,EAAK,EAAU,CAAG,IAAS,SAAO,CAAC,EAAI,CAAC,CAAC,CAAC,CAAG,SAAS,EAAU,CAAC,IAAE,UAAQ,CAAC,IAAM,EAAIA,EAAO,KAAK,CAAO,EAAW,CAAC,EAAE,IAAI,CAAO,EAAO,EAAU,EAAE,CAAC,UAAU,IAAI,QAAQ,GAAG,CAAC,CAAO,EAAE,EAAa,EAAO,EAAW,CAAC,EAAE,IAAI,CAAC,CAAO,EAAQ,EAAa,EAAO,EAAW,CAAC,EAAE,IAAI,CAAC,CAAO,EAAO,EAAa,EAAO,EAAW,CAAC,EAAE,IAAI,CAAC,CAAqP,OAApP,EAAoB,EAAO,SAAS,GAAI,CAAC,GAAG,EAAI,QAAQ,CAAC,GAAK,CAAC,OAAK,SAAO,EAAI,QAAQ,uBAAuB,CAAO,EAAgB,EAAK,EAAM,EAAQ,EAAS,KAAK,IAAI,EAAgB,EAAG,CAAC,EAAO,IAAI,EAAU,EAAS,CAAC,GAAG,EAAE,CAAC,EAAW,CAAC,GAAI,CAAsB,EAAK,EAAO,KAAK,CAAK,MAAI,MAAM,CAAC,QAAQ,eAAsB,SAAc,SAAO,sBAAsB,eAAe,sBAAsB,CAAiB,GAAG,EAAE,IAAI,cAAc,CAAiB,GAAG,EAAQ,IAAI,CAAC,SAAS,EAAE,CAAC,kBAP1vC,IAAwH,IAA0B,IAAoD,CAOsjC,EAAQ,YAAY,UAAU,EAAQ,aAAa,CAAC,KAAK,wCAAwC,MAAM,QAAQ,CAAC,EAAoB,EAAQ,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,wCAAwC,gBAAgB,GAAK,CAAC,KAAK,CAAC,MAAM,OAAO,KAAK,OAAO,SAAS,WAAW,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,aAAa,OAAO,CAAC,CAAC"}