{"version":3,"file":"twice_textticker.BZushMeQ.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/hwQGVb7f2efO55ZXAodP/NIu9EXI5Dw6xw3s8VBDl/twice_textticker.js"],"sourcesContent":["// Text Ticker component with scroll-based direction control, customizable font, size, color and stroke\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView,useMotionValue,useAnimationFrame}from\"framer-motion\";/**\n * Text Ticker - Endless scrolling text ticker with customizable font, color and stroke\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 60\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function TextTicker(props){const{textSource=\"custom\",texts=[\"Sample Text\",\"Another Text\",\"More Text\"],cmsText=\"CMS Text\",directionMode=\"scroll\",direction=\"left\",speed=50,gap=40,font,textColor=\"#000000\",enableStroke=false,strokeWidth=2,strokeColor=\"#FFFFFF\",backgroundColor=\"transparent\",enableSvg=false,svgCode='',svgColor=\"#000000\",svgSize=1,svgStrokeWidth=1,uppercase=false,style}=props;const containerRef=useRef(null);const contentRef=useRef(null);const[scrollDirection,setScrollDirection]=useState(\"down\");const[lastScrollY,setLastScrollY]=useState(0);const[contentWidth,setContentWidth]=useState(0);const isStatic=useIsStaticRenderer();const isInView=useInView(containerRef,{margin:\"-50px\"});// Motion values for smooth animation\nconst x=useMotionValue(0);const[currentDirection,setCurrentDirection]=useState(direction);// Track scroll direction\nuseEffect(()=>{if(isStatic||typeof window===\"undefined\")return;const handleScroll=()=>{const currentScrollY=window.scrollY;if(currentScrollY>lastScrollY){startTransition(()=>setScrollDirection(\"down\"));}else if(currentScrollYsetScrollDirection(\"up\"));}setLastScrollY(currentScrollY);};window.addEventListener(\"scroll\",handleScroll,{passive:true});return()=>window.removeEventListener(\"scroll\",handleScroll);},[lastScrollY,isStatic]);// Determine final direction based on scroll and prop\nconst finalDirection=directionMode===\"fixed\"?direction:scrollDirection===\"down\"?direction:direction===\"left\"?\"right\":\"left\";// Measure actual content width\nuseEffect(()=>{if(!contentRef.current)return;const measureContent=()=>{const content=contentRef.current;if(!content)return;// Measure the actual scrollWidth of one set of texts\nconst singleSetWidth=content.scrollWidth/3// Since we have 3 sets\n;setContentWidth(singleSetWidth);};measureContent();const resizeObserver=new ResizeObserver(measureContent);if(contentRef.current){resizeObserver.observe(contentRef.current);}return()=>resizeObserver.disconnect();},[texts,gap,font]);// Determine which texts to use based on source\nconst activeTexts=textSource===\"cms\"?[cmsText]:texts;// Create duplicated texts for seamless loop\nconst duplicatedTexts=[...activeTexts,...activeTexts,...activeTexts];// Update direction smoothly\nuseEffect(()=>{setCurrentDirection(finalDirection);},[finalDirection]);// Animation frame loop for continuous movement\nuseAnimationFrame((time,delta)=>{if(isStatic||contentWidth===0)return;const pixelsPerMs=speed/1e3;const movement=delta*pixelsPerMs;if(currentDirection===\"left\"){x.set(x.get()-movement);// Reset position when we've moved one section\nif(x.get()<=-contentWidth){x.set(x.get()+contentWidth);}}else{x.set(x.get()+movement);// Reset position when we've moved one section\nif(x.get()>=0){x.set(x.get()-contentWidth);}}});// Initialize position based on direction\nuseEffect(()=>{if(currentDirection===\"right\"&&x.get()===0&&contentWidth>0){x.set(-contentWidth);}},[currentDirection,contentWidth]);// Create text elements with proper styling\nconst createTextElement=(text,index)=>/*#__PURE__*/_jsxs(\"span\",{style:{marginRight:`${gap}px`,whiteSpace:\"nowrap\",color:enableStroke?\"transparent\":textColor,WebkitTextStroke:enableStroke?`${strokeWidth}px ${strokeColor}`:\"none\",paintOrder:enableStroke?\"stroke fill\":\"normal\",flexShrink:0,display:\"flex\",alignItems:\"center\",gap:enableSvg?`${gap/2}px`:\"0px\",textTransform:uppercase?\"uppercase\":\"none\",...font},children:[text,enableSvg&&/*#__PURE__*/_jsx(\"span\",{style:{display:\"inline-flex\",alignItems:\"center\",height:\"1em\",color:svgColor,width:`${svgSize}em`,justifyContent:\"center\",flexShrink:0,transform:`translate(${props.svgPositionX||0}px, ${props.svgPositionY||0}px)`},dangerouslySetInnerHTML:{__html:svgCode.replace(/fill=\"[^\"]*\"/g,'fill=\"none\"').replace(/stroke=\"[^\"]*\"/g,`stroke=\"currentColor\"`).replace(/stroke-width=\"[^\"]*\"/g,`stroke-width=\"${svgStrokeWidth}\"`).replace(/width=\"[^\"]*\"/g,\"\").replace(/height=\"[^\"]*\"/g,\"\").replace(/