{"version":3,"file":"Animated_Text_Gradient_02.CncRJMgR.mjs","names":["useState","useRef","React"],"sources":["https:/framerusercontent.com/modules/vKR69kF1mirdUEdXSulC/K3Z3l9sF65iXoHxuFKwH/Animated_Text_Gradient_02.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import React,{useState,useEffect,useRef}from\"react\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerDisableUnlink\n */export default function AnimatedGradientText(props){const{text=\"Beautiful Gradient Text\",textFont,// Accessibility\nsemanticTag=\"h1\",// Gradient colors (up to 5 colors)\ncolor1=\"#ff6b6b\",color2=\"#4ecdc4\",color3=\"#45b7d1\",color4=\"#96ceb4\",color5=\"#feca57\",useColor3=true,useColor4=false,useColor5=false,// Animation settings\nanimateOnViewport=true,animationSpeed=6,gradientDirection=90,// Advanced settings\npauseOnHover=false}=props;// Helper function to apply font styles\nconst applyFontStyles=font=>{if(!font||typeof font===\"string\"){return{fontFamily:font||\"Inter\",fontSize:48,fontWeight:700,lineHeight:1.2,letterSpacing:\"-0.02em\",textAlign:\"center\"};}return{fontFamily:font.family||font.fontFamily||\"Inter\",fontSize:font.size||font.fontSize||48,fontWeight:font.weight||font.fontWeight||700,lineHeight:font.lineHeight||1.2,letterSpacing:font.letterSpacing||\"-0.02em\",textAlign:font.alignment||font.textAlign||\"center\"};};const[isVisible,setIsVisible]=useState(false);const[gradientPosition,setGradientPosition]=useState(0);const[isPaused,setIsPaused]=useState(false);const textRef=useRef(null);const animationRef=useRef(null);// Build gradient colors array\nconst gradientColors=[color1,color2];if(useColor3)gradientColors.push(color3);if(useColor4)gradientColors.push(color4);if(useColor5)gradientColors.push(color5);// Intersection Observer for viewport detection\nuseEffect(()=>{if(!animateOnViewport){setIsVisible(true);return;}const observer=new IntersectionObserver(([entry])=>{setIsVisible(entry.isIntersecting);},{threshold:.1});if(textRef.current){observer.observe(textRef.current);}return()=>{if(textRef.current){observer.unobserve(textRef.current);}};},[animateOnViewport]);// Gradient animation\nuseEffect(()=>{if(!isVisible||isPaused){if(animationRef.current){cancelAnimationFrame(animationRef.current);}return;}let startTime=null;const animate=currentTime=>{if(startTime===null)startTime=currentTime;const elapsed=currentTime-startTime;const progress=elapsed/(animationSpeed*1e3)%1;const position=Math.sin(progress*Math.PI*2)*50;setGradientPosition(position);animationRef.current=requestAnimationFrame(animate);};animationRef.current=requestAnimationFrame(animate);return()=>{if(animationRef.current){cancelAnimationFrame(animationRef.current);}};},[isVisible,animationSpeed,isPaused]);// Create gradient CSS\nconst createGradient=()=>{const colorStops=gradientColors.map((color,index)=>{const position=index/(gradientColors.length-1)*100;return`${color} ${position}%`;}).join(\", \");return`linear-gradient(${gradientDirection}deg, ${colorStops})`;};// Handle mouse events for pause on hover\nconst handleMouseEnter=()=>{if(pauseOnHover){setIsPaused(true);}};const handleMouseLeave=()=>{if(pauseOnHover){setIsPaused(false);}};// Split text into lines for rendering\nconst renderTextWithLineBreaks=()=>{const lines=text.split(\"\\n\");return lines.map((line,index)=>/*#__PURE__*/_jsxs(React.Fragment,{children:[line,index<lines.length-1&&/*#__PURE__*/_jsx(\"br\",{})]},index));};const fontStyles=applyFontStyles(textFont);// Determine which HTML tag to use\nconst TextTag=semanticTag||\"h1\";const containerStyle={display:\"inline-block\",position:\"relative\",textAlign:fontStyles.textAlign,width:fontStyles.textAlign===\"center\"?\"100%\":\"auto\"};const textStyle={...fontStyles,margin:0,padding:0,background:createGradient(),backgroundSize:`200% 200%`,backgroundPosition:`${50+gradientPosition}% ${50+gradientPosition}%`,backgroundClip:\"text\",WebkitBackgroundClip:\"text\",color:\"transparent\",display:\"inline-block\",transition:animateOnViewport&&!isVisible?\"opacity 0.6s ease-out\":\"none\",opacity:animateOnViewport?isVisible?1:.2:1,cursor:pauseOnHover?\"pointer\":\"default\"};return /*#__PURE__*/_jsx(\"div\",{ref:textRef,style:containerStyle,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,children:/*#__PURE__*/_jsx(TextTag,{style:textStyle,children:renderTextWithLineBreaks()})});}addPropertyControls(AnimatedGradientText,{text:{type:ControlType.String,title:\"Text\",displayTextArea:true,defaultValue:\"Beautiful Gradient Text\"},semanticTag:{type:ControlType.Enum,title:\"Semantic Tag\",options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\",\"span\"],optionTitles:[\"H1 (Main Heading)\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\",\"Paragraph\",\"Span\"],defaultValue:\"h1\"},textFont:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultValue:{family:\"Inter\",size:48,weight:\"700\",lineHeight:1.2,letterSpacing:\"-0.02em\"}},color1:{type:ControlType.Color,title:\"Color 1\",defaultValue:\"#ff6b6b\"},color2:{type:ControlType.Color,title:\"Color 2\",defaultValue:\"#4ecdc4\"},useColor3:{type:ControlType.Boolean,title:\"Use Color 3\",defaultValue:true,enabledTitle:\"Enabled\",disabledTitle:\"Disabled\"},color3:{type:ControlType.Color,title:\"Color 3\",defaultValue:\"#45b7d1\",hidden:props=>!props.useColor3},useColor4:{type:ControlType.Boolean,title:\"Use Color 4\",defaultValue:false,enabledTitle:\"Enabled\",disabledTitle:\"Disabled\"},color4:{type:ControlType.Color,title:\"Color 4\",defaultValue:\"#96ceb4\",hidden:props=>!props.useColor4},useColor5:{type:ControlType.Boolean,title:\"Use Color 5\",defaultValue:false,enabledTitle:\"Enabled\",disabledTitle:\"Disabled\"},color5:{type:ControlType.Color,title:\"Color 5\",defaultValue:\"#feca57\",hidden:props=>!props.useColor5},animateOnViewport:{type:ControlType.Boolean,title:\"Animate on Viewport\",defaultValue:true,enabledTitle:\"On Scroll Into View\",disabledTitle:\"Always Animate\"},animationSpeed:{type:ControlType.Number,title:\"Animation Speed\",min:2,max:30,step:.5,defaultValue:6,unit:\"s\",displayStepper:true},gradientDirection:{type:ControlType.Number,title:\"Gradient Angle\",min:0,max:360,step:15,defaultValue:90,unit:\"\\xb0\",displayStepper:true},pauseOnHover:{type:ControlType.Boolean,title:\"Pause on Hover\",defaultValue:false,enabledTitle:\"Enabled\",disabledTitle:\"Disabled\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AnimatedGradientText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Animated_Text_Gradient_02.map"],"mappings":"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"}