{"version":3,"file":"StaggeredCountdown.Cpx5TPPC.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/rUl62TtMVHRTrXVmi4K5/vJojkDO2yHACnHxHXQZJ/StaggeredCountdown.js"],"sourcesContent":["// Animated countdown component with staggered digit animations sliding up from bottom\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,startTransition,useRef}from\"react\";import{animate,useInView}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Animated Countdown Number with Staggered Animation\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function StaggeredCountdown(props){const{targetNumber=\"1234\",duration=2,font,color=\"#000000\",prefix=\"\",suffix=\"\",prefixColor=\"#000000\",suffixColor=\"#000000\",easing=\"easeInOut\",spacing=0,direction=\"up\"}=props;const isStatic=useIsStaticRenderer();const ref=useRef(null);const isInView=useInView(ref,{amount:.5});const hasAnimated=useRef(false);// Ensure targetNumber is treated as a string to avoid type errors\nconst targetString=(targetNumber??\"\").toString();const targetChars=targetString.split(\"\");const digitIndices=[];let digitCounter=0;for(const ch of targetChars){if(ch>=\"0\"&&ch<=\"9\"){digitIndices.push(digitCounter);digitCounter+=1;}else{digitIndices.push(-1);}}const digitCount=digitCounter;// State to hold current animated values for each digit\nconst[animatedDigits,setAnimatedDigits]=useState(Array(digitCount).fill(0));// Start animations when component mounts / enters view\nuseEffect(()=>{// In static or server environments, skip animation and jump to final value\nif(isStatic||typeof window===\"undefined\"){const finalDigits=Array(digitCount).fill(0);targetChars.forEach((ch,charIndex)=>{const digitIndex=digitIndices[charIndex];if(digitIndex===-1)return;const parsed=parseInt(ch,10);finalDigits[digitIndex]=isNaN(parsed)?0:parsed;});startTransition(()=>{setAnimatedDigits(finalDigits);});return;}if(!isInView||hasAnimated.current)return;hasAnimated.current=true;// Reset to 0 before animating\nstartTransition(()=>{setAnimatedDigits(Array(digitCount).fill(0));});const timeouts=[];// Animate each digit with stagger\ntargetChars.forEach((digitChar,charIndex)=>{const digitIndex=digitIndices[charIndex];if(digitIndex===-1)return;const targetDigit=parseInt(digitChar,10);const staggerDelay=digitIndex*.1// 100ms stagger\n;const digitDuration=duration*.8// Slightly shorter than total duration\n;const timeoutId=window.setTimeout(()=>{animate(0,targetDigit,{duration:digitDuration,ease:easing,onUpdate:value=>{startTransition(()=>{setAnimatedDigits(prev=>{const newDigits=[...prev];newDigits[digitIndex]=Math.max(0,Math.min(9,value));return newDigits;});});}});},staggerDelay*1e3);timeouts.push(timeoutId);});return()=>{timeouts.forEach(id=>window.clearTimeout(id));};},[isStatic,isInView,targetChars.join(\"\"),duration,easing]);const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{ref:ref,style:{...props.style,position:\"relative\",display:\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",overflow:\"visible\",...isFixedWidth?{}:{width:\"max-content\"},...font,color},children:[prefix&&/*#__PURE__*/_jsx(\"span\",{style:{...font,color:prefixColor},children:prefix}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",overflow:\"hidden\",height:\"1.2em\",display:\"inline-flex\",alignItems:\"center\",minWidth:\"max-content\",gap:`${spacing}px`,...font},children:targetChars.map((ch,charIndex)=>{const digitIndex=digitIndices[charIndex];if(digitIndex===-1){return /*#__PURE__*/_jsx(\"span\",{style:{...font,color,display:\"inline-block\",lineHeight:1,textAlign:\"center\",minWidth:\"0.3em\"},children:ch},charIndex);}const animatedValue=animatedDigits[digitIndex]??0;const currentDigit=Math.floor(animatedValue);const progress=animatedValue-currentDigit;const nextDigit=currentDigit+1;return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",overflow:\"hidden\",height:\"1.2em\",display:\"inline-flex\",alignItems:\"center\",minWidth:\"0.6em\",justifyContent:\"center\",...font},children:[/*#__PURE__*/_jsx(\"div\",{style:{...font,color,fontVariantNumeric:\"tabular-nums\",display:\"inline-block\",lineHeight:1,textAlign:\"center\",width:\"100%\",position:\"absolute\",transform:direction===\"up\"?`translateY(${progress*-100}%)`:`translateY(${progress*100}%)`},children:currentDigit}),progress>0&&nextDigit<=9&&/*#__PURE__*/_jsx(\"div\",{style:{...font,color,fontVariantNumeric:\"tabular-nums\",display:\"inline-block\",lineHeight:1,textAlign:\"center\",width:\"100%\",position:\"absolute\",transform:direction===\"up\"?`translateY(${(1-progress)*100}%)`:`translateY(${(1-progress)*-100}%)`},children:nextDigit})]},charIndex);})}),suffix&&/*#__PURE__*/_jsx(\"span\",{style:{...font,color:suffixColor},children:suffix})]});}addPropertyControls(StaggeredCountdown,{targetNumber:{type:ControlType.String,title:\"Target Number\",defaultValue:\"1234\",placeholder:\"e.g. 99.9\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:2,min:.5,max:10,step:.1,unit:\"s\"},prefix:{type:ControlType.String,title:\"Prefix\",defaultValue:\"\",placeholder:\"$, #, etc.\"},prefixColor:{type:ControlType.Color,title:\"Prefix Color\",defaultValue:\"#000000\"},suffix:{type:ControlType.String,title:\"Suffix\",defaultValue:\"\",placeholder:\"%, +, etc.\"},suffixColor:{type:ControlType.Color,title:\"Suffix Color\",defaultValue:\"#000000\"},color:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},easing:{type:ControlType.Enum,title:\"Easing\",defaultValue:\"easeInOut\",options:[\"linear\",\"easeIn\",\"easeOut\",\"easeInOut\",\"circIn\",\"circOut\",\"circInOut\",\"backIn\",\"backOut\",\"backInOut\"],optionTitles:[\"Linear\",\"Ease In\",\"Ease Out\",\"Ease In Out\",\"Circ In\",\"Circ Out\",\"Circ In Out\",\"Back In\",\"Back Out\",\"Back In Out\"]},spacing:{type:ControlType.Number,title:\"Spacing\",defaultValue:0,min:0,max:20,step:.1,unit:\"px\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"48px\",variant:\"Bold\",letterSpacing:\"-0.02em\",lineHeight:\"1em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},direction:{type:ControlType.Enum,title:\"Direction\",defaultValue:\"up\",options:[\"up\",\"down\"],optionTitles:[\"Up\",\"Down\"],displaySegmentedControl:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StaggeredCountdown\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StaggeredCountdown.map"],"mappings":"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"}