{"version":3,"file":"WavyText.CesfpmBl.mjs","names":["useRef","useState","useCallback","TextTag"],"sources":["https:/framerusercontent.com/modules/aa12h9zMoQkPDu8zhiiF/4iDTNUXhUN2s835Vi7S1/WavyText.js"],"sourcesContent":["// Interactive text component where each letter follows mouse movement vertically on hover\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useRef,useCallback,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion}from\"framer-motion\";/**\n * Wavy Text - Interactive text where letters follow mouse movement\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 100\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function WavyText(props){const{text=\"Hello World\",textColor=\"#000000\",hoverColor=\"#0099FF\",font,maxOffset=30,smoothness=.15,fitWidth=false,layoutMode=\"fit\",htmlTag=\"div\"}=props;const containerRef=useRef(null);const[letterOffsets,setLetterOffsets]=useState([]);const[letterColorIntensities,setLetterColorIntensities]=useState([]);const[isHovering,setIsHovering]=useState(false);const[calculatedFontSize,setCalculatedFontSize]=useState(undefined);const isStatic=useIsStaticRenderer();const[containerDimensions,setContainerDimensions]=useState({width:0,height:0});// Observe container size changes\nuseEffect(()=>{if(!containerRef.current)return;const resizeObserver=new ResizeObserver(entries=>{for(const entry of entries){const{width,height}=entry.contentRect;startTransition(()=>{setContainerDimensions({width,height});});}});resizeObserver.observe(containerRef.current);return()=>{resizeObserver.disconnect();};},[]);// Calculate font size to fit width when fitWidth is enabled\nuseEffect(()=>{if(!fitWidth||!containerRef.current){setCalculatedFontSize(undefined);return;}const calculateFitSize=()=>{if(!containerRef.current)return;const containerWidth=containerRef.current.offsetWidth;if(containerWidth===0)return;// Create a temporary element to measure text width\nconst tempDiv=document.createElement(\"div\");tempDiv.style.position=\"absolute\";tempDiv.style.visibility=\"hidden\";tempDiv.style.whiteSpace=\"nowrap\";tempDiv.style.fontSize=\"100px\"// Base size for calculation\n;// Apply font properties except fontSize\nconst fontProps={...font};delete fontProps.fontSize;Object.assign(tempDiv.style,fontProps);tempDiv.textContent=text;document.body.appendChild(tempDiv);const textWidth=tempDiv.offsetWidth;document.body.removeChild(tempDiv);// Calculate the font size needed to fit the container\nconst scaleFactor=containerWidth/textWidth;const newFontSize=100*scaleFactor*.95// 0.95 for slight padding\n;setCalculatedFontSize(`${newFontSize}px`);};calculateFitSize();// Recalculate on window resize\nwindow.addEventListener(\"resize\",calculateFitSize);return()=>window.removeEventListener(\"resize\",calculateFitSize);},[fitWidth,text,font,containerDimensions]);const handleMouseMove=useCallback(e=>{if(!containerRef.current||isStatic)return;const rect=containerRef.current.getBoundingClientRect();const mouseY=e.clientY-rect.top;const centerY=rect.height/2;// Calculate offset based on distance from center\nconst relativeY=mouseY-centerY;const normalizedY=Math.max(-1,Math.min(1,relativeY/(rect.height/2)));// Create wave effect for each letter based on mouse position\nconst letters=text.split(\"\");const newOffsets=[];const newColorIntensities=[];letters.forEach((_,index)=>{const letterElement=containerRef.current?.children[0]?.children[index];if(!letterElement){newOffsets.push(0);newColorIntensities.push(0);return;}const letterRect=letterElement.getBoundingClientRect();const letterCenterX=letterRect.left+letterRect.width/2-rect.left;const mouseX=e.clientX-rect.left;// Calculate distance from mouse to letter\nconst distance=Math.abs(mouseX-letterCenterX);const maxDistance=rect.width/6;// Apply falloff based on distance\nconst falloff=Math.max(0,1-distance/maxDistance);newOffsets.push(normalizedY*maxOffset*falloff);newColorIntensities.push(falloff);});startTransition(()=>{setLetterOffsets(newOffsets);setLetterColorIntensities(newColorIntensities);});},[text,maxOffset,isStatic]);const handleMouseEnter=useCallback(()=>{startTransition(()=>{setIsHovering(true);});},[]);const handleMouseLeave=useCallback(()=>{startTransition(()=>{setIsHovering(false);setLetterOffsets([]);setLetterColorIntensities([]);});},[]);const letters=text.split(\"\");// Prepare font styles, excluding fontSize when fitWidth is enabled\nconst fontStyles=fitWidth?(()=>{const{fontSize,...restFont}=font;return restFont;})():font;const isFillMode=layoutMode===\"fill\";const TextTag=htmlTag;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{display:isFillMode?\"flex\":\"inline-block\",alignItems:isFillMode?\"center\":undefined,justifyContent:isFillMode?\"center\":undefined,position:\"relative\",cursor:\"default\",userSelect:\"none\",width:isFillMode?\"100%\":fitWidth?\"100%\":\"max-content\",height:isFillMode?\"100%\":\"auto\"},onMouseMove:isStatic?undefined:handleMouseMove,onMouseEnter:isStatic?undefined:handleMouseEnter,onMouseLeave:isStatic?undefined:handleMouseLeave,children:/*#__PURE__*/_jsx(TextTag,{style:{display:\"flex\",color:textColor,margin:0,padding:0,...fitWidth&&{justifyContent:\"space-between\",width:\"100%\"},...fontStyles,...fitWidth&&calculatedFontSize&&{fontSize:calculatedFontSize}},children:letters.map((letter,index)=>{const colorIntensity=letterColorIntensities[index]||0;return /*#__PURE__*/_jsx(motion.span,{style:{display:\"inline-block\",whiteSpace:letter===\" \"?\"pre\":\"normal\"},animate:{y:isHovering&&letterOffsets[index]!==undefined?letterOffsets[index]:0,color:isHovering&&colorIntensity>0?`color-mix(in srgb, ${hoverColor} ${colorIntensity*100}%, ${textColor})`:textColor},transition:{type:\"spring\",stiffness:600,damping:30,mass:smoothness*.5},children:letter===\" \"?\"\\xa0\":letter},index);})})});}addPropertyControls(WavyText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Hello World\"},htmlTag:{type:ControlType.Enum,title:\"HTML Tag\",options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\",\"span\",\"div\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\",\"Paragraph\",\"Span\",\"Div\"],defaultValue:\"div\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},hoverColor:{type:ControlType.Color,title:\"Hover Color\",defaultValue:\"#0099FF\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.02em\",lineHeight:\"1em\"}},layoutMode:{type:ControlType.Enum,title:\"Layout\",options:[\"fit\",\"fill\"],optionTitles:[\"Fit\",\"Fill\"],defaultValue:\"fit\",displaySegmentedControl:true},fitWidth:{type:ControlType.Boolean,title:\"Fit Width\",defaultValue:false,enabledTitle:\"100%\",disabledTitle:\"Auto\"},maxOffset:{type:ControlType.Number,title:\"Max Offset\",defaultValue:30,min:0,max:100,step:1,unit:\"px\"},smoothness:{type:ControlType.Number,title:\"Smoothness\",defaultValue:.15,min:.05,max:1,step:.05}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"WavyText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"100\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WavyText.map"],"mappings":"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"}