{"version":3,"file":"FlipTextCycle_prod.xpIQ43M5.mjs","names":["React.useContext","React.useMemo","React.Fragment","React.useRef","React.useId","SVG","RichText","UtilsComponentMessage","useState","useRef","useId","useMemo","_Fragment"],"sources":["https:/framerusercontent.com/modules/fMDE7Cqb2uOvQFAHEP2m/cRfVFRl0izzBulKFjOAe/W7oLCU4_B.js","https:/framer.com/m/Utils-Component-Message-ZVoG.js@cRfVFRl0izzBulKFjOAe","https:/framerusercontent.com/modules/aej5zpwxBpkMdzOteBwy/DWeAZ5wauvGM5oFwVdgS/Utils.js","https:/framer.com/m/Utils-FINc.js","https:/framerusercontent.com/modules/ygU5sfdzLwMvnsyFzLWX/vmHuNxnzayAsrI9o939r/FlipTextCycle_prod.js"],"sourcesContent":["// Generated by Framer (0b8b5e5)\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addFonts,addPropertyControls,ControlType,cx,RichText,SVG,useComponentViewport,useLocaleInfo,useVariantState,withCSS}from\"framer\";import{LayoutGroup,motion,MotionConfigContext}from\"framer-motion\";import*as React from\"react\";const serializationHash=\"framer-q8Ttd\";const variantClassNames={XvqTw0Be9:\"framer-v-jjcw9a\"};function addPropertyOverrides(overrides,...variants){const nextOverrides={};variants===null||variants===void 0?void 0:variants.forEach(variant=>variant&&Object.assign(nextOverrides,overrides[variant]));return nextOverrides;}const transition1={bounce:.2,delay:0,duration:.4,type:\"spring\"};const Transition=({value,children})=>{const config=React.useContext(MotionConfigContext);const transition=value!==null&&value!==void 0?value:config.transition;const contextValue=React.useMemo(()=>({...config,transition}),[JSON.stringify(transition)]);return /*#__PURE__*/_jsx(MotionConfigContext.Provider,{value:contextValue,children:children});};const Variants=motion(React.Fragment);const getProps=({height,id,subtitle,title,width,...props})=>{var _ref,_ref1;return{...props,WuF2iG84P:(_ref=subtitle!==null&&subtitle!==void 0?subtitle:props.WuF2iG84P)!==null&&_ref!==void 0?_ref:\"Set up the component by adding background and bouncer elements to the component properties.\",yeAnKbEUZ:(_ref1=title!==null&&title!==void 0?title:props.yeAnKbEUZ)!==null&&_ref1!==void 0?_ref1:\"Screen Saver\"};};const createLayoutDependency=(props,variants)=>{if(props.layoutDependency)return variants.join(\"-\")+props.layoutDependency;return variants.join(\"-\");};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const{activeLocale,setLocale}=useLocaleInfo();const{style,className,layoutId,variant,yeAnKbEUZ,WuF2iG84P,...restProps}=getProps(props);const{baseVariant,classNames,clearLoadingGesture,gestureHandlers,gestureVariant,isLoading,setGestureState,setVariant,variants}=useVariantState({defaultVariant:\"XvqTw0Be9\",variant,variantClassNames});const layoutDependency=createLayoutDependency(props,variants);const ref1=React.useRef(null);const defaultLayoutId=React.useId();const sharedStyleClassNames=[];const componentViewport=useComponentViewport();return /*#__PURE__*/_jsx(LayoutGroup,{id:layoutId!==null&&layoutId!==void 0?layoutId:defaultLayoutId,children:/*#__PURE__*/_jsx(Variants,{animate:variants,initial:false,children:/*#__PURE__*/_jsx(Transition,{value:transition1,children:/*#__PURE__*/_jsx(motion.div,{...restProps,...gestureHandlers,className:cx(serializationHash,...sharedStyleClassNames,\"framer-jjcw9a\",className,classNames),\"data-framer-name\":\"Default\",layoutDependency:layoutDependency,layoutId:\"XvqTw0Be9\",ref:ref!==null&&ref!==void 0?ref:ref1,style:{backgroundColor:\"rgba(136, 85, 255, 0.1)\",...style},children:/*#__PURE__*/_jsxs(motion.div,{className:\"framer-uh2i08\",layoutDependency:layoutDependency,layoutId:\"aM7oiNoFL\",children:[/*#__PURE__*/_jsx(SVG,{className:\"framer-flw0dh\",\"data-framer-name\":\"Logo\",layout:\"position\",layoutDependency:layoutDependency,layoutId:\"GthLmGmBt\",opacity:1,svg:'',svgContentId:11036020200,withExternalLayout:true}),/*#__PURE__*/_jsxs(motion.div,{className:\"framer-k3ullq\",layoutDependency:layoutDependency,layoutId:\"E3DQBYSAf\",children:[/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.p,{style:{\"--font-selector\":\"SW50ZXItQm9sZA==\",\"--framer-font-family\":'\"Inter\", \"Inter Placeholder\", sans-serif',\"--framer-font-size\":\"11px\",\"--framer-font-weight\":\"700\",\"--framer-letter-spacing\":\"-0.02em\",\"--framer-line-height\":\"1em\",\"--framer-text-alignment\":\"center\",\"--framer-text-color\":\"var(--extracted-r6o4lv, rgb(153, 102, 255))\"},children:\"Screen Saver\"})}),className:\"framer-q0gs4u\",\"data-framer-name\":\"Title\",fonts:[\"Inter-Bold\"],layoutDependency:layoutDependency,layoutId:\"UqJwZqJjg\",style:{\"--extracted-r6o4lv\":\"rgb(153, 102, 255)\",\"--framer-link-text-color\":\"rgb(0, 153, 255)\",\"--framer-link-text-decoration\":\"underline\"},text:yeAnKbEUZ,verticalAlignment:\"top\",withExternalLayout:true}),/*#__PURE__*/_jsx(RichText,{__fromCanvasComponent:true,children:/*#__PURE__*/_jsx(React.Fragment,{children:/*#__PURE__*/_jsx(motion.p,{style:{\"--framer-font-size\":\"11px\",\"--framer-letter-spacing\":\"-0.03em\",\"--framer-line-height\":\"1.4em\",\"--framer-text-alignment\":\"center\",\"--framer-text-color\":\"var(--extracted-r6o4lv, rgba(153, 102, 255, 0.7))\"},children:\"Set up the component by adding background and bouncer elements to the component properties.\"})}),className:\"framer-g5dqhc\",\"data-framer-name\":\"Subtitle\",fonts:[\"Inter\"],layoutDependency:layoutDependency,layoutId:\"RJ7UF99m8\",style:{\"--extracted-r6o4lv\":\"rgba(153, 102, 255, 0.7)\",\"--framer-link-text-color\":\"rgb(0, 153, 255)\",\"--framer-link-text-decoration\":\"underline\"},text:WuF2iG84P,verticalAlignment:\"top\",withExternalLayout:true})]})]})})})})});});const css=[\"@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }\",\".framer-q8Ttd.framer-qanqo2, .framer-q8Ttd .framer-qanqo2 { display: block; }\",\".framer-q8Ttd.framer-jjcw9a { align-content: center; align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; height: 200px; justify-content: center; overflow: hidden; padding: 0px; position: relative; width: 400px; }\",\".framer-q8Ttd .framer-uh2i08 { align-content: center; align-items: center; display: flex; flex: 1 0 0px; flex-direction: column; flex-wrap: nowrap; gap: 16px; height: min-content; justify-content: center; overflow: hidden; padding: 0px 20px 0px 20px; position: relative; width: 1px; }\",\".framer-q8Ttd .framer-flw0dh { flex: none; height: 28px; position: relative; width: 28px; }\",\".framer-q8Ttd .framer-k3ullq { align-content: center; align-items: center; display: flex; flex: none; flex-direction: column; flex-wrap: nowrap; gap: 12px; height: min-content; justify-content: center; max-width: 200px; overflow: hidden; padding: 0px; position: relative; width: 100%; }\",\".framer-q8Ttd .framer-q0gs4u, .framer-q8Ttd .framer-g5dqhc { flex: none; height: auto; position: relative; white-space: pre-wrap; width: 100%; word-break: break-word; word-wrap: break-word; }\",\"@supports (background: -webkit-named-image(i)) and (not (font-palette:dark)) { .framer-q8Ttd.framer-jjcw9a, .framer-q8Ttd .framer-uh2i08, .framer-q8Ttd .framer-k3ullq { gap: 0px; } .framer-q8Ttd.framer-jjcw9a > * { margin: 0px; margin-left: calc(10px / 2); margin-right: calc(10px / 2); } .framer-q8Ttd.framer-jjcw9a > :first-child { margin-left: 0px; } .framer-q8Ttd.framer-jjcw9a > :last-child { margin-right: 0px; } .framer-q8Ttd .framer-uh2i08 > * { margin: 0px; margin-bottom: calc(16px / 2); margin-top: calc(16px / 2); } .framer-q8Ttd .framer-uh2i08 > :first-child, .framer-q8Ttd .framer-k3ullq > :first-child { margin-top: 0px; } .framer-q8Ttd .framer-uh2i08 > :last-child, .framer-q8Ttd .framer-k3ullq > :last-child { margin-bottom: 0px; } .framer-q8Ttd .framer-k3ullq > * { margin: 0px; margin-bottom: calc(12px / 2); margin-top: calc(12px / 2); } }\"];/**\n * This is a generated Framer component.\n * @framerIntrinsicHeight 200\n * @framerIntrinsicWidth 400\n * @framerCanvasComponentVariantDetails {\"propertyName\":\"variant\",\"data\":{\"default\":{\"layout\":[\"fixed\",\"fixed\"]}}}\n * @framerVariables {\"yeAnKbEUZ\":\"title\",\"WuF2iG84P\":\"subtitle\"}\n * @framerImmutableVariables true\n * @framerDisplayContentsDiv false\n * @framerComponentViewportWidth true\n */const FramerW7oLCU4_B=withCSS(Component,css,\"framer-q8Ttd\");export default FramerW7oLCU4_B;FramerW7oLCU4_B.displayName=\"Utils/Component Message\";FramerW7oLCU4_B.defaultProps={height:200,width:400};addPropertyControls(FramerW7oLCU4_B,{yeAnKbEUZ:{defaultValue:\"Screen Saver\",displayTextArea:false,title:\"Title\",type:ControlType.String},WuF2iG84P:{defaultValue:\"Set up the component by adding background and bouncer elements to the component properties.\",displayTextArea:false,title:\"Subtitle\",type:ControlType.String}});addFonts(FramerW7oLCU4_B,[{explicitInter:true,fonts:[{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F\",url:\"https://framerusercontent.com/assets/DpPBYI0sL4fYLgAkX8KXOPVt7c.woff2\",weight:\"700\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116\",url:\"https://framerusercontent.com/assets/4RAEQdEOrcnDkhHiiCbJOw92Lk.woff2\",weight:\"700\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+1F00-1FFF\",url:\"https://framerusercontent.com/assets/1K3W8DizY3v4emK8Mb08YHxTbs.woff2\",weight:\"700\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0370-03FF\",url:\"https://framerusercontent.com/assets/tUSCtfYVM1I1IchuyCwz9gDdQ.woff2\",weight:\"700\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF\",url:\"https://framerusercontent.com/assets/VgYFWiwsAC5OYxAycRXXvhze58.woff2\",weight:\"700\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD\",url:\"https://framerusercontent.com/assets/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2\",weight:\"700\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB\",url:\"https://framerusercontent.com/assets/GIryZETIX4IFypco5pYZONKhJIo.woff2\",weight:\"700\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F\",url:\"https://framerusercontent.com/assets/5vvr9Vy74if2I6bQbJvbw7SY1pQ.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116\",url:\"https://framerusercontent.com/assets/EOr0mi4hNtlgWNn9if640EZzXCo.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+1F00-1FFF\",url:\"https://framerusercontent.com/assets/Y9k9QrlZAqio88Klkmbd8VoMQc.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0370-03FF\",url:\"https://framerusercontent.com/assets/OYrD2tBIBPvoJXiIHnLoOXnY9M.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF\",url:\"https://framerusercontent.com/assets/JeYwfuaPfZHQhEG8U5gtPDZ7WQ.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD\",url:\"https://framerusercontent.com/assets/vQyevYAyHtARFwPqUzQGpnDs.woff2\",weight:\"400\"},{family:\"Inter\",source:\"framer\",style:\"normal\",unicodeRange:\"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB\",url:\"https://framerusercontent.com/assets/b6Y37FthZeALduNqHicBT6FutY.woff2\",weight:\"400\"}]}],{supportsExplicitInterCodegen:true});\nexport const __FramerMetadata__ = {\"exports\":{\"Props\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"FramerW7oLCU4_B\",\"slots\":[],\"annotations\":{\"framerImmutableVariables\":\"true\",\"framerComponentViewportWidth\":\"true\",\"framerCanvasComponentVariantDetails\":\"{\\\"propertyName\\\":\\\"variant\\\",\\\"data\\\":{\\\"default\\\":{\\\"layout\\\":[\\\"fixed\\\",\\\"fixed\\\"]}}}\",\"framerVariables\":\"{\\\"yeAnKbEUZ\\\":\\\"title\\\",\\\"WuF2iG84P\\\":\\\"subtitle\\\"}\",\"framerIntrinsicWidth\":\"400\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"200\",\"framerDisplayContentsDiv\":\"false\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./W7oLCU4_B.map","/*\n * Utils/Component Message\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/fMDE7Cqb2uOvQFAHEP2m/cRfVFRl0izzBulKFjOAe/W7oLCU4_B.js\"\nexport { default } from \"https://framerusercontent.com/modules/fMDE7Cqb2uOvQFAHEP2m/cRfVFRl0izzBulKFjOAe/W7oLCU4_B.js\"\n","import{jsx as _jsx}from\"react/jsx-runtime\";import{cloneElement}from\"react\";import UtilsComponentMessage from\"https://framer.com/m/Utils-Component-Message-ZVoG.js@cRfVFRl0izzBulKFjOAe\";export const ComponentMessage=({title,subtitle,style})=>{return /*#__PURE__*/_jsx(UtilsComponentMessage,{yeAnKbEUZ:title,WuF2iG84P:subtitle,style:{width:\"100%\",height:\"100%\",...style}});};/* \n This function is also used many times to make sure components work even if we set a color style like \"Accent\" on their color properties. We can make this into a utility function.\n*/export const extractRGBColorFromString=str=>{const rgbRegex=/(rgba|rgb)\\(.*?\\)/g;const match=str.match(rgbRegex);return match?match[0]:str;};/*\n This function makes a connected layer use the sizing of the component it is inside,\n preventing it from being larger or smaller than the component's size.\n Use this on layers connected with ControlType.ComponentInstance.\n*/export function styleLayer(layer,style={}){layer=Array.isArray(layer)?layer[0]:layer;let newLayer=layer;const{width,height,...otherStyle}=style;if(layer&&layer.props&&style&&(width||height)){if(typeof layer.type===\"function\"&&typeof layer.props.children===\"object\"){newLayer=/*#__PURE__*/cloneElement(layer,{children:{...layer.props.children,props:{...layer.props.children.props,style:{...layer.props.children.props.style,...width&&{width},...height&&{height},...otherStyle}}}});}else{newLayer=/*#__PURE__*/cloneElement(layer,{style:{...layer.props.style,...width&&{width},...height&&{height},...otherStyle}});}}return newLayer;}\nexport const __FramerMetadata__ = {\"exports\":{\"ComponentMessage\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"extractRGBColorFromString\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"styleLayer\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Utils.map","/*\n * Utils\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/aej5zpwxBpkMdzOteBwy/DWeAZ5wauvGM5oFwVdgS/Utils.js\"\n","import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useId,useMemo}from\"react\";import{ControlType,addPropertyControls,RenderTarget}from\"framer\";import{ComponentMessage}from\"https://framer.com/m/Utils-FINc.js\";// ------------------------------------------------------------ //\n// PROPERTY CONTROLS\n// ------------------------------------------------------------ //\naddPropertyControls(FlipTextCycle,{preview:{type:ControlType.Boolean,title:\"Preview\",enabledTitle:\"On\",disabledTitle:\"Off\",defaultValue:false},texts:{title:\"Texts\",type:ControlType.Array,control:{type:ControlType.Object,controls:{text:{type:ControlType.String},color:{type:ControlType.Color,title:\"Text Color\"}}}},font:{type:ControlType.Font,defaultFontType:\"sans-serif\",controls:\"extended\",title:\"Font\",//@ts-check\nfontWeight:\"500\",defaultValue:{fontFamily:\"Geist\",fontWeight:\"500\",letterSpacing:\"-0.02em\",lineHeight:\"1.5em\",textAlign:\"left\",fontSize:40}},cycleDelay:{title:\"Delay\",type:ControlType.Number,min:.5,max:10,step:.1,defaultValue:1.5,unit:\"s\"},staggerDelay:{title:\"Stagger\",type:ControlType.Number,min:0,max:1,step:.01,defaultValue:.015,unit:\"s\"},flipDuration:{title:\"Duration\",type:ControlType.Number,min:.1,max:2,step:.1,defaultValue:.2,unit:\"s\",description:\"More components at [Framer University](https://frameruni.link/cc).\"}});// ------------------------------------------------------------ //\n// DEFAULT PROPS\n// ------------------------------------------------------------ //\nFlipTextCycle.defaultProps={cycleDelay:2,flipDuration:.6,staggerDelay:.05,preview:true,font:{fontFamily:\"Geist\",fontWeight:\"medium\",letterSpacing:\"-0.02em\",lineHeight:\"1.5em\",textAlign:\"left\",fontSize:\"40px\"},texts:[{text:\"Framer University\",color:\"#45ED8E\"},{text:\"Learn Framer\",color:\"#8754EB\"}]};// ------------------------------------------------------------ //\n// MAIN COMPONENT\n// ------------------------------------------------------------ //\n/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerDisableUnlink\n */export default function FlipTextCycle(props){const areTextsEmpty=props.texts.length===0||!props.texts;const[currentTextIndex,setCurrentTextIndex]=useState(0);const[isAnimating,setIsAnimating]=useState(false);const[cycleId,setCycleId]=useState(0);const[isInViewport,setIsInViewport]=useState(true);const isCanvas=RenderTarget.current()===RenderTarget.canvas;const pauseInCanvas=isCanvas&&!props.preview;const containerRef=useRef(null);// Unique id to avoid clashes between multiple component instances\nconst reactId=useId();const safeId=useMemo(()=>reactId.replace(/[^a-zA-Z0-9_-]/g,\"-\"),[reactId]);const currentText=props.texts[currentTextIndex];// Stable refs to avoid re-scheduling loops\nconst indexRef=useRef(0);const textsRef=useRef(props.texts);const cycleDelayRef=useRef(props.cycleDelay);const flipDurationRef=useRef(props.flipDuration);const staggerDelayRef=useRef(props.staggerDelay);const animationTimeoutRef=useRef(null);const gapTimeoutRef=useRef(null);// Keep refs in sync with latest props\nuseEffect(()=>{textsRef.current=props.texts;if(indexRef.current>=props.texts.length){indexRef.current=0;setCurrentTextIndex(0);}},[props.texts]);useEffect(()=>{cycleDelayRef.current=props.cycleDelay;},[props.cycleDelay]);useEffect(()=>{flipDurationRef.current=props.flipDuration;},[props.flipDuration]);useEffect(()=>{staggerDelayRef.current=props.staggerDelay;},[props.staggerDelay]);// Viewport detection for performance optimization\nuseEffect(()=>{if(!containerRef.current)return;const observer=new IntersectionObserver(([entry])=>{setIsInViewport(entry.isIntersecting);},{threshold:.1});observer.observe(containerRef.current);return()=>{observer.disconnect();};},[]);// Single scheduler loop: animate -> wait -> next\nuseEffect(()=>{if(areTextsEmpty)return;const clearTimers=()=>{if(animationTimeoutRef.current){clearTimeout(animationTimeoutRef.current);animationTimeoutRef.current=null;}if(gapTimeoutRef.current){clearTimeout(gapTimeoutRef.current);gapTimeoutRef.current=null;}};if(pauseInCanvas||!isInViewport){clearTimers();return()=>clearTimers();}const scheduleNext=()=>{// Start animating current word\nsetIsAnimating(true);const current=textsRef.current[indexRef.current];const letterCount=current?.text?.length??0;const staggerDelay=staggerDelayRef.current// seconds\n;const totalDurationSec=Math.max(0,(letterCount-1)*staggerDelay+flipDurationRef.current);// When the last letter finishes, keep the word visible during the gap\nanimationTimeoutRef.current=window.setTimeout(()=>{// Wait for the configured gap while keeping letters visible\ngapTimeoutRef.current=window.setTimeout(()=>{// Prepare next cycle: briefly hide, swap text, then animate in\nsetIsAnimating(false);// Allow DOM to apply the hidden state before swapping text\nwindow.setTimeout(()=>{const next=(indexRef.current+1)%textsRef.current.length;indexRef.current=next;setCurrentTextIndex(next);// Force new letter elements so transitions retrigger even for repeated words\nsetCycleId(id=>id+1);// Ensure the DOM commits the new letters at rest before animating\nwindow.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>{scheduleNext();});});},0);},cycleDelayRef.current*1e3);},totalDurationSec*1e3);};// Kick off first cycle on mount with two RAFs to ensure initial state paints\nwindow.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>{scheduleNext();});});return()=>{clearTimers();};},[areTextsEmpty,pauseInCanvas,isInViewport]);const baseStyle=`\n @layer demo {\n .flip-text-container-${safeId} {\n perspective: 1000px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transform-style: preserve-3d;\n }\n .flip-text-${safeId} {\n font-family: ${props.font.fontFamily};\n font-weight: ${props.font.fontWeight};\n font-size: ${props.font.fontSize};\n letter-spacing: ${props.font.letterSpacing};\n line-height: ${props.font.lineHeight};\n text-align: ${props.font.textAlign};\n margin: 0;\n display: inline-block;\n white-space: break-spaces;\n transform-style: preserve-3d;\n }\n .flip-letter-${safeId} {\n display: inline-block;\n color: ${currentText?.color||\"#000\"};\n transform-style: preserve-3d;\n transition: transform ${props.flipDuration}s ease-in, opacity ${props.flipDuration}s ease-in;\n transform: rotateY(90deg);\n opacity: 0;\n }\n .flip-letter-${safeId}.animate {\n transform: rotateY(0deg);\n opacity: 1;\n }\n .flip-letter-${safeId}.no-anim {\n transition: none;\n transform: rotateY(0deg);\n opacity: 1;\n }\n }\n`;const style=useMemo(()=>{return baseStyle;},[safeId,props.font.fontFamily,props.font.fontWeight,props.font.fontSize,props.font.letterSpacing,props.font.lineHeight,props.font.textAlign,currentText?.color,isAnimating,props.flipDuration]);// Split text into tokens (words and spaces) so wrapping happens between words only\nconst tokens=useMemo(()=>{return currentText?.text?currentText.text.split(/(\\s+)/):[];},[currentText?.text,currentTextIndex,cycleId]);// Memoize the rendered content to avoid unnecessary re-renders\nconst renderedContent=useMemo(()=>{let letterCounter=0;return tokens.map((token,tIndex)=>{const isSpace=token.trim()===\"\";if(isSpace){// render a single normal space so the next line never starts with an extra gap\nreturn /*#__PURE__*/_jsx(\"span\",{children:\" \"},`${currentTextIndex}-${cycleId}-space-${tIndex}`);}return /*#__PURE__*/_jsx(\"span\",{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},children:token.split(\"\").map((letter,lIndex)=>{const globalIndex=letterCounter++;return /*#__PURE__*/_jsx(\"span\",{className:`flip-letter-${safeId} ${pauseInCanvas?\"no-anim\":isAnimating?\"animate\":\"\"}`,style:{transitionDelay:pauseInCanvas?\"0s\":`${globalIndex*props.staggerDelay}s`},children:letter},`${currentTextIndex}-${cycleId}-${tIndex}-${lIndex}`);})},`${currentTextIndex}-${cycleId}-word-${tIndex}`);});},[tokens,currentTextIndex,cycleId,pauseInCanvas,isAnimating,safeId,props.staggerDelay]);if(areTextsEmpty){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsx(ComponentMessage,{title:\"Flip Text Cycle\",subtitle:\"Set up the component by adding texts to the component properties.\"})});}return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:style}),/*#__PURE__*/_jsx(\"div\",{ref:containerRef,className:`flip-text-container-${safeId}`,style:{width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsx(\"span\",{className:`flip-text-${safeId}`,children:renderedContent})})]});}FlipTextCycle.displayName=\"Flip Text Cycle\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FlipTextCycle\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FlipTextCycle_prod.map"],"mappings":"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"}