{"version":3,"file":"StaggeredTextCycle_Prod.CdTxfYSk.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/4lPJUInr9BbZwDYdxSgD/MtDBVuDoZ2YXDgn8MBbB/StaggeredTextCycle_Prod.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{motion,AnimatePresence}from\"framer-motion\";const MAX_SPEED=20;const defaultTransition={// ease: \"power4.out\",\nease:[.11,.72,0,1]};/**\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 200\n *\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function StaggeredTextCycleV2({text,speed,delay,font,userSelect,color,alignment,tag,loop,stagger}){const Tag=tag;const content=text.split(\", \").map(phrase=>phrase.replace(/\\s+/g,\" \").trim());const[iteration,setIteration]=useState(0);const speedFormatted=(MAX_SPEED-speed+1)/MAX_SPEED*5;const delayFormattedMs=delay*1e3;const speedFormattedMs=speedFormatted*1e3;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const[isFirstRender,setIsFirstRender]=useState(true);useEffect(()=>{const timeout=isFirstRender?speedFormattedMs/3+delayFormattedMs:speedFormattedMs+delayFormattedMs;const interval=setInterval(()=>{setIsFirstRender(false);if(iteration<content.length-1){setIteration(prev=>prev+1);}else if(loop){setIteration(0);}},timeout);return()=>clearInterval(interval);},[iteration,loop,isFirstRender]);return /*#__PURE__*/_jsxs(\"div\",{style:{userSelect:userSelect?\"auto\":\"none\",position:\"relative\",display:\"flex\",flexDirection:\"row\",overflow:\"visible\",justifyContent:alignment===\"center\"?\"center\":alignment===\"right\"?\"flex-end\":\"flex-start\"},children:[/*#__PURE__*/_jsx(Tag,{\"aria-hidden\":true,style:{fontSize:\"24px\",...font,marginBlockStart:\"0px\",marginBlockEnd:\"0px\",pointerEvents:\"none\",opacity:0,whiteSpace:\"pre-wrap\",width:\"100%\",textAlign:alignment},children:content.reduce((longest,current)=>current.length>longest.length?current:longest)}),isCanvas&&/*#__PURE__*/_jsx(Tag,{style:{fontSize:\"24px\",...font,color,marginBlockStart:\"0px\",marginBlockEnd:\"0px\",whiteSpace:\"pre-wrap\",position:\"absolute\",top:0,left:0,width:\"100%\",textAlign:alignment},children:content[0]}),!isCanvas&&/*#__PURE__*/_jsx(_Fragment,{children:content.map((sentence,sentenceIndex)=>{let charIndex=0;// Split sentence into segments\nconst segments=sentence.split(/(\\s+|\\b)/).map(segment=>({text:segment,chars:segment.split(\"\").map(char=>({char,originalIndex:charIndex++}))}));console.log(segments);return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,overflow:\"visible\",width:\"100%\",textAlign:alignment},children:/*#__PURE__*/_jsx(AnimatePresence,{mode:\"sync\",children:iteration===sentenceIndex&&/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexWrap:\"wrap\",width:\"100%\",justifyContent:alignment===\"center\"?\"center\":alignment===\"right\"?\"flex-end\":\"flex-start\",gap:0},children:segments.map((segment,segmentIndex)=>/*#__PURE__*/_jsx(\"div\",{style:{display:\"inline-flex\",flexWrap:\"nowrap\",whiteSpace:\"pre\",overflow:\"hidden\"},children:segment.chars.map(({char,originalIndex})=>{const baseDelay=originalIndex/(sentence.length-1);const delayInitial=baseDelay*(speedFormatted*.3)// 30% of speed\n    ;const delayAnimate=baseDelay*(speedFormatted*.4)// 40% of speed\n    ;const delayExit=baseDelay*(speedFormatted*.3)// 30% of speed\n    ;const itemTransition={initial:{transform:`translate(0px, 150%)`,transition:{...defaultTransition,duration:speedFormatted/2,delay:delayInitial*stagger}},animate:{transform:`translate(0px, 0px)`,transition:{...defaultTransition,duration:speedFormatted/2,delay:delayAnimate*stagger}},exit:{transform:`translate(0px, -150%)`,transition:{...defaultTransition,duration:speedFormatted/2,delay:delayExit*stagger}}};return /*#__PURE__*/_jsx(motion.div,{variants:itemTransition,initial:isFirstRender?false:\"initial\",animate:isFirstRender?false:\"animate\",exit:\"exit\",style:{display:\"inline-block\"},children:/*#__PURE__*/_jsx(Tag,{style:{fontSize:\"24px\",...font,color,marginBlockStart:\"0px\",marginBlockEnd:\"0px\",opacity:1},children:char})},sentence+originalIndex);})},segmentIndex))})})},sentenceIndex);})})]});}StaggeredTextCycleV2.displayName=\"Staggered Cycle\";addPropertyControls(StaggeredTextCycleV2,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"DESIGNER, DEVELOPER\",description:\"Divide the words with a comma (,) if you want to display them separately.\"},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:MAX_SPEED/2,min:1,max:MAX_SPEED},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:1,min:0,max:10,unit:\"s\"},stagger:{title:\"Stagger\",description:\"The delay between each word.\",type:ControlType.Number,defaultValue:.5,step:.1,min:0,max:1},font:{title:\"Font\",type:ControlType.Font,controls:\"extended\"},alignment:{type:ControlType.Enum,displaySegmentedControl:true,title:\"Alignment\",defaultValue:\"left\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"]},userSelect:{title:\"User Select\",type:ControlType.Boolean,defaultValue:false},color:{title:\"Color\",type:ControlType.Color,defaultValue:\"#ffffff\"},tag:{type:ControlType.Enum,title:\"Tag\",defaultValue:\"p\",displaySegmentedControl:true,segmentedControlDirection:\"horizontal\",options:[\"h1\",\"h2\",\"h3\",\"p\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"P\"]},loop:{title:\"Loop\",type:ControlType.Boolean,defaultValue:true,description:\"More components at [Framer University](https://frameruni.link/cc).\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StaggeredTextCycleV2\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerDisableUnlink\":\"*\",\"framerIntrinsicWidth\":\"400\",\"framerIntrinsicHeight\":\"200\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StaggeredTextCycle_Prod.map"],"mappings":"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"}