{"version":3,"file":"TextHighlighter.Cho6dnbe.mjs","names":["useState","useRef","useMemo"],"sources":["https:/framerusercontent.com/modules/A9Y4ME6x37THj78ZQW2G/2jw7FECReqiqwYzsETjL/TextHighlighter.js"],"sourcesContent":["// Progressive text highlight animation that highlights words from start to finish\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useMemo,useRef}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";// Helper function to convert any color format to rgba\nfunction colorToRgba(color,alpha){// Create a temporary element to let the browser parse the color\nif(typeof document===\"undefined\")return`rgba(255, 187, 0, ${alpha})`;const temp=document.createElement(\"div\");temp.style.color=color;document.body.appendChild(temp);const computed=getComputedStyle(temp).color;document.body.removeChild(temp);// Extract RGB values from computed color (format: \"rgb(r, g, b)\")\nconst match=computed.match(/\\d+/g);if(match&&match.length>=3){return`rgba(${match[0]}, ${match[1]}, ${match[2]}, ${alpha})`;}return`rgba(255, 187, 0, ${alpha})`;}/**\n * Progressive Text Highlight\n * \n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function TextHighlighter(props){const{text,highlightColor,textColor,backgroundColor,duration,autoPlay,loop,font,pauseDuration,sentencePauseDuration,commaPauseDuration}=props;const[progress,setProgress]=useState(0);const[isPaused,setIsPaused]=useState(false);const isStatic=useIsStaticRenderer();const lastSentenceIndex=useRef(-1);const lastCommaIndex=useRef(-1);const totalChars=text.length;// Find all sentence ending positions\nconst sentenceEndings=useMemo(()=>{const endings=[];for(let i=0;i<text.length;i++){if([\".\",\"!\",\"?\"].includes(text[i])){endings.push(i);}}return endings;},[text]);// Find all comma positions\nconst commaPositions=useMemo(()=>{const positions=[];for(let i=0;i<text.length;i++){if(text[i]===\",\"){positions.push(i);}}return positions;},[text]);useEffect(()=>{if(isStatic||!autoPlay){setProgress(0);return;}let startTime=Date.now();let animationFrame;let pauseTimeout;let pauseStartTime=0;let totalPauseTime=0;const animate=()=>{const elapsed=Date.now()-startTime-totalPauseTime;const newProgress=Math.min(elapsed/duration*totalChars,totalChars);setProgress(newProgress);// Check if we just passed a sentence ending\nconst currentCharIndex=Math.floor(newProgress);// Find if we're at a sentence ending we haven't paused at yet\nconst sentenceIndex=sentenceEndings.findIndex(pos=>pos===currentCharIndex-1);if(sentenceIndex!==-1&&sentenceIndex!==lastSentenceIndex.current){lastSentenceIndex.current=sentenceIndex;pauseStartTime=Date.now();pauseTimeout=window.setTimeout(()=>{totalPauseTime+=Date.now()-pauseStartTime;animationFrame=requestAnimationFrame(animate);},sentencePauseDuration);return;}// Find if we're at a comma we haven't paused at yet\nconst commaIndex=commaPositions.findIndex(pos=>pos===currentCharIndex-1);if(commaIndex!==-1&&commaIndex!==lastCommaIndex.current){lastCommaIndex.current=commaIndex;pauseStartTime=Date.now();pauseTimeout=window.setTimeout(()=>{totalPauseTime+=Date.now()-pauseStartTime;animationFrame=requestAnimationFrame(animate);},commaPauseDuration);return;}if(newProgress>=totalChars){if(loop){setTimeout(()=>{startTime=Date.now();totalPauseTime=0;lastSentenceIndex.current=-1;lastCommaIndex.current=-1;setProgress(0);animationFrame=requestAnimationFrame(animate);},pauseDuration);}}else{animationFrame=requestAnimationFrame(animate);}};animationFrame=requestAnimationFrame(animate);return()=>{cancelAnimationFrame(animationFrame);clearTimeout(pauseTimeout);};},[totalChars,duration,autoPlay,loop,isStatic,pauseDuration,sentencePauseDuration,commaPauseDuration,sentenceEndings,commaPositions]);const isFixedWidth=props?.style&&props.style.width===\"100%\";const isFixedHeight=props?.style&&props.style.height===\"100%\";return /*#__PURE__*/_jsx(\"div\",{style:{...props.style,position:\"relative\",backgroundColor,padding:20,borderRadius:8,overflow:\"auto\",...isFixedWidth?{}:{width:\"max-content\"},...isFixedHeight?{}:{height:\"max-content\"}},children:/*#__PURE__*/_jsxs(\"p\",{style:{margin:0,color:textColor,...font,whiteSpace:\"pre-wrap\",wordBreak:\"break-word\",position:\"relative\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",top:0,left:0,pointerEvents:\"none\",whiteSpace:\"pre-wrap\",wordBreak:\"break-word\"},children:text.split(\"\").map((char,index)=>{const isHighlighted=index<Math.floor(progress);const isPartial=index===Math.floor(progress);const partialAmount=isPartial?progress-Math.floor(progress):0;return /*#__PURE__*/_jsx(\"span\",{style:{backgroundColor:isHighlighted?highlightColor:isPartial?colorToRgba(highlightColor,partialAmount):\"transparent\",transition:\"background-color 0.05s linear\"},children:char},index);})}),text]})});}addPropertyControls(TextHighlighter,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"This is a progressive text highlight animation that highlights each word sequentially from the beginning to the end of the text block.\",displayTextArea:true},highlightColor:{type:ControlType.Color,title:\"Highlight Color\",defaultValue:\"#FFBB00\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:5e3,min:1e3,max:3e4,step:100,unit:\"ms\"},pauseDuration:{type:ControlType.Number,title:\"Pause Duration\",defaultValue:1e3,min:0,max:1e4,step:100,unit:\"ms\"},sentencePauseDuration:{type:ControlType.Number,title:\"Sentence Pause\",defaultValue:300,min:0,max:3e3,step:50,unit:\"ms\"},commaPauseDuration:{type:ControlType.Number,title:\"Comma Pause\",defaultValue:150,min:0,max:2e3,step:50,unit:\"ms\"},autoPlay:{type:ControlType.Boolean,title:\"Auto Play\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextHighlighter\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TextHighlighter.map"],"mappings":"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"}