{"version":3,"file":"Counter_Gradient.B6wkHD0d.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/JcSVmvKBdfrli9mbtOff/GPaiDIFMoAx21soLz9OY/Counter_Gradient.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useRef}from\"react\";import{motion,useScroll,useTransform,useSpring,useInView}from\"framer-motion\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";export default function ScrollProgressNumber({// Number properties\ntargetNumber=100,startNumber=0,decimals=0,suffix=\"%\",prefix=\"\",// Gradient properties\ngradientColorStart=\"#3B82F6\",gradientColorEnd=\"#EC4899\",gradientAngle=45,// Animation properties\nduration=2,delay=.2,alwaysAnimate=false,// Framer Font\nfont={fontSize:72,fontWeight:800,fontFamily:\"Inter\",fontStyle:\"normal\",lineHeight:\"1.1em\",letterSpacing:\"-0.02em\",textTransform:\"none\",textDecoration:\"none\"},// Scroll effects\nenableScrollGradient=true,scrollGradientSpeed=1,springStiffness=50,springDamping=20,enableParallax=true,parallaxOffset=50,parallaxDirection=\"up\"}){const containerRef=useRef(null);const[currentNumber,setCurrentNumber]=useState(startNumber);const[shouldAnimate,setShouldAnimate]=useState(false);const animationRef=useRef(null);// Check if in view\nconst isInView=useInView(containerRef,{once:true,margin:\"-100px\"});// Detect environment with RenderTarget\nuseEffect(()=>{if(alwaysAnimate){// Force animation for testing\nsetShouldAnimate(true);return;}// Use Framer's RenderTarget API\nconst currentTarget=RenderTarget.current();if(currentTarget===RenderTarget.canvas){// In canvas/editor: don't animate\nsetShouldAnimate(false);setCurrentNumber(targetNumber);}else{// In preview or export: animate\n// This includes RenderTarget.preview and RenderTarget.export\nsetShouldAnimate(true);setCurrentNumber(startNumber);}},[alwaysAnimate,targetNumber,startNumber]);// Animation effect\nuseEffect(()=>{if(shouldAnimate&&isInView){// Clear any existing animation\nif(animationRef.current){cancelAnimationFrame(animationRef.current);}// Start from startNumber\nsetCurrentNumber(startNumber);let startTime=null;const animate=timestamp=>{if(!startTime){startTime=timestamp+delay*1e3;}const elapsed=timestamp-startTime;if(elapsed<0){animationRef.current=requestAnimationFrame(animate);return;}const progress=Math.min(elapsed/(duration*1e3),1);// Easing\nconst eased=progress<.5?2*progress*progress:1-Math.pow(-2*progress+2,2)/2;const value=startNumber+(targetNumber-startNumber)*eased;setCurrentNumber(value);if(progress<1){animationRef.current=requestAnimationFrame(animate);}else{setCurrentNumber(targetNumber);}};animationRef.current=requestAnimationFrame(animate);}else if(!shouldAnimate){// Not animating - show target\nsetCurrentNumber(targetNumber);}return()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}};},[shouldAnimate,isInView,targetNumber,startNumber,duration,delay]);// Update when target changes and not animating\nuseEffect(()=>{if(!shouldAnimate){setCurrentNumber(targetNumber);}},[targetNumber,shouldAnimate]);// Scroll animations for gradient\nconst{scrollYProgress}=useScroll({target:containerRef,offset:[\"start end\",\"end start\"]});// Parallax effect\nconst parallaxMultiplier=parallaxDirection===\"up\"?1:-1;const gradientParallaxY=useTransform(scrollYProgress,[0,1],enableParallax?[parallaxOffset*parallaxMultiplier,-parallaxOffset*parallaxMultiplier]:[0,0]);// Gradient animation\nconst gradientAnimation=useTransform(scrollYProgress,[0,1],[0,200*scrollGradientSpeed]);// Spring animations\nconst smoothGradientAnimation=useSpring(gradientAnimation,{stiffness:springStiffness,damping:springDamping});const smoothGradientParallax=useSpring(gradientParallaxY,{stiffness:100,damping:30,restDelta:.001});// Format the number\nconst formattedNumber=currentNumber.toFixed(decimals);// Gradient position\nconst gradientPositionValue=useTransform([smoothGradientAnimation,smoothGradientParallax],([scrollX,parallaxY])=>{const xPos=(scrollX%100+100)%100;const yPos=(50+parallaxY%100+100)%100;return`${xPos}% ${yPos}%`;});// Text style\nconst textStyle={...font,display:\"inline-block\",background:`linear-gradient(${gradientAngle}deg, \n            ${gradientColorStart} 0%, \n            ${gradientColorEnd} 25%, \n            ${gradientColorStart} 50%, \n            ${gradientColorEnd} 75%, \n            ${gradientColorStart} 100%)`,backgroundSize:\"300% 300%\",backgroundClip:\"text\",WebkitBackgroundClip:\"text\",WebkitTextFillColor:\"transparent\",color:\"transparent\",backgroundPosition:enableScrollGradient||enableParallax?gradientPositionValue:\"50% 50%\"};return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{display:\"flex\",justifyContent:\"center\",alignItems:\"center\",position:\"relative\",width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsxs(motion.span,{style:textStyle,children:[prefix,formattedNumber,suffix]})});}// Property controls\naddPropertyControls(ScrollProgressNumber,{// Test toggle\nalwaysAnimate:{type:ControlType.Boolean,title:\"Always Animate\",defaultValue:false,description:\"Turn ON to test animation everywhere\"},// Numbers\ntargetNumber:{type:ControlType.Number,title:\"Target Number\",defaultValue:100,min:-999999,max:999999,step:1,displayStepper:true},startNumber:{type:ControlType.Number,title:\"Start Number\",defaultValue:0,min:-999999,max:999999,step:1,displayStepper:true},decimals:{type:ControlType.Number,title:\"Decimals\",defaultValue:0,min:0,max:4,step:1},prefix:{type:ControlType.String,title:\"Prefix\",defaultValue:\"\",placeholder:\"$\"},suffix:{type:ControlType.String,title:\"Suffix\",defaultValue:\"%\",placeholder:\"%\"},// Font\nfont:{type:ControlType.Font,title:\"Font\",controls:\"extended\"},// Gradient\ngradientColorStart:{type:ControlType.Color,title:\"Gradient Start\",defaultValue:\"#3B82F6\"},gradientColorEnd:{type:ControlType.Color,title:\"Gradient End\",defaultValue:\"#EC4899\"},gradientAngle:{type:ControlType.Number,title:\"Gradient Angle\",defaultValue:45,min:0,max:360,step:15,unit:\"\\xb0\",displayStepper:true},// Animation\nduration:{type:ControlType.Number,title:\"Animation Duration\",defaultValue:2,min:.1,max:10,step:.1,unit:\"s\"},delay:{type:ControlType.Number,title:\"Animation Delay\",defaultValue:.2,min:0,max:5,step:.1,unit:\"s\"},// Scroll effects\nenableScrollGradient:{type:ControlType.Boolean,title:\"Scroll Gradient\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},scrollGradientSpeed:{type:ControlType.Number,title:\"Gradient Speed\",defaultValue:1,min:.1,max:5,step:.1,hidden:props=>!props.enableScrollGradient},springStiffness:{type:ControlType.Number,title:\"Spring Stiffness\",defaultValue:50,min:1,max:200,step:1,hidden:props=>!props.enableScrollGradient},springDamping:{type:ControlType.Number,title:\"Spring Damping\",defaultValue:20,min:1,max:100,step:1,hidden:props=>!props.enableScrollGradient},// Parallax\nenableParallax:{type:ControlType.Boolean,title:\"Parallax Effect\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},parallaxOffset:{type:ControlType.Number,title:\"Parallax Offset\",defaultValue:50,min:0,max:200,step:10,unit:\"px\",hidden:props=>!props.enableParallax},parallaxDirection:{type:ControlType.Enum,title:\"Parallax Direction\",defaultValue:\"up\",options:[\"up\",\"down\"],optionTitles:[\"↑ Up\",\"↓ Down\"],hidden:props=>!props.enableParallax}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollProgressNumber\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Counter_Gradient.map"],"mappings":"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"}