{"version":3,"file":"StaggeringTextButton.1PPkaIRa.mjs","names":["useRef","useMemo","useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/mDELVRo8cmqqtQBGV6T7/qOncr77przI2KpKISINd/StaggeringTextButton.js"],"sourcesContent":["// Staggering text animation button as a div, with property controls for text, background color, text color, border radius, font, and animation duration\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useRef,useMemo,useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Staggering Text Animation Div\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function StaggeringTextButton(props){const{label,background,textColor,activeColor,borderRadius,font,fontSize,duration,stagger,padding,link,style}=props;const wrapperRef=useRef(null);const letters=useMemo(()=>{return[...label];},[label]);const[animatingIndexes,setAnimatingIndexes]=useState([]);const[upIndexes,setUpIndexes]=useState([]);const[hovered,setHovered]=useState(false);const totalChars=letters.length;const delayPerChar=totalChars>1?stagger/(totalChars-1):0;// Animate up on mouse enter\nfunction handleMouseEnter(){letters.forEach((_,i)=>{setTimeout(()=>{startTransition(()=>{setAnimatingIndexes(prev=>[...prev,i]);setUpIndexes(prev=>[...prev,i]);});setTimeout(()=>{startTransition(()=>setAnimatingIndexes(prev=>prev.filter(idx=>idx!==i)));},duration);},delayPerChar*i);});}// Animate down on mouse leave\nfunction handleMouseLeave(){letters.forEach((_,i)=>{setTimeout(()=>{startTransition(()=>setUpIndexes(prev=>prev.filter(idx=>idx!==i)));},delayPerChar*i);});}const buttonContent=/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",inset:0,zIndex:0,borderRadius,background,transition:`transform ${duration}ms cubic-bezier(0.625, 0.05, 0, 1), background 0.2s`,transform:hovered?\"scale(0.92)\":\"scale(1)\",willChange:\"transform\"},\"aria-hidden\":\"true\"}),/*#__PURE__*/_jsx(\"span\",{ref:wrapperRef,style:{display:\"flex\",overflow:\"clip\",gap:0,position:\"relative\",zIndex:1,color:textColor,...font,fontSize,fontDisplay:\"fallback\"},children:letters.map((char,i)=>{const isUp=upIndexes.includes(i);return /*#__PURE__*/_jsx(\"span\",{style:{transition:`transform ${duration}ms cubic-bezier(0.625, 0.05, 0, 1) ${delayPerChar*i}ms, color 0.2s`,textShadow:`0px 1em currentColor`,display:\"inline-block\",transform:isUp?`translateY(-1em)`:\"translateY(0)\",color:isUp?activeColor:textColor},children:char===\" \"?\"\\xa0\":char},i);})})]});if(link){return /*#__PURE__*/_jsx(\"a\",{href:link,style:{...style,display:\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",borderRadius,cursor:\"pointer\",padding,transition:\"background 0.2s\",userSelect:\"none\",outline:\"none\",height:\"fit-content\",minHeight:0,textDecoration:\"none\"},tabIndex:0,role:\"button\",\"aria-label\":label,onMouseEnter:e=>{setHovered(true);handleMouseEnter();},onMouseLeave:e=>{setHovered(false);handleMouseLeave();},children:buttonContent});}return /*#__PURE__*/_jsx(\"div\",{style:{...style,display:\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",borderRadius,cursor:\"pointer\",padding,transition:\"background 0.2s\",userSelect:\"none\",outline:\"none\",height:\"fit-content\",minHeight:0},tabIndex:0,role:\"button\",\"aria-label\":label,onMouseEnter:e=>{setHovered(true);handleMouseEnter();},onMouseLeave:e=>{setHovered(false);handleMouseLeave();},children:buttonContent});}addPropertyControls(StaggeringTextButton,{label:{type:ControlType.String,title:\"Text\",defaultValue:\"Default settings\"},link:{type:ControlType.Link,title:\"Link\",defaultValue:\"\"},background:{type:ControlType.String,title:\"Background\",defaultValue:\"linear-gradient(90deg, #3B82F6 0%, #c778dd 100%)\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#fff\"},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#c778dd\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:32},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:16,min:8,max:80,step:1,unit:\"px\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:800,min:100,max:2e3,step:10,unit:\"ms\"},stagger:{type:ControlType.Number,title:\"Stagger\",defaultValue:80,min:0,max:1e3,step:1,unit:\"ms\"},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"12px 16px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StaggeringTextButton\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StaggeringTextButton.map"],"mappings":"6MAMG,SAAwB,EAAqB,EAAM,CAAC,GAAK,CAAC,QAAM,aAAW,YAAU,cAAY,eAAa,OAAK,WAAS,WAAS,UAAQ,UAAQ,OAAK,SAAO,EAAY,EAAWA,EAAO,KAAK,CAAO,EAAQC,MAAmB,CAAC,GAAG,EAAM,CAAG,CAAC,EAAM,CAAC,CAAM,CAAC,EAAiB,GAAqBC,EAAS,EAAE,CAAC,CAAM,CAAC,EAAU,GAAcA,EAAS,EAAE,CAAC,CAAM,CAAC,EAAQ,GAAYA,EAAS,GAAM,CAAO,EAAW,EAAQ,OAAa,EAAa,EAAW,EAAE,GAAS,EAAW,GAAG,EACpe,SAAS,GAAkB,CAAC,EAAQ,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,MAAoB,CAAC,EAAoB,GAAM,CAAC,GAAG,EAAK,EAAE,CAAC,CAAC,EAAa,GAAM,CAAC,GAAG,EAAK,EAAE,CAAC,EAAG,CAAC,eAAe,CAAC,MAAoB,EAAoB,GAAM,EAAK,OAAO,GAAK,IAAM,EAAE,CAAC,CAAC,EAAG,EAAS,EAAG,EAAa,EAAE,EAAG,CAC7R,SAAS,GAAkB,CAAC,EAAQ,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,MAAoB,EAAa,GAAM,EAAK,OAAO,GAAK,IAAM,EAAE,CAAC,CAAC,EAAG,EAAa,EAAE,EAAG,CAAE,IAAM,EAA2B,EAAMC,EAAU,CAAC,SAAS,CAAc,EAAK,OAAO,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,OAAO,EAAE,eAAa,aAAW,WAAW,aAAa,EAAS,qDAAqD,UAAU,EAAQ,cAAc,WAAW,WAAW,YAAY,CAAC,cAAc,OAAO,CAAC,CAAc,EAAK,OAAO,CAAC,IAAI,EAAW,MAAM,CAAC,QAAQ,OAAO,SAAS,OAAO,IAAI,EAAE,SAAS,WAAW,OAAO,EAAE,MAAM,EAAU,GAAG,EAAK,WAAS,YAAY,WAAW,CAAC,SAAS,EAAQ,KAAK,EAAK,IAAI,CAAC,IAAM,EAAK,EAAU,SAAS,EAAE,CAAC,OAAoB,EAAK,OAAO,CAAC,MAAM,CAAC,WAAW,aAAa,EAAS,qCAAqC,EAAa,EAAE,gBAAgB,WAAW,uBAAuB,QAAQ,eAAe,UAAU,EAAK,mBAAmB,gBAAgB,MAAM,EAAK,EAAY,EAAU,CAAC,SAAS,IAAO,IAAI,OAAO,EAAK,CAAC,EAAE,EAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAqd,OAAjd,EAA0B,EAAK,IAAI,CAAC,KAAK,EAAK,MAAM,CAAC,GAAG,EAAM,QAAQ,cAAc,WAAW,SAAS,eAAe,SAAS,eAAa,OAAO,UAAU,UAAQ,WAAW,kBAAkB,WAAW,OAAO,QAAQ,OAAO,OAAO,cAAc,UAAU,EAAE,eAAe,OAAO,CAAC,SAAS,EAAE,KAAK,SAAS,aAAa,EAAM,aAAa,GAAG,CAAC,EAAW,GAAK,CAAC,GAAkB,EAAG,aAAa,GAAG,CAAC,EAAW,GAAM,CAAC,GAAkB,EAAG,SAAS,EAAc,CAAC,CAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,QAAQ,cAAc,WAAW,SAAS,eAAe,SAAS,eAAa,OAAO,UAAU,UAAQ,WAAW,kBAAkB,WAAW,OAAO,QAAQ,OAAO,OAAO,cAAc,UAAU,EAAE,CAAC,SAAS,EAAE,KAAK,SAAS,aAAa,EAAM,aAAa,GAAG,CAAC,EAAW,GAAK,CAAC,GAAkB,EAAG,aAAa,GAAG,CAAC,EAAW,GAAM,CAAC,GAAkB,EAAG,SAAS,EAAc,CAAC,kBAPz0D,IAA2D,IAAoD,CAO4tD,EAAoB,EAAqB,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,mBAAmB,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,aAAa,GAAG,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,mDAAmD,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,OAAO,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,QAAQ,SAAS,cAAc,UAAU,WAAW,QAAQ,CAAC,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,GAAG,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAY,QAAQ,MAAM,UAAU,aAAa,YAAY,CAAC,CAAC"}