{"version":3,"file":"LineMaskSplitInOut.B0cs44z4.mjs","names":["React.useRef","React.useState","React.useMemo","React.useCallback"],"sources":["https:/framerusercontent.com/modules/HUWhh5HA4IcJFz3sKrZn/59hRRAKipFba1mCSOK87/LineMaskSplitInOut.js"],"sourcesContent":["// User request: Create a new Framer code component named \"LineMaskSplitInOut\" that animates headline text with a masked split entrance on viewport enter and the same animation in reverse on leave, with configurable tokenization (words/chars/lines), typography, timing, and replay behavior.\nimport{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";function splitTokens(text,per){if(per===\"chars\"){return Array.from(text).map(char=>({text:char===\"\\n\"?\"\":char,animate:!/\\s/.test(char),lineBreak:char===\"\\n\"}));}if(per===\"lines\"){const lines=text.split(\"\\n\");return lines.flatMap((line,index)=>{const base={text:line,animate:line.trim().length>0,lineBreak:false};if(index===lines.length-1)return[base];return[base,{text:\"\",animate:false,lineBreak:true}];});}const words=text.split(/(\\s+)/);return words.map(chunk=>({text:chunk,animate:chunk.trim().length>0,lineBreak:false}));}/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function LineMaskSplitInOut(props){const{text=\"A creative studio built for what comes next.\",tag=\"h1\",font,color=\"#111111\",animate=\"In & Out\",per=\"words\",stagger=.1,duration=1,translateY=100,initialOpacity=1,threshold=.3,replay=true,style}=props;const isStatic=useIsStaticRenderer();const rootRef=React.useRef(null);const inView=useInView(rootRef,{amount:Math.max(0,Math.min(1,threshold))});const[hasEntered,setHasEntered]=React.useState(false);const[hasExited,setHasExited]=React.useState(false);React.useEffect(()=>{if(inView&&!hasEntered){React.startTransition(()=>{setHasEntered(true);});}},[hasEntered,inView]);const tokens=React.useMemo(()=>splitTokens(text,per),[text,per]);const animatedTokenCount=React.useMemo(()=>tokens.reduce((count,token)=>count+(token.animate?1:0),0),[tokens]);const isBrowser=typeof window!==\"undefined\";const shouldAnimate=!isStatic&&isBrowser;const showVisibleState=React.useMemo(()=>{if(animate===\"In\")return hasEntered;if(animate===\"Out\")return!hasExited;if(!replay)return hasEntered;if(!hasEntered)return false;return!hasExited;},[animate,hasEntered,hasExited,replay]);const visible=shouldAnimate?showVisibleState:true;const hasEnteredRef=React.useRef(hasEntered);const hasExitedRef=React.useRef(hasExited);const inViewRef=React.useRef(inView);const animateRef=React.useRef(animate);const replayRef=React.useRef(replay);hasEnteredRef.current=hasEntered;hasExitedRef.current=hasExited;inViewRef.current=inView;animateRef.current=animate;replayRef.current=replay;React.useEffect(()=>{if(typeof window===\"undefined\")return;if(!shouldAnimate)return;const scrollThreshold=6;let lastScrollY=window.scrollY||0;const onScroll=()=>{const currentScrollY=window.scrollY||0;const delta=currentScrollY-lastScrollY;if(delta>scrollThreshold){const mode=animateRef.current;const canExit=mode!==\"In\"&&!(mode===\"In & Out\"&&!replayRef.current);if(canExit&&hasEnteredRef.current&&!hasExitedRef.current){React.startTransition(()=>{setHasExited(true);});}}else if(delta<-scrollThreshold){const mode=animateRef.current;const canReplayIn=mode===\"In & Out\"&&replayRef.current;if(canReplayIn&&inViewRef.current&&hasExitedRef.current){React.startTransition(()=>{setHasExited(false);});}}lastScrollY=currentScrollY;};window.addEventListener(\"scroll\",onScroll,{passive:true});return()=>{window.removeEventListener(\"scroll\",onScroll);};},[shouldAnimate]);const textStyle=React.useMemo(()=>({...font,color,margin:0,width:\"100%\",whiteSpace:per===\"lines\"?\"pre-wrap\":\"normal\",overflowWrap:\"anywhere\"}),[font,color,per]);const containerStyle=React.useMemo(()=>({...style,position:\"relative\",width:\"100%\",height:\"auto\"}),[style]);const renderToken=React.useCallback((token,index,sequenceIndex)=>{if(token.lineBreak){return /*#__PURE__*/_jsx(\"br\",{},`br-${index}`);}if(!token.animate){return /*#__PURE__*/_jsx(\"span\",{style:{whiteSpace:\"pre-wrap\"},children:token.text},`plain-${index}`);}const delay=visible?sequenceIndex*stagger:Math.max(0,animatedTokenCount-1-sequenceIndex)*stagger;return /*#__PURE__*/_jsx(\"span\",{style:{display:\"inline-block\",overflow:\"hidden\",verticalAlign:\"baseline\"},children:/*#__PURE__*/_jsx(motion.span,{style:{display:\"inline-block\",willChange:\"transform, opacity\",whiteSpace:\"pre\"},initial:shouldAnimate&&animate!==\"Out\"?{y:`${translateY}%`,opacity:initialOpacity}:{y:\"0%\",opacity:1},animate:{y:visible?\"0%\":`${translateY}%`,opacity:visible?1:initialOpacity},transition:{duration,delay,ease:[.26,.06,.07,1]},children:token.text})},`mask-${index}`);},[animatedTokenCount,duration,animate,initialOpacity,shouldAnimate,stagger,translateY,visible]);const Tag=tag;let tokenOrder=-1;return /*#__PURE__*/_jsx(\"div\",{ref:rootRef,style:containerStyle,children:/*#__PURE__*/_jsx(Tag,{style:textStyle,\"aria-label\":text,children:tokens.map((token,index)=>{if(token.animate)tokenOrder+=1;return renderToken(token,index,tokenOrder);})})});}addPropertyControls(LineMaskSplitInOut,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"A creative studio built for what comes next.\",displayTextArea:true},tag:{type:ControlType.Enum,title:\"Tag\",options:[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"H4\",\"H5\",\"H6\",\"P\"],defaultValue:\"h1\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"62px\",variant:\"Bold\",letterSpacing:\"-0.07em\",lineHeight:\"1.1em\"}},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#111111\"},animate:{type:ControlType.Enum,title:\"Animate\",options:[\"In & Out\",\"In\",\"Out\"],optionTitles:[\"In & Out\",\"In\",\"Out\"],defaultValue:\"In & Out\",displaySegmentedControl:true},per:{type:ControlType.Enum,title:\"Per\",options:[\"words\",\"chars\",\"lines\"],optionTitles:[\"Words\",\"Chars\",\"Lines\"],defaultValue:\"words\",displaySegmentedControl:true},stagger:{type:ControlType.Number,title:\"Stagger\",defaultValue:.1,min:0,max:1,step:.01},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:1,min:.1,max:5,step:.01},translateY:{type:ControlType.Number,title:\"Translate Y\",defaultValue:100,min:-200,max:200,step:1,unit:\"%\"},initialOpacity:{type:ControlType.Number,title:\"Start Opacity\",defaultValue:1,min:0,max:1,step:.01},threshold:{type:ControlType.Number,title:\"Threshold\",defaultValue:.3,min:0,max:1,step:.01},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LineMaskSplitInOut\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LineMaskSplitInOut.map"],"mappings":"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"}