{"version":3,"file":"TypingLoopText.CpNldcad.mjs","names":["useRef","useState","_Fragment","__esmMin","init_ssg_sandbox_shims","init_npm_react_18_3_1","_e","de","l","p","c","init_jsx_runtime","ce","window","motion","init_framer_motion_DhsWWWsN","addPropertyControls","init_framer_BWFVvmND","useIsStaticRenderer","ControlType","TypingLoopText","Tag","props","cursor","isStatic","list","phrases","phrase","phrasesKey","longest","result","root","started","setStarted","index","setIndex","count","setCount","deleting","setDeleting","still","setStill","element","observer","entry","delay","typeSpeed","next","loop","pause","deleteSpeed","NEXT_DELAY","timer","current","typed","cursorElement","line","prefix","typedColor","font","style","VISUALLY_HIDDEN","reserve","JUSTIFY","align","init_TypingLoopText"],"sources":["https:/framerusercontent.com/modules/oBruIMOHV0iYNEzpZEOT/nPUsOzmYnjVIpZnjsqey/TypingLoopText.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion}from\"framer-motion\";const JUSTIFY={left:\"flex-start\",center:\"center\",right:\"flex-end\"};// 한 문구를 다 지운 뒤 다음 문구를 치기 전까지 쉬는 시간(ms)\nconst NEXT_DELAY=250;// 화면에는 보이지 않지만 스크린 리더는 읽을 수 있는 글자용 스타일\nconst VISUALLY_HIDDEN={position:\"absolute\",width:1,height:1,margin:-1,padding:0,overflow:\"hidden\",clip:\"rect(0, 0, 0, 0)\",whiteSpace:\"nowrap\",border:0};/**\n * @framerDisableUnlink\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function TypingLoopText(props){const{prefix=\"We design \",phrases=[\"websites.\",\"brands.\",\"products.\"],tag:Tag=\"h2\",typeSpeed=70,deleteSpeed=40,pause=1.5,loop=true,reserve=true,align=\"left\",font,color=\"#111111\",typedColor=\"#7C5CFF\",style}=props;const cursor={visible:true,character:\"|\",color:\"#7C5CFF\",blink:true,...props.cursor};const isStatic=useIsStaticRenderer();// 이모지처럼 두 칸을 차지하는 글자가 반으로 잘리지 않게 글자 단위로 나눈다\nconst list=phrases.filter(Boolean).map(phrase=>Array.from(phrase));const phrasesKey=phrases.join(\"\\n\");const longest=list.reduce((result,phrase)=>phrase.length>result.length?phrase:result,[]);const root=useRef(null);const[started,setStarted]=useState(false);const[index,setIndex]=useState(0);const[count,setCount]=useState(0);const[deleting,setDeleting]=useState(false);const[still,setStill]=useState(isStatic);// 화면에 보일 때부터 치기 시작한다\nuseEffect(()=>{if(isStatic)return;if(window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches){setStill(true);return;}const element=root.current;if(!element)return;const observer=new IntersectionObserver(([entry])=>{if(entry.isIntersecting){setStarted(true);observer.disconnect();}});observer.observe(element);return()=>observer.disconnect();},[isStatic]);useEffect(()=>{setIndex(0);setCount(0);setDeleting(false);},[phrasesKey]);useEffect(()=>{if(still||!started||list.length===0)return;const phrase=list[index%list.length];let delay=typeSpeed;let next=()=>setCount(count+1);if(!deleting&&count>=phrase.length){if(!loop&&index>=list.length-1)return;delay=pause*1e3;next=()=>setDeleting(true);}else if(deleting&&count>0){delay=deleteSpeed;next=()=>setCount(count-1);}else if(deleting){delay=NEXT_DELAY;next=()=>{setDeleting(false);setIndex((index+1)%list.length);};}const timer=setTimeout(next,delay);return()=>clearTimeout(timer);},[still,started,index,count,deleting,phrasesKey,typeSpeed,deleteSpeed,pause,loop]);const current=list.length?list[index%list.length]:[];const typed=still?current.join(\"\"):current.slice(0,count).join(\"\");const cursorElement=cursor.visible&&/*#__PURE__*/_jsx(motion.span,{\"aria-hidden\":\"true\",style:{color:cursor.color},animate:{opacity:cursor.blink&&!isStatic?[1,1,0,0]:1},transition:{duration:1,times:[0,.5,.5,1],repeat:Infinity,ease:\"linear\"},children:cursor.character});const line=/*#__PURE__*/_jsxs(_Fragment,{children:[prefix,/*#__PURE__*/_jsx(\"span\",{style:{color:typedColor},children:typed}),cursorElement]});return /*#__PURE__*/_jsxs(Tag,{ref:element=>{root.current=element;},style:{fontSize:40,fontWeight:600,lineHeight:1.2,...font,...style,position:\"relative\",display:\"inline-block\",margin:0,color,whiteSpace:\"pre\"},children:[/*#__PURE__*/_jsxs(\"span\",{style:VISUALLY_HIDDEN,children:[prefix,current.join(\"\")]}),reserve?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(\"span\",{\"aria-hidden\":\"true\",style:{visibility:\"hidden\"},children:[prefix,longest.join(\"\"),cursor.visible&&cursor.character]}),/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",inset:0,display:\"flex\",justifyContent:JUSTIFY[align]},children:/*#__PURE__*/_jsx(\"span\",{children:line})})]}):/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":\"true\",children:line})]});}addPropertyControls(TypingLoopText,{prefix:{type:ControlType.String,title:\"Prefix\",defaultValue:\"We design \"},phrases:{type:ControlType.Array,title:\"Phrases\",control:{type:ControlType.String},defaultValue:[\"websites.\",\"brands.\",\"products.\"]},tag:{type:ControlType.Enum,title:\"Tag\",options:[\"h1\",\"h2\",\"h3\",\"p\",\"span\"],optionTitles:[\"H1\",\"H2\",\"H3\",\"P\",\"Span\"],defaultValue:\"h2\"},typeSpeed:{type:ControlType.Number,title:\"Type Speed\",min:10,max:300,step:5,unit:\"ms\",defaultValue:70},deleteSpeed:{type:ControlType.Number,title:\"Delete Speed\",min:10,max:300,step:5,unit:\"ms\",defaultValue:40},pause:{type:ControlType.Number,title:\"Pause\",min:.2,max:10,step:.1,unit:\"s\",defaultValue:1.5},loop:{type:ControlType.Boolean,title:\"Loop\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:true},reserve:{type:ControlType.Boolean,title:\"Reserve Width\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:true},align:{type:ControlType.Enum,title:\"Align\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",hidden:props=>!props.reserve},cursor:{type:ControlType.Object,title:\"Cursor\",controls:{visible:{type:ControlType.Boolean,title:\"Visible\",enabledTitle:\"Show\",disabledTitle:\"Hide\",defaultValue:true},character:{type:ControlType.String,title:\"Character\",defaultValue:\"|\"},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#7C5CFF\"},blink:{type:ControlType.Boolean,title:\"Blink\",enabledTitle:\"Yes\",disabledTitle:\"No\",defaultValue:true}}},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:40,variant:\"Semibold\",lineHeight:\"1.2em\"}},color:{type:ControlType.Color,title:\"Text\",defaultValue:\"#111111\"},typedColor:{type:ControlType.Color,title:\"Typed Text\",defaultValue:\"#7C5CFF\",description:\"Created by [Joviseo](https://joviseo.vercel.app)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TypingLoopText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"* @framerSupportedLayoutWidth auto\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TypingLoopText.map"],"mappings":"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"}