{"version":3,"file":"Scroll_Text_Highlight.CjSl6DzS.mjs","names":["useRef","useMemo"],"sources":["https:/framerusercontent.com/modules/KJYq6jxxxUemp1gxWbMI/qer1YggZMf78Qc82CpSE/Scroll_Text_Highlight.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{forwardRef,startTransition,useEffect,useMemo,useRef,useState}from\"react\";import{motion,useReducedMotion,useScroll,useTransform}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const SCROLL_HIGHLIGHT_PROGRESS_EVENT=\"scroll-text-highlight:progress\";const SCROLL_HIGHLIGHT_COMPLETE_EVENT=\"scroll-text-highlight:complete\";const COMPLETION_THRESHOLD=1;// Words are flex items, so line alignment comes from justifyContent.\n// textAlign is set too so the alignment carries to any inline content.\nconst JUSTIFY_BY_ALIGN={left:\"flex-start\",center:\"center\",right:\"flex-end\"};// User request: synchronize existing canvas CTA visibility with true completion of this scroll-driven dark text highlight, with optional key-based event coordination and no CTA rebuild.\n/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function ScrollTextHighlight(props){const{text=\"One intelligent layer for your entire business, Create AI that understands your business, takes action, and continuously improves how your team works.\",fontSize=32,color=\"#a1a1aa\",baseOpacity=.2,activeColor=\"#09090b\",lineHeight=1.3,textAlign=\"center\",font,fontFamily,syncKey=\"\",lang=\"de\"}=props;const containerRef=useRef(null);const{scrollYProgress}=useScroll({target:containerRef,offset:[\"start 80%\",\"end 35%\"]});const words=useMemo(()=>text.split(\" \"),[text]);const selectedFontFamily=font?.fontFamily||fontFamily||\"inherit\";const fontWeight=font?.fontWeight||500;useEffect(()=>{if(typeof window===\"undefined\")return;if(!syncKey.trim())return;const scopedKey=syncKey.trim();const publish=latest=>{const element=containerRef.current;if(!element)return;const progress=Math.max(0,Math.min(1,latest));const complete=progress>=COMPLETION_THRESHOLD;element.dataset.scrollHighlightKey=scopedKey;element.dataset.scrollHighlightProgress=String(progress);element.dataset.scrollHighlightComplete=complete?\"true\":\"false\";const detail={key:scopedKey,progress,complete,sourceElement:element};element.dispatchEvent(new CustomEvent(SCROLL_HIGHLIGHT_PROGRESS_EVENT,{detail,bubbles:true}));if(complete){element.dispatchEvent(new CustomEvent(SCROLL_HIGHLIGHT_COMPLETE_EVENT,{detail,bubbles:true}));}};publish(scrollYProgress.get());const rafId=window.requestAnimationFrame(()=>{publish(scrollYProgress.get());});const unsubscribe=scrollYProgress.on(\"change\",publish);return()=>{window.cancelAnimationFrame(rafId);unsubscribe();};},[scrollYProgress,syncKey]);const align=JUSTIFY_BY_ALIGN[textAlign]?textAlign:\"center\";return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,lang:lang,\"data-scroll-highlight-key\":syncKey.trim()||undefined,style:{position:\"relative\",display:\"flex\",flexWrap:\"wrap\",justifyContent:JUSTIFY_BY_ALIGN[align],textAlign:align,// Word spacing via columnGap (only between words on the\n// same line) instead of a right margin on every word, so\n// the last word of each line doesn't leave a trailing gap\n// that would push right/centered lines off alignment.\ncolumnGap:`${fontSize*.25}px`,fontSize:`${fontSize}px`,lineHeight:lineHeight,fontFamily:selectedFontFamily,fontWeight:fontWeight,color:color,width:\"100%\",height:\"auto\",boxSizing:\"border-box\",padding:\"20px 0\"},children:words.map((word,index)=>{const start=index/words.length;const end=start+1/words.length;const opacity=useTransform(scrollYProgress,[start,end],[baseOpacity,1]);const wordColor=useTransform(scrollYProgress,[start,end],[color,activeColor]);return /*#__PURE__*/_jsx(motion.span,{style:{opacity:opacity,color:wordColor,display:\"inline-block\",willChange:\"opacity, color\",// Flex items default to min-width: auto, which\n// stops a long word from shrinking below its own\n// width. These let it wrap inside the container,\n// hyphenated where the language allows.\nminWidth:0,maxWidth:\"100%\",hyphens:\"auto\",WebkitHyphens:\"auto\",overflowWrap:\"break-word\"},children:word},index);})});}addPropertyControls(ScrollTextHighlight,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"One intelligent layer for your entire business, Create AI that understands your business, takes action, and continuously improves how your team works.\",displayTextArea:true},lang:{type:ControlType.Enum,title:\"Language\",options:[\"de\",\"en\"],optionTitles:[\"German\",\"English\"],defaultValue:\"de\"},textAlign:{type:ControlType.Enum,title:\"Align\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],optionIcons:[\"text-align-left\",\"text-align-center\",\"text-align-right\"],displaySegmentedControl:true,defaultValue:\"center\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultValue:{fontSize:\"32px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},defaultFontType:\"sans-serif\"},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:32,min:12,max:120,step:1},lineHeight:{type:ControlType.Number,title:\"Line Height\",defaultValue:1.3,step:.1,min:.8,max:3},color:{type:ControlType.Color,title:\"Dim Color\",defaultValue:\"#CCCCCC\"},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#000000\"},baseOpacity:{type:ControlType.Number,title:\"Base Opacity\",defaultValue:.2,min:0,max:1,step:.05},syncKey:{type:ControlType.String,title:\"Sync Key\",defaultValue:\"\",placeholder:\"e.g. growth-intro\"}});export function withScrollHighlightCTAReveal(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const isStaticRenderer=useIsStaticRenderer();const prefersReducedMotion=useReducedMotion();const hostRef=useRef(null);const[isReady,setIsReady]=useState(isStaticRenderer);const syncKey=\"growth-intro\";useEffect(()=>{if(typeof window===\"undefined\")return;if(isStaticRenderer)return;const host=hostRef.current;if(!host)return;let scope=host.parentElement;let anchorHighlight=null;while(scope){const matchedHighlight=scope.querySelector(`[data-scroll-highlight-key=\"${syncKey}\"]`);if(matchedHighlight){anchorHighlight=matchedHighlight;break;}scope=scope.parentElement;}if(!scope||!anchorHighlight)return;const datasetComplete=anchorHighlight.dataset.scrollHighlightComplete===\"true\";const datasetProgress=Number(anchorHighlight.dataset.scrollHighlightProgress??\"0\");const initialComplete=datasetComplete||datasetProgress>=COMPLETION_THRESHOLD;startTransition(()=>setIsReady(initialComplete));const onProgress=event=>{const custom=event;const detail=custom.detail;if(!detail||detail.key!==syncKey)return;if(detail.sourceElement!==anchorHighlight)return;const complete=detail.progress>=COMPLETION_THRESHOLD;startTransition(()=>setIsReady(complete));};const onComplete=event=>{const custom=event;const detail=custom.detail;if(!detail||detail.key!==syncKey)return;if(detail.sourceElement!==anchorHighlight)return;startTransition(()=>setIsReady(true));};scope.addEventListener(SCROLL_HIGHLIGHT_PROGRESS_EVENT,onProgress);scope.addEventListener(SCROLL_HIGHLIGHT_COMPLETE_EVENT,onComplete);return()=>{scope.removeEventListener(SCROLL_HIGHLIGHT_PROGRESS_EVENT,onProgress);scope.removeEventListener(SCROLL_HIGHLIGHT_COMPLETE_EVENT,onComplete);};},[isStaticRenderer]);const mergedRef=node=>{hostRef.current=node;if(typeof ref===\"function\")ref(node);else if(ref&&typeof ref===\"object\"){ref.current=node;}};const revealDuration=prefersReducedMotion?\"0s\":\"0.3s\";return /*#__PURE__*/_jsx(Component,{...props,ref:mergedRef,\"aria-hidden\":!isReady,tabIndex:isReady?props.tabIndex:-1,style:{...props.style,opacity:isReady?1:0,visibility:isReady?\"visible\":\"hidden\",pointerEvents:isReady?props.style?.pointerEvents:\"none\",transition:`${props.style?.transition?`${props.style.transition}, `:\"\"}opacity ${revealDuration} ease`}});});}\nexport const __FramerMetadata__ = {\"exports\":{\"withScrollHighlightCTAReveal\":{\"type\":\"reactHoc\",\"name\":\"withScrollHighlightCTAReveal\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollTextHighlight\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Scroll_Text_Highlight.map"],"mappings":"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"}