{
  "version": 3,
  "sources": ["ssg: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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",
  "names": ["MAX_SPEED", "defaultTransition", "StaggeredTextCycleV2", "text", "speed", "delay", "font", "userSelect", "color", "alignment", "tag", "loop", "stagger", "Tag", "content", "phrase", "iteration", "setIteration", "ye", "speedFormatted", "delayFormattedMs", "speedFormattedMs", "isCanvas", "RenderTarget", "isFirstRender", "setIsFirstRender", "ue", "timeout", "interval", "prev", "u", "p", "longest", "current", "l", "sentence", "sentenceIndex", "charIndex", "segments", "segment", "char", "AnimatePresence", "segmentIndex", "originalIndex", "baseDelay", "delayInitial", "delayAnimate", "delayExit", "itemTransition", "motion", "addPropertyControls", "ControlType"]
}