{"version":3,"file":"NumberCounter.Datjrsv9.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/r1ty6XVKUg7LQ02ZyTZd/hzgthCT9hIsOcwTIhq8m/NumberCounter.js"],"sourcesContent":["// Vertical Number Counter with slot-machine effect, configurable start/end, duration, easing, and trigger\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useInView,useIsStaticRenderer}from\"framer\";/**\n * Vertical Number Counter\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function NumberCounter(props){const{startNumber,endNumber,duration,trigger,font,color,style}=props;const[started,setStarted]=useState(false);const[current,setCurrent]=useState(startNumber);const[hasPlayed,setHasPlayed]=useState(false);const containerRef=useRef(null);const isStatic=useIsStaticRenderer();const inView=useInView(containerRef,{once:true,margin:\"-10% 0px\"});// Determine trigger\nuseEffect(()=>{if(isStatic||hasPlayed)return;if(trigger===\"layer\"&&inView)startTransition(()=>setStarted(true));},[trigger,inView,isStatic,hasPlayed]);// Animate numbers\nuseEffect(()=>{if(!started||hasPlayed)return;if(startNumber===endNumber){setCurrent(endNumber);setHasPlayed(true);return;}let raf;const totalFrames=Math.round(duration*60||60);let frame=0;function animate(){frame++;const progress=Math.min(frame/totalFrames,1);const eased=progress// Linear for now, CSS handles visual easing\n;const value=Math.round(startNumber+(endNumber-startNumber)*eased);setCurrent(value);if(progress<1){raf=requestAnimationFrame(animate);}else{setCurrent(endNumber);setHasPlayed(true);}}raf=requestAnimationFrame(animate);return()=>raf&&cancelAnimationFrame(raf);},[started,startNumber,endNumber,duration,hasPlayed]);// Generate digit arrays\n// Handle decimals for display\nconst decimals=Math.max(0,Math.min(6,Number(props.decimals)||0));// For slot effect, only support decimals=0\nconst startStr=String(Math.max(0,Math.floor(startNumber)));const endStr=String(Math.max(0,Math.floor(endNumber)));const maxLen=Math.max(startStr.length,endStr.length);const paddedStart=startStr.padStart(maxLen,\"0\");const paddedEnd=endStr.padStart(maxLen,\"0\");const currentStr=String(Math.max(0,Math.floor(current))).padStart(maxLen,\"0\");// Format number with prefix, suffix, and decimals\nfunction formatNumber(num){let str=decimals>0?Number(num).toFixed(decimals):String(Math.round(num));return`${props.prefix||\"\"}${str}${props.suffix||\"\"}`;}// For each digit, animate vertical slide\nfunction renderDigits(){// If formatting is enabled, render as a single string (no slot effect)\nif(props.prefix||props.suffix||decimals>0){return /*#__PURE__*/_jsx(\"span\",{style:{fontWeight:font?.variant===\"Bold\"?700:600,...font,color,textAlign:\"center\",fontVariantNumeric:\"tabular-nums\",fontFeatureSettings:'\"tnum\"',userSelect:\"none\",width:\"100%\",display:\"block\"},children:formatNumber(current)});}return paddedEnd.split(\"\").map((endDigit,i)=>{const startDigit=paddedStart[i];const currDigit=currentStr[i];// Build digit stack 0-9\nconst digits=Array.from({length:10},(_,d)=>d);// If start > end, count down\nconst isUp=Number(endDigit)>=Number(startDigit);const digitRange=isUp?digits.slice(Number(startDigit),Number(endDigit)+1):digits.slice(Number(endDigit),Number(startDigit)+1).reverse();// For slot effect, always show 0-9, but scroll to currDigit\nconst translateY=-Number(currDigit)*1.1// 1.1em per digit for spacing\n;return /*#__PURE__*/_jsx(\"div\",{style:{width:\"1ch\",height:\"1.1em\",overflow:\"hidden\",display:\"inline-block\",verticalAlign:\"middle\"},children:/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",transition:started&&!isStatic?`transform ${duration}s cubic-bezier(0.4,0,0.2,1)`:\"none\",transform:`translateY(${translateY}em)`},children:digits.map(d=>/*#__PURE__*/_jsx(\"span\",{style:{height:\"1.1em\",lineHeight:\"1.1em\",fontWeight:font?.variant===\"Bold\"?700:600,...font,color,display:\"block\",textAlign:\"center\",fontVariantNumeric:\"tabular-nums\",fontFeatureSettings:'\"tnum\"',userSelect:\"none\"},children:d},d))})},i);});}// Responsive container\nreturn /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",fontWeight:font?.variant===\"Bold\"?700:600,fontSize:font?.fontSize||48,letterSpacing:font?.letterSpacing||\"-0.03em\",lineHeight:font?.lineHeight||\"1.1em\",color,background:\"transparent\",fontVariantNumeric:\"tabular-nums\",fontFeatureSettings:'\"tnum\"',overflow:\"hidden\",userSelect:\"none\"},children:renderDigits()});}addPropertyControls(NumberCounter,{startNumber:{type:ControlType.Number,title:\"Start\",defaultValue:0,min:0,max:999999,displayStepper:true},endNumber:{type:ControlType.Number,title:\"End\",defaultValue:250,min:0,max:999999,displayStepper:true},prefix:{type:ControlType.String,title:\"Prefix\",defaultValue:\"\",placeholder:\"e.g. $\"},suffix:{type:ControlType.String,title:\"Suffix\",defaultValue:\"\",placeholder:\"e.g. %\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:1.2,min:.2,max:5,step:.1,unit:\"s\"},trigger:{type:ControlType.Enum,title:\"Trigger\",options:[\"layer\"],optionTitles:[\"Layer in view\"],defaultValue:\"layer\",displaySegmentedControl:true},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#000000\"},decimals:{type:ControlType.Number,title:\"Decimals\",defaultValue:0,min:0,max:6,step:1,displayStepper:true},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:48,variant:\"Bold\",letterSpacing:\"-0.03em\",lineHeight:\"1.1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"NumberCounter\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./NumberCounter.map"],"mappings":"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"}