{"version":3,"file":"TypeInkCircle.Ci9XlIiN.mjs","names":["p","useRef","useState","__esmMin","init_ssg_sandbox_shims","window","_e","de","p","init_npm_react_18_3_1","ce","init_framer_B6PCHH0A","ControlType","addPropertyControls","RenderTarget","path","a","b","c","d","j","shape","TypeInkCircle","still","reduce","p$1","ref","on","setOn","hand","setHand","instant","setInstant","vw","setVw","f","io","e","again","scale","fs0","fit","box","init_TypeInkCircle","init_jsx_runtime"],"sources":["https:/framerusercontent.com/modules/gEXTqVDmqxO46BZJfY6W/OBXyoyWXD7FTc0LUWJl9/TypeInkCircle.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";// each shape is drawn in a 200 x 100 box laid over the word; j nudges the control points so every redraw differs\nfunction path(shape,j){const[a,b,c,d]=j;if(shape===\"underline\")return{d:`M 4 ${88+a} C 60 ${84+b}, 140 ${90+c}, 196 ${84+d} M 18 ${100+b} C 80 ${95+a}, 150 ${99+d}, 186 ${96+c}`,box:{left:\"-2%\",top:\"0%\",width:\"104%\",height:\"100%\"}};if(shape===\"box\")return{d:`M ${6+a} ${8+b} L ${196+c} ${4+a} L ${192+d} ${96+c} L ${4+b} ${92+d} Z M ${10+c} ${4+d} L ${16+a} ${98+b}`,box:{left:\"-6%\",top:\"-14%\",width:\"112%\",height:\"128%\"}};if(shape===\"strike\")return{d:`M 0 ${58+a} C 50 ${50+b}, 120 ${60+c}, 200 ${50+d} M 6 ${68+c} C 70 ${62+d}, 140 ${70+a}, 194 ${62+b}`,box:{left:\"-3%\",top:\"0%\",width:\"106%\",height:\"100%\"}};// a wobbly ellipse that overshoots and crosses itself at the start, like a pen\nreturn{d:`M 12 ${50+a} C 8 ${18+b}, 60 ${4+c}, 110 ${6+a} C 160 ${8+d}, 196 ${20+b}, 194 ${50+c} C 192 ${80+a}, 150 ${96+d}, 100 ${94+b} C 50 ${92+c}, 6 ${84+a}, 10 ${52+d} C 12 ${36+b}, 30 ${26+c}, 48 ${22+a}`,box:{left:\"-8%\",top:\"-18%\",width:\"116%\",height:\"136%\"}};}export default function TypeInkCircle(p){const still=RenderTarget.current()!==RenderTarget.preview;const reduce=typeof window!==\"undefined\"&&!!window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;const shape=p.shape||\"circle\";const ref=useRef(null);const[on,setOn]=useState(still||reduce);const[hand,setHand]=useState([0,0,0,0]);const[instant,setInstant]=useState(false)// a redraw first snaps the ink back off, then draws\n;const[vw,setVw]=useState(1440);useEffect(()=>{const f=()=>setVw(window.innerWidth);f();window.addEventListener(\"resize\",f);return()=>window.removeEventListener(\"resize\",f);},[]);useEffect(()=>{if(still||reduce||!ref.current)return;const io=new IntersectionObserver(([e])=>{if(e.isIntersecting){setOn(true);io.disconnect();}},{threshold:.6});io.observe(ref.current);return()=>io.disconnect();},[still,reduce]);const again=()=>{if(still||reduce||p.redraw===false||!on)return;setInstant(true);setOn(false);setHand([0,0,0,0].map(()=>Math.round((Math.random()-.5)*8)));requestAnimationFrame(()=>requestAnimationFrame(()=>{setInstant(false);setOn(true);}));};const{d,box}=path(shape,hand);// never wider than the screen: cap the size so the whole word (plus its mark) fits a phone with a side gutter\n// Font controls can't vary per breakpoint, so the word follows the heading beside it with its own scales\nconst scale=(vw<810?p.phoneScale??100:vw<1200?p.tabletScale??100:100)/100;const fs0=p.font&&p.font.fontSize?typeof p.font.fontSize===\"number\"?p.font.fontSize+\"px\":String(p.font.fontSize):\"92px\";const fs=scale===1?fs0:`calc(${fs0} * ${scale})`;const fit=`min(${fs}, calc((100vw - 56px) / ${((p.word.length+.4)*.62).toFixed(2)}))`;return /*#__PURE__*/_jsxs(\"span\",{ref:ref,onMouseEnter:again,onClick:again,style:{...p.style,display:\"inline-block\",color:p.ink,...p.font,fontSize:fit,whiteSpace:\"nowrap\",cursor:p.redraw===false?undefined:\"default\"},children:[/*#__PURE__*/_jsxs(\"span\",{style:{position:\"relative\",display:\"inline-block\",padding:\"0 .12em\"},children:[p.word,/*#__PURE__*/_jsx(\"svg\",{viewBox:\"0 0 200 100\",preserveAspectRatio:\"none\",\"aria-hidden\":\"true\",style:{position:\"absolute\",...box,overflow:\"visible\",pointerEvents:\"none\"},children:/*#__PURE__*/_jsx(\"path\",{d:d,fill:\"none\",stroke:p.color,strokeWidth:p.thickness,strokeLinecap:\"round\",strokeLinejoin:\"round\",vectorEffect:\"non-scaling-stroke\",pathLength:1,strokeDasharray:1,strokeDashoffset:on?0:1,style:{transition:instant?\"none\":`stroke-dashoffset ${p.duration}ms cubic-bezier(.4,0,.2,1) ${hand.some(Boolean)?0:p.delay}ms`}})})]}),p.suffix]});}addPropertyControls(TypeInkCircle,{word:{type:ControlType.String,title:\"Word\",defaultValue:\"loud\"},suffix:{type:ControlType.String,title:\"Suffix\",defaultValue:\"\",description:\"Punctuation right after the word, outside the mark\"},shape:{type:ControlType.Enum,title:\"Shape\",options:[\"circle\",\"underline\",\"box\",\"strike\"],optionTitles:[\"Ring\",\"Underline\",\"Box\",\"Cross out\"],defaultValue:\"circle\"},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#E8705A\"},ink:{type:ControlType.Color,title:\"Ink\",defaultValue:\"#F1EBE4\"},thickness:{type:ControlType.Number,title:\"Thickness\",defaultValue:2.5,min:1,max:8,step:.5,unit:\"px\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:900,min:200,max:3e3,unit:\"ms\"},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:400,min:0,max:3e3,unit:\"ms\"},redraw:{type:ControlType.Boolean,title:\"Redraw\",defaultValue:true},tabletScale:{type:ControlType.Number,title:\"Tablet Scale\",defaultValue:100,min:20,max:100,unit:\"%\",description:\"Size between 810 and 1199px, to match a heading's breakpoints.\"},phoneScale:{type:ControlType.Number,title:\"Phone Scale\",defaultValue:100,min:20,max:100,unit:\"%\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"monospace\",defaultValue:{fontSize:92,lineHeight:\"1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TypeInkCircle\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TypeInkCircle.map"],"mappings":"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"}