{"version":3,"file":"Animated_Text_Gradient_02.BapbjXR3.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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"}