{"version":3,"file":"AnimatedCounter.Cp2TXCyR.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/1GxrokxaHhW4B4GLmJNE/XmczhHEtwiU3f0EzgFVv/AnimatedCounter.js"],"sourcesContent":["// Number counter component with customizable animation controls\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useInView}from\"framer-motion\";NumberCounter.displayName=\"Animated Counter\";/**\n * Animated Number Counter\n * @framerDisableUnlink\n */export default function NumberCounter(props){const{animationStyle,from,to,duration,delay,font,textColor,prefix,suffix,decimalPlaces,useThousandsSeparator,isPlaying,replay}=props;const[currentValue,setCurrentValue]=useState(from);const[isAnimating,setIsAnimating]=useState(false);const[hasStarted,setHasStarted]=useState(false);const animationRef=useRef();const timeoutRef=useRef();const startTimeRef=useRef();const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const isInView=useInView(containerRef,{once:false});const animate=()=>{if(isStatic)return;setIsAnimating(true);startTimeRef.current=performance.now();const step=timestamp=>{if(!startTimeRef.current)return;const elapsed=timestamp-startTimeRef.current;const progress=Math.min(elapsed/(duration*1e3),1);// Easing function for smooth animation\nconst easeProgress=progress<.5?2*progress*progress:1-Math.pow(-2*progress+2,2)/2;const value=from+(to-from)*easeProgress;startTransition(()=>{setCurrentValue(value);});if(progress<1){animationRef.current=requestAnimationFrame(step);}else{setIsAnimating(false);}};animationRef.current=requestAnimationFrame(step);};const startAnimation=()=>{if(isStatic)return;// Clear any existing animation\nif(animationRef.current){cancelAnimationFrame(animationRef.current);}if(timeoutRef.current){clearTimeout(timeoutRef.current);}// Reset to start value\nstartTransition(()=>{setCurrentValue(from);setHasStarted(true);});// Start animation after delay\nif(delay>0){timeoutRef.current=setTimeout(()=>{animate();},delay*1e3);}else{animate();}};const stopAnimation=()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}if(timeoutRef.current){clearTimeout(timeoutRef.current);}setIsAnimating(false);};// Handle viewport visibility and play/pause\nuseEffect(()=>{if(isStatic)return;// Only play if visible and play is enabled\nif(isInView&&isPlaying){// If replay mode is enabled, animate each time it's visible\nif(replay){startAnimation();}else if(!hasStarted){// Animate only once when not replaying\nstartAnimation();}}else{stopAnimation();}return()=>{stopAnimation();};},[isInView,isPlaying,from,to,duration,delay,replay]);// Handle manual replay toggle (play once when toggled on)\nuseEffect(()=>{if(replay){startTransition(()=>setHasStarted(false));if(isInView&&isPlaying){// Restart animation when replay is turned on\nstartAnimation();}}},[replay]);// Cleanup on unmount\nuseEffect(()=>{return()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}if(timeoutRef.current){clearTimeout(timeoutRef.current);}};},[]);const displayValue=isStatic?to:currentValue;// Format the number with decimal places and thousands separator\nconst formatNumber=num=>{// Round to specified decimal places\nconst rounded=Number(num.toFixed(decimalPlaces));if(useThousandsSeparator){return rounded.toLocaleString(\"en-US\",{minimumFractionDigits:decimalPlaces,maximumFractionDigits:decimalPlaces});}else{return rounded.toFixed(decimalPlaces);}};const formattedValue=formatNumber(displayValue);const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",...isFixedWidth?{...props?.style}:{minWidth:\"max-content\"},color:textColor,...font,display:\"flex\",alignItems:\"center\",justifyContent:\"flex-start\"},children:animationStyle===\"slotMachine\"?/*#__PURE__*/_jsxs(\"span\",{style:{display:\"flex\",alignItems:\"center\"},children:[prefix&&/*#__PURE__*/_jsx(\"span\",{style:{marginRight:4,whiteSpace:\"pre\"},children:prefix}),/*#__PURE__*/_jsx(SlotMachineNumber,{value:displayValue,decimals:decimalPlaces,font:font,color:textColor,useThousandsSeparator:useThousandsSeparator}),suffix&&/*#__PURE__*/_jsx(\"span\",{style:{marginLeft:4,whiteSpace:\"pre\"},children:suffix})]}):/*#__PURE__*/_jsxs(\"span\",{children:[prefix,formattedValue,suffix]})});}function SlotMachineNumber({value,decimals,font,color,useThousandsSeparator}){// Format the number first\nconst formatNumber=num=>{const rounded=Number(num.toFixed(decimals));if(useThousandsSeparator){return rounded.toLocaleString(\"en-US\",{minimumFractionDigits:decimals,maximumFractionDigits:decimals});}else{return rounded.toFixed(decimals);}};const formattedValue=formatNumber(value);const digitHeight=parseInt(font?.fontSize||40,10);// Split the formatted string into characters\nconst chars=formattedValue.split(\"\");return /*#__PURE__*/_jsx(\"span\",{style:{display:\"flex\",alignItems:\"center\"},children:chars.map((char,i)=>{// Check if character is a digit\nif(/\\d/.test(char)){return /*#__PURE__*/_jsx(DigitScroller,{digit:char,height:digitHeight,font:font,color:color},i);}else{// For non-digit characters (commas, periods, etc.)\nreturn /*#__PURE__*/_jsx(\"span\",{style:{...font,color,lineHeight:`${digitHeight}px`,height:digitHeight,display:\"flex\",alignItems:\"center\"},children:char},i);}})});}function DigitScroller({digit,height,font,color}){// 0-9 for slot machine effect\nconst digits=[\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\"];const idx=digits.indexOf(digit);return /*#__PURE__*/_jsx(\"span\",{style:{display:\"inline-block\",height,overflow:\"hidden\",verticalAlign:\"bottom\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"span\",{style:{display:\"inline-block\",transition:\"transform 0.4s cubic-bezier(.4,2,.6,1)\",transform:`translateY(-${idx*height}px)`},children:digits.map((d,i)=>/*#__PURE__*/_jsx(\"span\",{style:{display:\"block\",height,lineHeight:`${height}px`,...font,color,textAlign:\"center\"},children:d},i))})});}addPropertyControls(NumberCounter,{animationStyle:{type:ControlType.Enum,title:\"Animation\",options:[\"linear\",\"slotMachine\"],optionTitles:[\"Linear\",\"Slot\"],defaultValue:\"linear\",displaySegmentedControl:true},from:{type:ControlType.Number,title:\"From\",defaultValue:0,step:10},to:{type:ControlType.Number,title:\"To\",defaultValue:100,step:10},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:2,min:.1,max:10,step:.1,unit:\"s\"},delay:{type:ControlType.Number,title:\"Delay\",min:0,max:10,step:.1,unit:\"s\"},font:{type:ControlType.Font,title:\"Typography\",controls:\"extended\",defaultFontType:\"inter, sans-serif\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\",optional:true},prefix:{type:ControlType.String,title:\"Prefix\",defaultValue:\"\",placeholder:\"€, \\xa3, \\xa5\"},suffix:{type:ControlType.String,title:\"Suffix\",defaultValue:\"\",placeholder:\"$, %, +\"},decimalPlaces:{type:ControlType.Number,title:\"Decimal Places\",defaultValue:0,min:0,max:10,step:1,displayStepper:true},useThousandsSeparator:{type:ControlType.Boolean,title:\"Thousands Separator\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},isPlaying:{type:ControlType.Boolean,title:\"Counter\",defaultValue:true,enabledTitle:\"Play\",disabledTitle:\"Pause\"},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:false,enabledTitle:\"Replay\",disabledTitle:\"Stop\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"NumberCounter\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AnimatedCounter.map"],"mappings":"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"}