{"version":3,"file":"ScrollColorText.CPOFWC37.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/eix2nRyJdddCsA4HP7tR/hUDjV9xiHTrfDhrcTs1S/ScrollColorText.js"],"sourcesContent":["// Text component with scroll-based color transition from base to main color\n// Supports character, word, or sentence-based transitions\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useRef,useEffect,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useScroll,useTransform,motion}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth any-prefer-fit\n * @framerSupportedLayoutHeight any-prefer-fit\n */export default function ScrollColorText(props){const{text=\"Scroll to see the color change\",baseColor=\"#CCCCCC\",mainColor=\"#000000\",transitionMode=\"character\",font,widthMode=\"fixed\",width=400,heightMode=\"fixed\",height=200,textAlign=\"left\",style}=props;const containerRef=useRef(null);const[segments,setSegments]=useState([]);const isStatic=useIsStaticRenderer();const{scrollYProgress}=useScroll({target:containerRef,offset:[\"start end\",\"center center\"]});useEffect(()=>{if(transitionMode===\"character\"){startTransition(()=>setSegments(text.split(\"\")));}else if(transitionMode===\"word\"){startTransition(()=>setSegments(text.split(/(\\s+)/)));}else if(transitionMode===\"sentence\"){startTransition(()=>setSegments(text.split(RegExp(\"(?<=[.!?])\\\\s+\"))));}},[text,transitionMode]);const totalSegments=segments.length;const computedWidth=widthMode===\"fill\"?\"100%\":widthMode===\"fit\"?\"fit-content\":width;const computedHeight=heightMode===\"fill\"?\"100%\":heightMode===\"fit\"?\"fit-content\":height;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{...style,position:\"relative\",width:computedWidth,height:computedHeight,overflow:\"auto\"},children:/*#__PURE__*/_jsx(\"div\",{style:{...font,whiteSpace:\"pre-wrap\",wordBreak:\"normal\",overflowWrap:\"break-word\",textAlign:textAlign},children:segments.map((segment,index)=>{const start=index/totalSegments;const end=(index+1)/totalSegments;return /*#__PURE__*/_jsx(ColorSegment,{segment:segment,scrollYProgress:scrollYProgress,start:start,end:end,baseColor:baseColor,mainColor:mainColor,isStatic:isStatic,transitionMode:transitionMode},index);})})});}function ColorSegment({segment,scrollYProgress,start,end,baseColor,mainColor,isStatic,transitionMode}){const opacity=useTransform(scrollYProgress,[start,end],[0,1]);if(isStatic){return /*#__PURE__*/_jsx(\"span\",{style:{color:baseColor},children:segment});}// Helper function to interpolate between two colors\nconst interpolateColor=progress=>{const base=baseColor.match(/\\w\\w/g)?.map(x=>parseInt(x,16))||[0,0,0];const main=mainColor.match(/\\w\\w/g)?.map(x=>parseInt(x,16))||[0,0,0];const r=Math.round(base[0]+(main[0]-base[0])*progress);const g=Math.round(base[1]+(main[1]-base[1])*progress);const b=Math.round(base[2]+(main[2]-base[2])*progress);return`rgb(${r}, ${g}, ${b})`;};return /*#__PURE__*/_jsx(motion.span,{style:{color:useTransform(opacity,[0,1],[baseColor,mainColor])},children:segment});}addPropertyControls(ScrollColorText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"Scroll to see the color change\",displayTextArea:true},baseColor:{type:ControlType.Color,title:\"Base Color\",defaultValue:\"#CCCCCC\"},mainColor:{type:ControlType.Color,title:\"Main Color\",defaultValue:\"#000000\"},transitionMode:{type:ControlType.Enum,title:\"Transition Mode\",options:[\"character\",\"word\",\"sentence\"],optionTitles:[\"Character\",\"Word\",\"Sentence\"],defaultValue:\"character\",displaySegmentedControl:true},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},textAlign:{type:ControlType.Enum,title:\"Text Align\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},widthMode:{type:ControlType.Enum,title:\"Width Mode\",options:[\"fixed\",\"fill\",\"fit\"],optionTitles:[\"Fixed\",\"Fill\",\"Fit\"],defaultValue:\"fixed\",displaySegmentedControl:true},width:{type:ControlType.Number,title:\"Width\",defaultValue:400,min:100,max:1e3,step:10,unit:\"px\"},heightMode:{type:ControlType.Enum,title:\"Height Mode\",options:[\"fixed\",\"fill\",\"fit\"],optionTitles:[\"Fixed\",\"Fill\",\"Fit\"],defaultValue:\"fixed\",displaySegmentedControl:true},height:{type:ControlType.Number,title:\"Height\",defaultValue:200,min:50,max:1e3,step:10,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollColorText\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fit\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fit\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollColorText.map"],"mappings":"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"}