{"version":3,"file":"GradientText.C_Hnpjpl.mjs","names":["React.useRef"],"sources":["https:/framerusercontent.com/modules/7lJM0tX2yC7BjkmkXbV3/4u3C0aSArrYe1fFmMF5u/GradientText.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 200\n *\n * COMPONENT: Solid Gradient Text\n * - Fixes clipping by adding internal padding.\n * - Fixes transparency by adding a solid base gradient layer behind the moving blobs.\n */export default function GradientText(props){const{text,fontFamily,fontSize,fontWeight,letterSpacing,lineHeight,textAlign,baseColorStart,baseColorEnd,color1,color2,color3,speed}=props;// Helper: Convert generic color strings to RGB numbers for CSS\nconst toRgb=colorString=>{if(!colorString)return\"255, 255, 255\";if(colorString.startsWith(\"#\")){let hex=colorString.replace(\"#\",\"\");if(hex.length===3)hex=hex+hex;const bigint=parseInt(hex,16);const r=bigint>>16&255;const g=bigint>>8&255;const b=bigint&255;return`${r}, ${g}, ${b}`;}if(colorString.startsWith(\"rgb\")){const values=colorString.match(/\\d+/g);if(values&&values.length>=3)return`${values[0]}, ${values[1]}, ${values[2]}`;}return\"255, 255, 255\";};const ref=React.useRef(null);// Animation Loop\nReact.useEffect(()=>{let frameId;let time=0;const speedFactor=speed/1e3;const animate=()=>{time+=speedFactor;if(ref.current){// Calculate blob positions\nconst x1=50+Math.sin(time)*40;const y1=50+Math.cos(time*.9)*40;const x2=50+Math.cos(time*1.2)*40;const y2=50+Math.sin(time*1.1)*40;const x3=50+Math.sin(time*.7+2)*40;const y3=50+Math.cos(time*.8+2)*40;ref.current.style.setProperty(\"--x1\",`${x1}%`);ref.current.style.setProperty(\"--y1\",`${y1}%`);ref.current.style.setProperty(\"--x2\",`${x2}%`);ref.current.style.setProperty(\"--y2\",`${y2}%`);ref.current.style.setProperty(\"--x3\",`${x3}%`);ref.current.style.setProperty(\"--y3\",`${y3}%`);}frameId=requestAnimationFrame(animate);};animate();return()=>cancelAnimationFrame(frameId);},[speed]);const rgb1=toRgb(color1);const rgb2=toRgb(color2);const rgb3=toRgb(color3);return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:textAlign===\"left\"?\"flex-start\":textAlign===\"right\"?\"flex-end\":\"center\"},children:/*#__PURE__*/_jsx(\"span\",{ref:ref,style:{margin:0,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,letterSpacing:letterSpacing,lineHeight:lineHeight,textAlign:textAlign,whiteSpace:\"pre-wrap\",width:\"100%\",// 1. FIX CLIPPING:\n// We add padding so descenders (g, y, j) aren't cut by the bounding box.\npaddingTop:\"0.1em\",paddingBottom:\"0.2em\",color:\"transparent\",backgroundClip:\"text\",WebkitBackgroundClip:\"text\",// 2. FIX TRANSPARENCY:\n// We stack the gradients.\n// The last item in the list is the BOTTOM layer.\n// We put a solid linear-gradient at the bottom so no transparency ever shows.\nbackgroundImage:`\n                        radial-gradient(circle at var(--x1, 50%) var(--y1, 50%), rgba(${rgb1}, 1) 0%, rgba(${rgb1}, 0) 50%),\n                        radial-gradient(circle at var(--x2, 80%) var(--y2, 20%), rgba(${rgb2}, 1) 0%, rgba(${rgb2}, 0) 50%),\n                        radial-gradient(circle at var(--x3, 20%) var(--y3, 80%), rgba(${rgb3}, 1) 0%, rgba(${rgb3}, 0) 50%),\n                        linear-gradient(to right, ${baseColorStart}, ${baseColorEnd})\n                    `,// Standard blend to mix blobs with the base\nbackgroundBlendMode:\"normal\",backgroundSize:\"150% 150%\"},children:text})});}addPropertyControls(GradientText,{text:{type:ControlType.String,defaultValue:\"Solid Mask\",displayTextArea:true,title:\"Content\"},fontFamily:{type:ControlType.String,defaultValue:\"Inter\",title:\"Font Family\"},fontSize:{type:ControlType.Number,defaultValue:120,min:10,max:500,title:\"Size\"},fontWeight:{type:ControlType.Number,defaultValue:800,min:100,max:900,step:100,title:\"Weight\"},textAlign:{type:ControlType.Enum,options:[\"left\",\"center\",\"right\"],defaultValue:\"center\",title:\"Align\",displaySegmentedControl:true},letterSpacing:{type:ControlType.Number,defaultValue:-2,title:\"Spacing\"},lineHeight:{type:ControlType.Number,defaultValue:1.1,step:.1,title:\"Line Height\"},speed:{type:ControlType.Number,defaultValue:15,min:0,max:100,title:\"Speed\"},// Base Gradient Controls (Ensures opacity)\nbaseColorStart:{type:ControlType.Color,defaultValue:\"#4338ca\",title:\"Base Start\"},baseColorEnd:{type:ControlType.Color,defaultValue:\"#3b82f6\",title:\"Base End\"},// Floating Blob Colors\ncolor1:{type:ControlType.Color,defaultValue:\"rgb(255, 0, 128)\",title:\"Blob 1\"},color2:{type:ControlType.Color,defaultValue:\"rgb(128, 0, 255)\",title:\"Blob 2\"},color3:{type:ControlType.Color,defaultValue:\"rgb(0, 255, 255)\",title:\"Blob 3\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GradientText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"200\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GradientText.map"],"mappings":"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"}